Refactor monolithic modules and harden booking, email, and auth infrastructure.

Split oversized frontend API client, email service, and admin/booking pages into focused modules while preserving import surfaces, and add Redis-backed queues, stale booking cleanup, stronger auth, and scale deployment configs.

Co-authored-by: Cursor <cursoragent@cursor.com>

README.md

@@ -14,7 +14,7 @@ A full-stack web app for organizing and managing language exchange events (Asunc
 - **Backend**: Node.js + TypeScript, Hono, Drizzle ORM, SQLite (default) or PostgreSQL
 - **Auth**: JWT (via `jose`), **Argon2id** password hashing (with legacy bcrypt verification for older hashes)
 - **Email**: `nodemailer` (SMTP) with optional provider config
-- **Frontend**: Next.js 14 (App Router), Tailwind CSS, SWR, Heroicons
+- **Frontend**: Next.js 14 (App Router), Tailwind CSS, Heroicons
 
 ## Local development
 
@@ -86,6 +86,7 @@ Key settings (see `backend/.env.example` for the full list):
 - **URLs/ports**: `PORT`, `API_URL`, `FRONTEND_URL`
 - **Email**: `EMAIL_PROVIDER` (`console|smtp|resend`) and corresponding credentials
 - **Payments (optional)**: Stripe/MercadoPago/LNbits configuration
+- **Scaling (optional)**: `REDIS_URL`, `DB_POOL_MAX`, and `S3_*` (see "Horizontal scaling" below)
 
 ### Frontend (`frontend/.env`)
 
@@ -160,6 +161,86 @@ npm run db:migrate
 
 Then install/enable the systemd services and nginx configs for your server.
 
+## Horizontal scaling
+
+The backend can run as a single instance with zero extra configuration (the
+default), or as multiple replicas behind a load balancer. Scaling support is
+fully optional and backward compatible: if you set none of the variables below,
+the app behaves exactly as before with in-memory state and local-disk uploads.
+
+### Requirements for multiple instances
+
+- **Use PostgreSQL.** Set `DB_TYPE=postgres`. SQLite is a single local file and
+  cannot be shared safely across instances.
+- **Set `REDIS_URL`.** This makes the following subsystems shared across
+  instances instead of per process:
+  - distributed cache
+  - rate limiting (shared sliding/fixed window)
+  - pub/sub for real-time payment events, so an SSE client connected to one
+    instance still receives an event when the LNbits webhook lands on another
+  - distributed locks (so only one instance seeds email templates per boot and
+    only one instance polls LNbits per pending ticket)
+  - the email hourly cap (`MAX_EMAILS_PER_HOUR`) becomes a global cap
+- **Tune the DB pool.** `DB_POOL_MAX` is the max Postgres connections per
+  instance (default 10). Keep `DB_POOL_MAX * replicas` below the Postgres
+  `max_connections` setting (default 100). For example, 5 replicas at
+  `DB_POOL_MAX=15` uses up to 75 connections.
+
+If Redis is configured but becomes unreachable at runtime, each subsystem
+degrades gracefully (rate limiter fails open, cache misses fall through to the
+DB, locks proceed) and the API keeps serving rather than crashing.
+
+### Uploads across instances
+
+Media uploads default to local disk (`./uploads`). With more than one instance
+you must use shared storage so a file uploaded on one instance is readable on
+the others. Two options:
+
+- **S3-compatible storage (recommended):** set `S3_ENDPOINT`, `S3_BUCKET`,
+  `S3_ACCESS_KEY_ID`, `S3_SECRET_ACCESS_KEY` (and optionally `S3_PUBLIC_URL`,
+  `S3_REGION`, `S3_FORCE_PATH_STYLE`). Works with Garage, MinIO, or AWS S3.
+- **Shared volume:** mount the same `./uploads` directory (e.g. NFS) into every
+  instance.
+
+### Real-time payment SSE behind a load balancer
+
+The payment status stream (`/api/lnbits/stream/:ticketId`) is a long-lived SSE
+connection. With Redis pub/sub enabled, any instance can deliver the payment
+event regardless of which instance holds the socket, so sticky sessions are not
+strictly required. Enabling sticky sessions (IP hash) for the SSE path is still
+a reasonable optimization.
+
+### Health and observability
+
+`GET /health` always returns 200 and reports Redis connectivity and which
+backend each subsystem selected, for example:
+
+```json
+{
+  "status": "ok",
+  "redis": { "enabled": true, "healthy": true },
+  "backends": {
+    "cache": "redis",
+    "rateLimiter": "redis",
+    "pubsub": "redis",
+    "lock": "redis",
+    "storage": "s3"
+  }
+}
+```
+
+The same selection is logged once at startup.
+
+### docker-compose example (N replicas + Redis)
+
+A ready-to-edit snippet lives at `deploy/docker-compose.scale.yml`. It runs
+Postgres, Redis, and the API scaled to multiple replicas behind nginx. Bring it
+up with:
+
+```bash
+docker compose -f deploy/docker-compose.scale.yml up --build --scale api=3
+```
+
 ## Documentation
 
 - **Specs / notes**: `about/`

backend/.env.example

@@ -8,6 +8,40 @@ DATABASE_URL=./data/spanglish.db
 # For PostgreSQL
 # DATABASE_URL=postgresql://user:password@localhost:5432/spanglish
 
+# Max PostgreSQL connections per instance (default 10). When running multiple
+# replicas, keep DB_POOL_MAX * replicas below the Postgres max_connections limit.
+# DB_POOL_MAX=10
+
+# ---------------------------------------------------------------------------
+# Horizontal scaling (all optional)
+# ---------------------------------------------------------------------------
+# Leave everything below UNSET to run as a single instance with in-memory
+# backends and local-disk uploads (zero-config, identical to the original
+# behavior). Set them to run multiple API replicas behind a load balancer.
+#
+# Note: running more than one instance requires DB_TYPE=postgres. SQLite is a
+# single local file and cannot be shared safely across instances.
+
+# Redis connection URL. When set, the cache, rate limiter, pub/sub (real-time
+# payment events), distributed locks, and the email hourly cap are shared across
+# all instances. When unset, each instance uses in-memory equivalents.
+# REDIS_URL=redis://localhost:6379
+
+# Optional S3-compatible object storage for media uploads (e.g. Garage, MinIO,
+# AWS S3). When S3_ENDPOINT and S3_BUCKET are set, uploads go to the bucket and
+# are shared across instances. When unset, uploads are written to ./uploads on
+# local disk (the default).
+# S3_ENDPOINT=https://garage.example.com
+# S3_REGION=garage
+# S3_BUCKET=spanglish-media
+# S3_ACCESS_KEY_ID=
+# S3_SECRET_ACCESS_KEY=
+# Public base URL used to build fileUrl for stored objects (CDN or web endpoint).
+# If unset, a path-style URL against S3_ENDPOINT/S3_BUCKET is used.
+# S3_PUBLIC_URL=https://media.example.com
+# Use path-style addressing (true for Garage/MinIO). Defaults to true.
+# S3_FORCE_PATH_STYLE=true
+
 # JWT Secret (change in production!)
 JWT_SECRET=your-super-secret-key-change-in-production
 
@@ -73,3 +107,10 @@ SMTP_TLS_REJECT_UNAUTHORIZED=true
 # If the limit is reached, queued emails will pause and resume automatically
 MAX_EMAILS_PER_HOUR=30
 
+# Pending Booking Cleanup
+# Pending bookings whose payment is still unpaid (not awaiting admin approval)
+# are cancelled after this many minutes, freeing the seats (default: 30)
+PENDING_BOOKING_TTL_MINUTES=30
+# How often the cleanup job runs, in milliseconds (default: 300000 = 5 min)
+PENDING_BOOKING_CLEANUP_INTERVAL_MS=300000
+

backend/package.json

@@ -13,6 +13,7 @@
     "db:import": "tsx src/db/import.ts"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.1075.0",
     "@hono/node-server": "^1.11.4",
     "@hono/swagger-ui": "^0.4.0",
     "@hono/zod-openapi": "^0.14.4",
@@ -22,6 +23,7 @@
     "dotenv": "^17.2.3",
     "drizzle-orm": "^0.31.2",
     "hono": "^4.4.7",
+    "ioredis": "^5.11.1",
     "jose": "^5.4.0",
     "nanoid": "^5.0.7",
     "nodemailer": "^7.0.13",

backend/src/db/index.ts

@@ -12,8 +12,11 @@ const dbType = process.env.DB_TYPE || 'sqlite';
 let db: ReturnType<typeof drizzleSqlite> | ReturnType<typeof drizzlePg>;
 
 if (dbType === 'postgres') {
+  // Cap connections per instance so that, when running multiple replicas,
+  // DB_POOL_MAX * replicas stays below the Postgres max_connections limit.
   const pool = new pg.Pool({
     connectionString: process.env.DATABASE_URL || 'postgresql://localhost:5432/spanglish',
+    max: Number(process.env.DB_POOL_MAX || 10),
   });
   db = drizzlePg(pool, { schema });
 } else {

backend/src/db/migrate.ts

@@ -432,6 +432,18 @@ async function migrate() {
       )
     `);
 
+    await (db as any).run(sql`
+      CREATE TABLE IF NOT EXISTS email_queue (
+        id TEXT PRIMARY KEY,
+        params TEXT NOT NULL,
+        status TEXT NOT NULL DEFAULT 'pending',
+        attempts INTEGER NOT NULL DEFAULT 0,
+        last_error TEXT,
+        created_at TEXT NOT NULL,
+        processed_at TEXT
+      )
+    `);
+
     // Site settings table
     await (db as any).run(sql`
       CREATE TABLE IF NOT EXISTS site_settings (
@@ -899,6 +911,18 @@ async function migrate() {
       )
     `);
 
+    await (db as any).execute(sql`
+      CREATE TABLE IF NOT EXISTS email_queue (
+        id UUID PRIMARY KEY,
+        params TEXT NOT NULL,
+        status VARCHAR(20) NOT NULL DEFAULT 'pending',
+        attempts INTEGER NOT NULL DEFAULT 0,
+        last_error TEXT,
+        created_at TIMESTAMP NOT NULL,
+        processed_at TIMESTAMP
+      )
+    `);
+
     // Site settings table
     await (db as any).execute(sql`
       CREATE TABLE IF NOT EXISTS site_settings (

backend/src/db/schema.ts

@@ -273,6 +273,18 @@ export const sqliteEmailSettings = sqliteTable('email_settings', {
   updatedAt: text('updated_at').notNull(),
 });
 
+// Durable email queue. Jobs survive process restarts; a startup recovery step
+// resets any 'processing' rows back to 'pending'.
+export const sqliteEmailQueue = sqliteTable('email_queue', {
+  id: text('id').primaryKey(),
+  params: text('params').notNull(), // JSON-encoded TemplateEmailJobParams
+  status: text('status', { enum: ['pending', 'processing', 'sent', 'failed'] }).notNull().default('pending'),
+  attempts: integer('attempts').notNull().default(0),
+  lastError: text('last_error'),
+  createdAt: text('created_at').notNull(),
+  processedAt: text('processed_at'),
+});
+
 // Legal Pages table for admin-editable legal content
 export const sqliteLegalPages = sqliteTable('legal_pages', {
   id: text('id').primaryKey(),
@@ -608,6 +620,18 @@ export const pgEmailSettings = pgTable('email_settings', {
   updatedAt: timestamp('updated_at').notNull(),
 });
 
+// Durable email queue. Jobs survive process restarts; a startup recovery step
+// resets any 'processing' rows back to 'pending'.
+export const pgEmailQueue = pgTable('email_queue', {
+  id: uuid('id').primaryKey(),
+  params: pgText('params').notNull(), // JSON-encoded TemplateEmailJobParams
+  status: varchar('status', { length: 20 }).notNull().default('pending'),
+  attempts: pgInteger('attempts').notNull().default(0),
+  lastError: pgText('last_error'),
+  createdAt: timestamp('created_at').notNull(),
+  processedAt: timestamp('processed_at'),
+});
+
 // Legal Pages table for admin-editable legal content
 export const pgLegalPages = pgTable('legal_pages', {
   id: uuid('id').primaryKey(),
@@ -695,6 +719,7 @@ export const auditLogs = dbType === 'postgres' ? pgAuditLogs : sqliteAuditLogs;
 export const emailTemplates = dbType === 'postgres' ? pgEmailTemplates : sqliteEmailTemplates;
 export const emailLogs = dbType === 'postgres' ? pgEmailLogs : sqliteEmailLogs;
 export const emailSettings = dbType === 'postgres' ? pgEmailSettings : sqliteEmailSettings;
+export const emailQueue = dbType === 'postgres' ? pgEmailQueue : sqliteEmailQueue;
 export const paymentOptions = dbType === 'postgres' ? pgPaymentOptions : sqlitePaymentOptions;
 export const eventPaymentOverrides = dbType === 'postgres' ? pgEventPaymentOverrides : sqliteEventPaymentOverrides;
 export const magicLinkTokens = dbType === 'postgres' ? pgMagicLinkTokens : sqliteMagicLinkTokens;

backend/src/index.ts

@@ -25,6 +25,9 @@ import legalSettingsRoutes from './routes/legal-settings.js';
 import faqRoutes from './routes/faq.js';
 import emailService from './lib/email.js';
 import { initEmailQueue } from './lib/emailQueue.js';
+import { startBookingCleanup } from './lib/bookingCleanup.js';
+import { getLock } from './lib/stores/lock.js';
+import { describeBackends, describeRedis, logSelectedBackends } from './lib/backends.js';
 
 const app = new Hono();
 
@@ -1870,9 +1873,16 @@ app.use('/uploads/*', async (c, next) => {
 });
 app.use('/uploads/*', serveStatic({ root: './' }));
 
-// Health check
+// Health check.
+// Always returns 200 so a transient Redis blip does not cause the load balancer
+// to pull a node; Redis/subsystem status is reported in the body for monitoring.
 app.get('/health', (c) => {
-  return c.json({ status: 'ok', timestamp: new Date().toISOString() });
+  return c.json({
+    status: 'ok',
+    timestamp: new Date().toISOString(),
+    redis: describeRedis(),
+    backends: describeBackends(),
+  });
 });
 
 // API Routes
@@ -1909,15 +1919,30 @@ const port = parseInt(process.env.PORT || '3001');
 // Initialize email queue with the email service reference
 initEmailQueue(emailService);
 
-// Initialize email templates on startup
+// Periodically expire abandoned pending bookings so they stop holding seats.
-emailService.seedDefaultTemplates().catch(err => {
+startBookingCleanup();
-  console.error('[Email] Failed to seed templates:', err);
+
-});
+// Initialize email templates on startup.
+// Guarded by a distributed lock so that, when running multiple replicas, only
+// one instance seeds/updates templates per boot instead of all of them racing.
+getLock()
+  .withLock('seed-templates', 30_000, () => emailService.seedDefaultTemplates())
+  .then((result) => {
+    if (result === null) {
+      console.log('[Email] Template seeding skipped (another instance holds the lock)');
+    }
+  })
+  .catch(err => {
+    console.error('[Email] Failed to seed templates:', err);
+  });
 
 console.log(`🚀 Spanglish API server starting on port ${port}`);
 console.log(`📚 API docs available at http://localhost:${port}/api-docs`);
 console.log(`📋 OpenAPI spec at http://localhost:${port}/openapi.json`);
 
+// Log which backend (memory/redis, local/s3) each subsystem selected.
+logSelectedBackends();
+
 serve({
   fetch: app.fetch,
   port,

backend/src/lib/auth.ts

@@ -192,11 +192,44 @@ export async function invalidateAllUserSessions(userId: string): Promise<void> {
     .where(eq((userSessions as any).userId, userId));
 }
 
-// Password validation (min 10 characters per spec)
+// Small blocklist of common/weak passwords (and obvious app-specific ones).
+// Compared case-insensitively after stripping non-alphanumerics so that e.g.
+// "P@ssw0rd!" still matches "password".
+const COMMON_PASSWORDS = new Set([
+  'password', 'passw0rd', '123456', '1234567', '12345678', '123456789', '1234567890',
+  'qwerty', 'qwertyuiop', 'letmein', 'welcome', 'admin', 'administrator', 'iloveyou',
+  'monkey', 'dragon', 'sunshine', 'princess', 'football', 'baseball', 'abc123',
+  'spanglish', 'changeme', 'secret', 'master', 'login', 'access',
+]);
+
+// Password policy: 10-128 chars, requires a mix of character types, and rejects
+// common/weak passwords. Centralized so register/reset/change all share it.
 export function validatePassword(password: string): { valid: boolean; error?: string } {
   if (password.length < 10) {
     return { valid: false, error: 'Password must be at least 10 characters long' };
   }
+  if (password.length > 128) {
+    return { valid: false, error: 'Password must be at most 128 characters long' };
+  }
+
+  const hasLower = /[a-z]/.test(password);
+  const hasUpper = /[A-Z]/.test(password);
+  const hasDigit = /\d/.test(password);
+  const hasSymbol = /[^A-Za-z0-9]/.test(password);
+
+  // Require lowercase, uppercase, and at least one digit or symbol.
+  if (!hasLower || !hasUpper || !(hasDigit || hasSymbol)) {
+    return {
+      valid: false,
+      error: 'Password must include uppercase and lowercase letters and at least one number or symbol',
+    };
+  }
+
+  const normalized = password.toLowerCase().replace(/[^a-z0-9]/g, '');
+  if (COMMON_PASSWORDS.has(normalized)) {
+    return { valid: false, error: 'Password is too common. Please choose a less guessable password.' };
+  }
+
   return { valid: true };
 }
 

backend/src/lib/backends.ts

@@ -0,0 +1,36 @@
+// Reports which backend each scalable subsystem is using, for the health
+// endpoint and startup logging.
+
+import { isRedisEnabled, isRedisHealthy } from './redis.js';
+import { getRateLimiter } from './stores/rateLimiter.js';
+import { getPubSub } from './stores/pubsub.js';
+import { getCache } from './stores/cache.js';
+import { getLock } from './stores/lock.js';
+import { getStorage } from './storage.js';
+
+export function describeBackends() {
+  return {
+    cache: getCache().backend,
+    rateLimiter: getRateLimiter().backend,
+    pubsub: getPubSub().backend,
+    lock: getLock().backend,
+    storage: getStorage().backend,
+  };
+}
+
+export function describeRedis() {
+  return { enabled: isRedisEnabled(), healthy: isRedisHealthy() };
+}
+
+/** Log one line per subsystem at startup so the active backend is obvious. */
+export function logSelectedBackends(): void {
+  const b = describeBackends();
+  const r = describeRedis();
+  console.log('[startup] Subsystem backends:');
+  console.log(`  redis:        ${r.enabled ? 'enabled' : 'disabled (in-memory fallback)'}`);
+  console.log(`  cache:        ${b.cache}`);
+  console.log(`  rate limiter: ${b.rateLimiter}`);
+  console.log(`  pub/sub:      ${b.pubsub}`);
+  console.log(`  lock:         ${b.lock}`);
+  console.log(`  storage:      ${b.storage}`);
+}

backend/src/lib/bookingCleanup.ts

@@ -0,0 +1,104 @@
+// Expire stale pending bookings.
+//
+// When a booking is started, its tickets are created with status 'pending' and
+// a 'pending' payment. Pending tickets count toward an event's capacity, so an
+// abandoned checkout would otherwise hold those seats forever. This job cancels
+// pending tickets whose payment is still 'pending' (i.e. never paid and not
+// awaiting admin approval) after a configurable TTL, freeing the seats.
+
+import { and, eq, lt, inArray } from 'drizzle-orm';
+import { db, dbAll, tickets, payments } from '../db/index.js';
+import { getNow, toDbDate } from './utils.js';
+import { getLock } from './stores/lock.js';
+
+function getTtlMs(): number {
+  const minutes = parseInt(process.env.PENDING_BOOKING_TTL_MINUTES || '30', 10);
+  return (Number.isFinite(minutes) && minutes > 0 ? minutes : 30) * 60 * 1000;
+}
+
+/**
+ * Cancel stale pending bookings. Returns the number of tickets cancelled.
+ *
+ * A booking is considered stale when its payment is still 'pending' (not
+ * 'pending_approval', which means an admin is reviewing a manual transfer) and
+ * older than PENDING_BOOKING_TTL_MINUTES.
+ */
+export async function cleanupStalePendingBookings(): Promise<number> {
+  const cutoff = toDbDate(new Date(Date.now() - getTtlMs()));
+
+  const stale = await dbAll<{ ticketId: string | null; paymentId: string }>(
+    (db as any)
+      .select({
+        ticketId: (payments as any).ticketId,
+        paymentId: (payments as any).id,
+      })
+      .from(payments)
+      .where(and(
+        eq((payments as any).status, 'pending'),
+        lt((payments as any).createdAt, cutoff)
+      ))
+  );
+
+  if (stale.length === 0) return 0;
+
+  const ticketIds = stale.map((s) => s.ticketId).filter((id): id is string => !!id);
+  const paymentIds = stale.map((s) => s.paymentId);
+  const now = getNow();
+
+  let cancelledTickets = 0;
+  if (ticketIds.length > 0) {
+    const result: any = await (db as any)
+      .update(tickets)
+      .set({ status: 'cancelled' })
+      .where(and(
+        inArray((tickets as any).id, ticketIds),
+        eq((tickets as any).status, 'pending')
+      ));
+    cancelledTickets = result?.changes ?? result?.rowCount ?? ticketIds.length;
+  }
+
+  await (db as any)
+    .update(payments)
+    .set({ status: 'failed', updatedAt: now })
+    .where(inArray((payments as any).id, paymentIds));
+
+  console.log(
+    `[BookingCleanup] Expired ${stale.length} stale pending payment(s); ` +
+    `cancelled ${cancelledTickets} ticket(s).`
+  );
+  return cancelledTickets;
+}
+
+let cleanupTimer: ReturnType<typeof setInterval> | null = null;
+
+/**
+ * Start a periodic cleanup of stale pending bookings. Each run is guarded by a
+ * distributed lock so that, across multiple replicas, only one instance does
+ * the work per interval.
+ */
+export function startBookingCleanup(): void {
+  const intervalMs = parseInt(process.env.PENDING_BOOKING_CLEANUP_INTERVAL_MS || '300000', 10); // 5 min
+
+  const run = () => {
+    getLock()
+      .withLock('cleanup-pending-bookings', Math.min(intervalMs, 60_000), () =>
+        cleanupStalePendingBookings()
+      )
+      .catch((err) =>
+        console.error('[BookingCleanup] Run failed:', err?.message || err)
+      );
+  };
+
+  // Run shortly after startup, then on the interval.
+  setTimeout(run, 30_000).unref?.();
+  cleanupTimer = setInterval(run, intervalMs);
+  cleanupTimer.unref?.();
+  console.log(`[BookingCleanup] Scheduled every ${Math.round(intervalMs / 1000)}s`);
+}
+
+export function stopBookingCleanup(): void {
+  if (cleanupTimer) {
+    clearInterval(cleanupTimer);
+    cleanupTimer = null;
+  }
+}

backend/src/lib/email/bookingEmails.ts

@@ -0,0 +1,96 @@
+// High-level booking confirmation email sender.
+
+import { db, dbGet, dbAll, events, tickets } from '../../db/index.js';
+import { eq } from 'drizzle-orm';
+import { sendTemplateEmail } from './templateService.js';
+import { formatDate, formatTime, formatCurrency, getSiteTimezone } from './formatting.js';
+
+/**
+ * Send booking confirmation email
+ * Supports multi-ticket bookings - includes all tickets in the booking
+ */
+export async function sendBookingConfirmation(ticketId: string): Promise<{ success: boolean; error?: string }> {
+  // Get ticket with event info
+  const ticket = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(tickets)
+      .where(eq((tickets as any).id, ticketId))
+  );
+
+  if (!ticket) {
+    return { success: false, error: 'Ticket not found' };
+  }
+
+  const event = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(events)
+      .where(eq((events as any).id, ticket.eventId))
+  );
+
+  if (!event) {
+    return { success: false, error: 'Event not found' };
+  }
+
+  // Get all tickets in this booking (if multi-ticket)
+  let allTickets: any[] = [ticket];
+  if (ticket.bookingId) {
+    allTickets = await dbAll(
+      (db as any)
+        .select()
+        .from(tickets)
+        .where(eq((tickets as any).bookingId, ticket.bookingId))
+    );
+  }
+
+  const ticketCount = allTickets.length;
+  const locale = ticket.preferredLanguage || 'en';
+  const eventTitle = locale === 'es' && event.titleEs ? event.titleEs : event.title;
+
+  // Generate ticket PDF URL (primary ticket, or use combined endpoint for multi)
+  const apiUrl = process.env.API_URL || 'http://localhost:3001';
+  const ticketPdfUrl = ticketCount > 1 && ticket.bookingId
+    ? `${apiUrl}/api/tickets/booking/${ticket.bookingId}/pdf`
+    : `${apiUrl}/api/tickets/${ticket.id}/pdf`;
+
+  const attendeeFullName = `${ticket.attendeeFirstName} ${ticket.attendeeLastName || ''}`.trim();
+
+  // Build attendee list for multi-ticket emails
+  const attendeeNames = allTickets.map(t =>
+    `${t.attendeeFirstName} ${t.attendeeLastName || ''}`.trim()
+  ).join(', ');
+
+  // Calculate total price for multi-ticket bookings
+  const totalPrice = event.price * ticketCount;
+
+  // Get site timezone for proper date/time formatting
+  const timezone = await getSiteTimezone();
+
+  return sendTemplateEmail({
+    templateSlug: 'booking-confirmation',
+    to: ticket.attendeeEmail,
+    toName: attendeeFullName,
+    locale,
+    eventId: event.id,
+    variables: {
+      attendeeName: attendeeFullName,
+      attendeeEmail: ticket.attendeeEmail,
+      ticketId: ticket.id,
+      bookingId: ticket.bookingId || ticket.id,
+      qrCode: ticket.qrCode || '',
+      ticketPdfUrl,
+      eventTitle,
+      eventDate: formatDate(event.startDatetime, locale, timezone),
+      eventTime: formatTime(event.startDatetime, locale, timezone),
+      eventLocation: event.location,
+      eventLocationUrl: event.locationUrl || '',
+      eventPrice: formatCurrency(event.price, event.currency),
+      // Multi-ticket specific variables
+      ticketCount: ticketCount.toString(),
+      totalPrice: formatCurrency(totalPrice, event.currency),
+      attendeeNames,
+      isMultiTicket: ticketCount > 1 ? 'true' : 'false',
+    },
+  });
+}

backend/src/lib/email/bulkEmails.ts

@@ -0,0 +1,101 @@
+// Event-wide bulk email sending via the background queue.
+
+import { db, dbGet, dbAll, events, tickets } from '../../db/index.js';
+import { eq, and } from 'drizzle-orm';
+import { enqueueBulkEmails, type TemplateEmailJobParams } from '../emailQueue.js';
+import { getTemplate } from './templateService.js';
+import { formatDate, formatTime, getSiteTimezone } from './formatting.js';
+
+/**
+ * Queue emails for event attendees (non-blocking).
+ * Adds all matching recipients to the background email queue and returns immediately.
+ * Rate limiting and actual sending is handled by the email queue.
+ */
+export async function queueEventEmails(params: {
+  eventId: string;
+  templateSlug: string;
+  customVariables?: Record<string, any>;
+  recipientFilter?: 'all' | 'confirmed' | 'pending' | 'checked_in';
+  sentBy: string;
+}): Promise<{ success: boolean; queuedCount: number; error?: string }> {
+  const { eventId, templateSlug, customVariables = {}, recipientFilter = 'confirmed', sentBy } = params;
+
+  // Validate event exists
+  const event = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(events)
+      .where(eq((events as any).id, eventId))
+  );
+
+  if (!event) {
+    return { success: false, queuedCount: 0, error: 'Event not found' };
+  }
+
+  // Validate template exists
+  const template = await getTemplate(templateSlug);
+  if (!template) {
+    return { success: false, queuedCount: 0, error: `Template "${templateSlug}" not found` };
+  }
+
+  // Get tickets based on filter
+  let ticketQuery = (db as any)
+    .select()
+    .from(tickets)
+    .where(eq((tickets as any).eventId, eventId));
+
+  if (recipientFilter !== 'all') {
+    ticketQuery = ticketQuery.where(
+      and(
+        eq((tickets as any).eventId, eventId),
+        eq((tickets as any).status, recipientFilter)
+      )
+    );
+  }
+
+  const eventTickets = await dbAll<any>(ticketQuery);
+
+  if (eventTickets.length === 0) {
+    return { success: true, queuedCount: 0, error: 'No recipients found' };
+  }
+
+  // Get site timezone for proper date/time formatting
+  const timezone = await getSiteTimezone();
+
+  // Build individual email jobs for the queue
+  const jobs: TemplateEmailJobParams[] = eventTickets.map((ticket: any) => {
+    const locale = ticket.preferredLanguage || 'en';
+    const eventTitle = locale === 'es' && event.titleEs ? event.titleEs : event.title;
+    const fullName = `${ticket.attendeeFirstName} ${ticket.attendeeLastName || ''}`.trim();
+
+    return {
+      templateSlug,
+      to: ticket.attendeeEmail,
+      toName: fullName,
+      locale,
+      eventId: event.id,
+      sentBy,
+      variables: {
+        attendeeName: fullName,
+        attendeeEmail: ticket.attendeeEmail,
+        ticketId: ticket.id,
+        eventTitle,
+        eventDate: formatDate(event.startDatetime, locale, timezone),
+        eventTime: formatTime(event.startDatetime, locale, timezone),
+        eventLocation: event.location,
+        eventLocationUrl: event.locationUrl || '',
+        ...customVariables,
+      },
+    };
+  });
+
+  // Enqueue all emails for background processing
+  enqueueBulkEmails(jobs);
+
+  console.log(`[Email] Queued ${jobs.length} emails for event "${event.title}" (filter: ${recipientFilter})`);
+
+  return {
+    success: true,
+    queuedCount: jobs.length,
+  };
+}

backend/src/lib/email/formatting.ts

@@ -0,0 +1,69 @@
+// Shared formatting helpers and common template variables for emails.
+
+import { db, dbGet, siteSettings } from '../../db/index.js';
+import { getCache } from '../stores/cache.js';
+
+/**
+ * Get common variables for all emails
+ */
+export function getCommonVariables(): Record<string, string> {
+  return {
+    siteName: 'Spanglish',
+    siteUrl: process.env.FRONTEND_URL || 'https://spanglish.com',
+    currentYear: new Date().getFullYear().toString(),
+    supportEmail: process.env.EMAIL_FROM || 'hello@spanglish.com',
+  };
+}
+
+/**
+ * Get the site timezone from settings (cached for performance).
+ * Cached for a short TTL via the cache abstraction (in-memory or Redis).
+ */
+export async function getSiteTimezone(): Promise<string> {
+  const cached = await getCache().get<string>('site:timezone');
+  if (cached) return cached;
+
+  const settings = await dbGet<any>(
+    (db as any).select().from(siteSettings).limit(1)
+  );
+  const timezone = settings?.timezone || 'America/Asuncion';
+  await getCache().set('site:timezone', timezone, 60);
+  return timezone;
+}
+
+/**
+ * Format date for emails using site timezone
+ */
+export function formatDate(dateStr: string, locale: string = 'en', timezone: string = 'America/Asuncion'): string {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    timeZone: timezone,
+  });
+}
+
+/**
+ * Format time for emails using site timezone
+ */
+export function formatTime(dateStr: string, locale: string = 'en', timezone: string = 'America/Asuncion'): string {
+  const date = new Date(dateStr);
+  return date.toLocaleTimeString(locale === 'es' ? 'es-ES' : 'en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    timeZone: timezone,
+  });
+}
+
+/**
+ * Format currency for emails. Kept distinct from lib/utils.ts formatCurrency
+ * because the email output format ("12.345 PYG" / "$10.00 USD") must not change.
+ */
+export function formatCurrency(amount: number, currency: string = 'PYG'): string {
+  if (currency === 'PYG') {
+    return `${amount.toLocaleString('es-PY')} PYG`;
+  }
+  return `$${amount.toFixed(2)} ${currency}`;
+}

backend/src/lib/email/paymentEmails.ts

@@ -0,0 +1,474 @@
+// High-level payment-related email senders and payment config resolution.
+
+import { db, dbGet, dbAll, events, tickets, payments, paymentOptions, eventPaymentOverrides } from '../../db/index.js';
+import { eq } from 'drizzle-orm';
+import { sendTemplateEmail } from './templateService.js';
+import { formatDate, formatTime, formatCurrency, getSiteTimezone } from './formatting.js';
+
+/**
+ * Send payment receipt email
+ */
+export async function sendPaymentReceipt(paymentId: string): Promise<{ success: boolean; error?: string }> {
+  // Get payment with ticket and event info
+  const payment = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(payments)
+      .where(eq((payments as any).id, paymentId))
+  );
+
+  if (!payment) {
+    return { success: false, error: 'Payment not found' };
+  }
+
+  const ticket = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(tickets)
+      .where(eq((tickets as any).id, payment.ticketId))
+  );
+
+  if (!ticket) {
+    return { success: false, error: 'Ticket not found' };
+  }
+
+  const event = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(events)
+      .where(eq((events as any).id, ticket.eventId))
+  );
+
+  if (!event) {
+    return { success: false, error: 'Event not found' };
+  }
+
+  // Calculate total amount for multi-ticket bookings
+  let totalAmount = payment.amount;
+  let ticketCount = 1;
+
+  if (ticket.bookingId) {
+    // Get all payments for this booking
+    const bookingTickets = await dbAll<any>(
+      (db as any)
+        .select()
+        .from(tickets)
+        .where(eq((tickets as any).bookingId, ticket.bookingId))
+    );
+
+    ticketCount = bookingTickets.length;
+
+    // Sum up all payment amounts for the booking
+    const bookingPayments = await Promise.all(
+      bookingTickets.map((t: any) =>
+        dbGet<any>((db as any).select().from(payments).where(eq((payments as any).ticketId, t.id)))
+      )
+    );
+
+    totalAmount = bookingPayments
+      .filter((p: any) => p)
+      .reduce((sum: number, p: any) => sum + Number(p.amount || 0), 0);
+  }
+
+  const locale = ticket.preferredLanguage || 'en';
+  const eventTitle = locale === 'es' && event.titleEs ? event.titleEs : event.title;
+
+  const paymentMethodNames: Record<string, Record<string, string>> = {
+    en: { bancard: 'Card', lightning: 'Lightning (Bitcoin)', cash: 'Cash', bank_transfer: 'Bank Transfer', tpago: 'TPago' },
+    es: { bancard: 'Tarjeta', lightning: 'Lightning (Bitcoin)', cash: 'Efectivo', bank_transfer: 'Transferencia Bancaria', tpago: 'TPago' },
+  };
+
+  const receiptFullName = `${ticket.attendeeFirstName} ${ticket.attendeeLastName || ''}`.trim();
+
+  // Format amount with ticket count info for multi-ticket bookings
+  const amountDisplay = ticketCount > 1
+    ? `${formatCurrency(totalAmount, payment.currency)} (${ticketCount} tickets)`
+    : formatCurrency(totalAmount, payment.currency);
+
+  // Get site timezone for proper date/time formatting
+  const timezone = await getSiteTimezone();
+
+  return sendTemplateEmail({
+    templateSlug: 'payment-receipt',
+    to: ticket.attendeeEmail,
+    toName: receiptFullName,
+    locale,
+    eventId: event.id,
+    variables: {
+      attendeeName: receiptFullName,
+      ticketId: ticket.bookingId || ticket.id,
+      eventTitle,
+      eventDate: formatDate(event.startDatetime, locale, timezone),
+      paymentAmount: amountDisplay,
+      paymentMethod: paymentMethodNames[locale]?.[payment.provider] || payment.provider,
+      paymentReference: payment.reference || payment.id,
+      paymentDate: formatDate(payment.paidAt || payment.createdAt, locale, timezone),
+    },
+  });
+}
+
+/**
+ * Get merged payment configuration for an event (global + overrides)
+ */
+export async function getPaymentConfig(eventId: string): Promise<Record<string, any>> {
+  // Get global options
+  const globalOptions = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(paymentOptions)
+  );
+
+  // Get event overrides
+  const overrides = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(eventPaymentOverrides)
+      .where(eq((eventPaymentOverrides as any).eventId, eventId))
+  );
+
+  // Defaults
+  const defaults = {
+    tpagoEnabled: false,
+    tpagoLink: null,
+    tpagoLink2: null,
+    tpagoLink3: null,
+    tpagoLink4: null,
+    tpagoLink5: null,
+    tpagoInstructions: null,
+    tpagoInstructionsEs: null,
+    bankTransferEnabled: false,
+    bankName: null,
+    bankAccountHolder: null,
+    bankAccountNumber: null,
+    bankAlias: null,
+    bankPhone: null,
+    bankNotes: null,
+    bankNotesEs: null,
+  };
+
+  const global = globalOptions || defaults;
+
+  // Merge: override values take precedence if they're not null/undefined
+  return {
+    tpagoEnabled: overrides?.tpagoEnabled ?? global.tpagoEnabled,
+    tpagoLink: overrides?.tpagoLink ?? global.tpagoLink,
+    tpagoLink2: overrides?.tpagoLink2 ?? global.tpagoLink2,
+    tpagoLink3: overrides?.tpagoLink3 ?? global.tpagoLink3,
+    tpagoLink4: overrides?.tpagoLink4 ?? global.tpagoLink4,
+    tpagoLink5: overrides?.tpagoLink5 ?? global.tpagoLink5,
+    tpagoInstructions: overrides?.tpagoInstructions ?? global.tpagoInstructions,
+    tpagoInstructionsEs: overrides?.tpagoInstructionsEs ?? global.tpagoInstructionsEs,
+    bankTransferEnabled: overrides?.bankTransferEnabled ?? global.bankTransferEnabled,
+    bankName: overrides?.bankName ?? global.bankName,
+    bankAccountHolder: overrides?.bankAccountHolder ?? global.bankAccountHolder,
+    bankAccountNumber: overrides?.bankAccountNumber ?? global.bankAccountNumber,
+    bankAlias: overrides?.bankAlias ?? global.bankAlias,
+    bankPhone: overrides?.bankPhone ?? global.bankPhone,
+    bankNotes: overrides?.bankNotes ?? global.bankNotes,
+    bankNotesEs: overrides?.bankNotesEs ?? global.bankNotesEs,
+  };
+}
+
+/**
+ * Send payment instructions email (for TPago or Bank Transfer)
+ * This email is sent immediately after user clicks "Continue to Payment"
+ */
+export async function sendPaymentInstructions(ticketId: string): Promise<{ success: boolean; error?: string }> {
+  // Get ticket
+  const ticket = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(tickets)
+      .where(eq((tickets as any).id, ticketId))
+  );
+
+  if (!ticket) {
+    return { success: false, error: 'Ticket not found' };
+  }
+
+  // Get event
+  const event = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(events)
+      .where(eq((events as any).id, ticket.eventId))
+  );
+
+  if (!event) {
+    return { success: false, error: 'Event not found' };
+  }
+
+  // Get payment
+  const payment = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(payments)
+      .where(eq((payments as any).ticketId, ticketId))
+  );
+
+  if (!payment) {
+    return { success: false, error: 'Payment not found' };
+  }
+
+  // Only send for manual payment methods
+  if (!['bank_transfer', 'tpago'].includes(payment.provider)) {
+    return { success: false, error: 'Payment instructions email only for bank_transfer or tpago' };
+  }
+
+  // Get merged payment config for this event
+  const paymentConfig = await getPaymentConfig(event.id);
+
+  const locale = ticket.preferredLanguage || 'en';
+  const eventTitle = locale === 'es' && event.titleEs ? event.titleEs : event.title;
+  const attendeeFullName = `${ticket.attendeeFirstName} ${ticket.attendeeLastName || ''}`.trim();
+
+  // Calculate total price for multi-ticket bookings
+  let totalPrice = event.price;
+  let ticketCount = 1;
+
+  if (ticket.bookingId) {
+    // Count all tickets in this booking
+    const bookingTickets = await dbAll<any>(
+      (db as any)
+        .select()
+        .from(tickets)
+        .where(eq((tickets as any).bookingId, ticket.bookingId))
+    );
+    ticketCount = bookingTickets.length;
+    totalPrice = event.price * ticketCount;
+  }
+
+  // Generate a payment reference using booking ID or ticket ID
+  const paymentReference = `SPG-${(ticket.bookingId || ticket.id).substring(0, 8).toUpperCase()}`;
+
+  // Generate the booking URL for returning to payment page
+  const frontendUrl = process.env.FRONTEND_URL || 'https://spanglish.com';
+  const bookingUrl = `${frontendUrl}/booking/${ticket.id}?step=payment`;
+
+  // Determine which template to use
+  const templateSlug = payment.provider === 'tpago'
+    ? 'payment-instructions-tpago'
+    : 'payment-instructions-bank-transfer';
+
+  // Format amount with ticket count info for multi-ticket bookings
+  const amountDisplay = ticketCount > 1
+    ? `${formatCurrency(totalPrice, event.currency)} (${ticketCount} tickets)`
+    : formatCurrency(totalPrice, event.currency);
+
+  // Get site timezone for proper date/time formatting
+  const timezone = await getSiteTimezone();
+
+  // Build variables based on payment method
+  const variables: Record<string, any> = {
+    attendeeName: attendeeFullName,
+    attendeeEmail: ticket.attendeeEmail,
+    ticketId: ticket.bookingId || ticket.id,
+    eventTitle,
+    eventDate: formatDate(event.startDatetime, locale, timezone),
+    eventTime: formatTime(event.startDatetime, locale, timezone),
+    eventLocation: event.location,
+    eventLocationUrl: event.locationUrl || '',
+    paymentAmount: amountDisplay,
+    paymentReference,
+    bookingUrl,
+  };
+
+  // Add payment-method specific variables
+  if (payment.provider === 'tpago') {
+    // Select the TPago link matching the number of tickets (1-5), falling back to the base link
+    const tpagoLinkKey = ticketCount <= 1 ? 'tpagoLink' : `tpagoLink${Math.min(ticketCount, 5)}`;
+    variables.tpagoLink = paymentConfig[tpagoLinkKey] || paymentConfig.tpagoLink || '';
+  } else {
+    // Bank transfer
+    variables.bankName = paymentConfig.bankName || '';
+    variables.bankAccountHolder = paymentConfig.bankAccountHolder || '';
+    variables.bankAccountNumber = paymentConfig.bankAccountNumber || '';
+    variables.bankAlias = paymentConfig.bankAlias || '';
+    variables.bankPhone = paymentConfig.bankPhone || '';
+  }
+
+  console.log(`[Email] Sending payment instructions email (${payment.provider}) to ${ticket.attendeeEmail}`);
+
+  return sendTemplateEmail({
+    templateSlug,
+    to: ticket.attendeeEmail,
+    toName: attendeeFullName,
+    locale,
+    eventId: event.id,
+    variables,
+  });
+}
+
+/**
+ * Send payment rejection email
+ * This email is sent when admin rejects a TPago or Bank Transfer payment
+ */
+export async function sendPaymentRejectionEmail(paymentId: string): Promise<{ success: boolean; error?: string }> {
+  // Get payment
+  const payment = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(payments)
+      .where(eq((payments as any).id, paymentId))
+  );
+
+  if (!payment) {
+    return { success: false, error: 'Payment not found' };
+  }
+
+  // Get ticket
+  const ticket = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(tickets)
+      .where(eq((tickets as any).id, payment.ticketId))
+  );
+
+  if (!ticket) {
+    return { success: false, error: 'Ticket not found' };
+  }
+
+  // Get event
+  const event = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(events)
+      .where(eq((events as any).id, ticket.eventId))
+  );
+
+  if (!event) {
+    return { success: false, error: 'Event not found' };
+  }
+
+  const locale = ticket.preferredLanguage || 'en';
+  const eventTitle = locale === 'es' && event.titleEs ? event.titleEs : event.title;
+  const attendeeFullName = `${ticket.attendeeFirstName} ${ticket.attendeeLastName || ''}`.trim();
+
+  // Generate a new booking URL for the event
+  const frontendUrl = process.env.FRONTEND_URL || 'https://spanglish.com';
+  const newBookingUrl = `${frontendUrl}/book/${event.id}`;
+
+  // Get site timezone for proper date/time formatting
+  const timezone = await getSiteTimezone();
+
+  console.log(`[Email] Sending payment rejection email to ${ticket.attendeeEmail}`);
+
+  return sendTemplateEmail({
+    templateSlug: 'payment-rejected',
+    to: ticket.attendeeEmail,
+    toName: attendeeFullName,
+    locale,
+    eventId: event.id,
+    variables: {
+      attendeeName: attendeeFullName,
+      attendeeEmail: ticket.attendeeEmail,
+      ticketId: ticket.id,
+      eventTitle,
+      eventDate: formatDate(event.startDatetime, locale, timezone),
+      eventTime: formatTime(event.startDatetime, locale, timezone),
+      eventLocation: event.location,
+      eventLocationUrl: event.locationUrl || '',
+      newBookingUrl,
+    },
+  });
+}
+
+/**
+ * Send payment reminder email
+ * This email is sent when admin wants to remind attendee about pending payment
+ */
+export async function sendPaymentReminder(paymentId: string): Promise<{ success: boolean; error?: string }> {
+  // Get payment
+  const payment = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(payments)
+      .where(eq((payments as any).id, paymentId))
+  );
+
+  if (!payment) {
+    return { success: false, error: 'Payment not found' };
+  }
+
+  // Only send for pending/pending_approval payments
+  if (!['pending', 'pending_approval'].includes(payment.status)) {
+    return { success: false, error: 'Payment reminder can only be sent for pending payments' };
+  }
+
+  // Get ticket
+  const ticket = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(tickets)
+      .where(eq((tickets as any).id, payment.ticketId))
+  );
+
+  if (!ticket) {
+    return { success: false, error: 'Ticket not found' };
+  }
+
+  // Get event
+  const event = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(events)
+      .where(eq((events as any).id, ticket.eventId))
+  );
+
+  if (!event) {
+    return { success: false, error: 'Event not found' };
+  }
+
+  const locale = ticket.preferredLanguage || 'en';
+  const eventTitle = locale === 'es' && event.titleEs ? event.titleEs : event.title;
+  const attendeeFullName = `${ticket.attendeeFirstName} ${ticket.attendeeLastName || ''}`.trim();
+
+  // Calculate total price for multi-ticket bookings
+  let totalPrice = event.price;
+  let ticketCount = 1;
+
+  if (ticket.bookingId) {
+    const bookingTickets = await dbAll<any>(
+      (db as any)
+        .select()
+        .from(tickets)
+        .where(eq((tickets as any).bookingId, ticket.bookingId))
+    );
+    ticketCount = bookingTickets.length;
+    totalPrice = event.price * ticketCount;
+  }
+
+  // Generate the booking URL for returning to payment page
+  const frontendUrl = process.env.FRONTEND_URL || 'https://spanglish.com';
+  const bookingUrl = `${frontendUrl}/booking/${ticket.id}?step=payment`;
+
+  // Format amount with ticket count info for multi-ticket bookings
+  const amountDisplay = ticketCount > 1
+    ? `${formatCurrency(totalPrice, event.currency)} (${ticketCount} tickets)`
+    : formatCurrency(totalPrice, event.currency);
+
+  // Get site timezone for proper date/time formatting
+  const timezone = await getSiteTimezone();
+
+  console.log(`[Email] Sending payment reminder email to ${ticket.attendeeEmail}`);
+
+  return sendTemplateEmail({
+    templateSlug: 'payment-reminder',
+    to: ticket.attendeeEmail,
+    toName: attendeeFullName,
+    locale,
+    eventId: event.id,
+    variables: {
+      attendeeName: attendeeFullName,
+      attendeeEmail: ticket.attendeeEmail,
+      ticketId: ticket.bookingId || ticket.id,
+      eventTitle,
+      eventDate: formatDate(event.startDatetime, locale, timezone),
+      eventTime: formatTime(event.startDatetime, locale, timezone),
+      eventLocation: event.location,
+      eventLocationUrl: event.locationUrl || '',
+      paymentAmount: amountDisplay,
+      bookingUrl,
+    },
+  });
+}

backend/src/lib/email/templateService.ts

@@ -0,0 +1,307 @@
+// Template DB access, seeding, and the core template/custom send + logging logic.
+
+import { db, dbGet, emailTemplates, emailLogs } from '../../db/index.js';
+import { eq } from 'drizzle-orm';
+import { getNow, generateId } from '../utils.js';
+import { replaceTemplateVariables, wrapInBaseTemplate, defaultTemplates } from '../emailTemplates.js';
+import { sendEmail } from './transport.js';
+import { getCommonVariables } from './formatting.js';
+
+/**
+ * Get a template by slug
+ */
+export async function getTemplate(slug: string): Promise<any | null> {
+  const template = await dbGet(
+    (db as any)
+      .select()
+      .from(emailTemplates)
+      .where(eq((emailTemplates as any).slug, slug))
+  );
+
+  return template || null;
+}
+
+/**
+ * Seed default templates if they don't exist, and update system templates with latest content
+ */
+export async function seedDefaultTemplates(): Promise<void> {
+  console.log('[Email] Checking for default templates...');
+
+  for (const template of defaultTemplates) {
+    const existing = await getTemplate(template.slug);
+    const now = getNow();
+
+    if (!existing) {
+      console.log(`[Email] Creating template: ${template.name}`);
+
+      await (db as any).insert(emailTemplates).values({
+        id: generateId(),
+        name: template.name,
+        slug: template.slug,
+        subject: template.subject,
+        subjectEs: template.subjectEs,
+        bodyHtml: template.bodyHtml,
+        bodyHtmlEs: template.bodyHtmlEs,
+        bodyText: template.bodyText,
+        bodyTextEs: template.bodyTextEs,
+        description: template.description,
+        variables: JSON.stringify(template.variables),
+        isSystem: template.isSystem ? 1 : 0,
+        isActive: 1,
+        createdAt: now,
+        updatedAt: now,
+      });
+    } else if (existing.isSystem) {
+      // Update system templates with latest content from defaults
+      console.log(`[Email] Updating system template: ${template.name}`);
+
+      await (db as any)
+        .update(emailTemplates)
+        .set({
+          subject: template.subject,
+          subjectEs: template.subjectEs,
+          bodyHtml: template.bodyHtml,
+          bodyHtmlEs: template.bodyHtmlEs,
+          bodyText: template.bodyText,
+          bodyTextEs: template.bodyTextEs,
+          description: template.description,
+          variables: JSON.stringify(template.variables),
+          updatedAt: now,
+        })
+        .where(eq((emailTemplates as any).slug, template.slug));
+    }
+  }
+
+  console.log('[Email] Default templates check complete');
+}
+
+/**
+ * Send an email using a template
+ */
+export async function sendTemplateEmail(params: {
+  templateSlug: string;
+  to: string;
+  toName?: string;
+  variables: Record<string, any>;
+  locale?: string;
+  eventId?: string;
+  sentBy?: string;
+}): Promise<{ success: boolean; logId?: string; error?: string }> {
+  const { templateSlug, to, toName, variables, locale = 'en', eventId, sentBy } = params;
+
+  // Get template
+  const template = await getTemplate(templateSlug);
+  if (!template) {
+    return { success: false, error: `Template "${templateSlug}" not found` };
+  }
+
+  // Build variables
+  const allVariables = {
+    ...getCommonVariables(),
+    lang: locale,
+    ...variables,
+  };
+
+  // Get localized content
+  const subject = locale === 'es' && template.subjectEs
+    ? template.subjectEs
+    : template.subject;
+  const bodyHtml = locale === 'es' && template.bodyHtmlEs
+    ? template.bodyHtmlEs
+    : template.bodyHtml;
+  const bodyText = locale === 'es' && template.bodyTextEs
+    ? template.bodyTextEs
+    : template.bodyText;
+
+  // Replace variables
+  const finalSubject = replaceTemplateVariables(subject, allVariables);
+  const finalBodyContent = replaceTemplateVariables(bodyHtml, allVariables, true);
+  const finalBodyHtml = wrapInBaseTemplate(finalBodyContent, { ...allVariables, subject: finalSubject });
+  const finalBodyText = bodyText ? replaceTemplateVariables(bodyText, allVariables) : undefined;
+
+  // Create log entry
+  const logId = generateId();
+  const now = getNow();
+
+  await (db as any).insert(emailLogs).values({
+    id: logId,
+    templateId: template.id,
+    eventId: eventId || null,
+    recipientEmail: to,
+    recipientName: toName || null,
+    subject: finalSubject,
+    bodyHtml: finalBodyHtml,
+    status: 'pending',
+    sentBy: sentBy || null,
+    createdAt: now,
+  });
+
+  // Send email
+  const result = await sendEmail({
+    to,
+    subject: finalSubject,
+    html: finalBodyHtml,
+    text: finalBodyText,
+  });
+
+  // Update log with result
+  if (result.success) {
+    await (db as any)
+      .update(emailLogs)
+      .set({
+        status: 'sent',
+        sentAt: getNow(),
+      })
+      .where(eq((emailLogs as any).id, logId));
+  } else {
+    await (db as any)
+      .update(emailLogs)
+      .set({
+        status: 'failed',
+        errorMessage: result.error,
+      })
+      .where(eq((emailLogs as any).id, logId));
+  }
+
+  return {
+    success: result.success,
+    logId,
+    error: result.error
+  };
+}
+
+/**
+ * Send a custom email (not from template)
+ */
+export async function sendCustomEmail(params: {
+  to: string;
+  toName?: string;
+  subject: string;
+  bodyHtml: string;
+  bodyText?: string;
+  replyTo?: string;
+  eventId?: string;
+  sentBy?: string | null;
+}): Promise<{ success: boolean; logId?: string; error?: string }> {
+  const { to: rawTo, toName, subject: rawSubject, bodyHtml, bodyText, replyTo: rawReplyTo, eventId, sentBy = null } = params;
+
+  // Strip CR/LF from header-bound values to prevent email header injection
+  // (e.g. an attacker-supplied subject/replyTo smuggling extra headers/recipients).
+  const stripHeader = (v?: string) => (v ? v.replace(/[\r\n]+/g, ' ').trim() : v);
+  const to = stripHeader(rawTo) as string;
+  const subject = stripHeader(rawSubject) as string;
+  const replyTo = stripHeader(rawReplyTo);
+
+  const allVariables = {
+    ...getCommonVariables(),
+    subject,
+  };
+
+  const finalBodyHtml = wrapInBaseTemplate(bodyHtml, allVariables);
+
+  // Create log entry
+  const logId = generateId();
+  const now = getNow();
+
+  await (db as any).insert(emailLogs).values({
+    id: logId,
+    templateId: null,
+    eventId: eventId || null,
+    recipientEmail: to,
+    recipientName: toName || null,
+    subject,
+    bodyHtml: finalBodyHtml,
+    status: 'pending',
+    sentBy: sentBy || null,
+    createdAt: now,
+  });
+
+  // Send email
+  const result = await sendEmail({
+    to,
+    subject,
+    html: finalBodyHtml,
+    text: bodyText,
+    replyTo,
+  });
+
+  // Update log
+  if (result.success) {
+    await (db as any)
+      .update(emailLogs)
+      .set({
+        status: 'sent',
+        sentAt: getNow(),
+      })
+      .where(eq((emailLogs as any).id, logId));
+  } else {
+    await (db as any)
+      .update(emailLogs)
+      .set({
+        status: 'failed',
+        errorMessage: result.error,
+      })
+      .where(eq((emailLogs as any).id, logId));
+  }
+
+  return {
+    success: result.success,
+    logId,
+    error: result.error
+  };
+}
+
+/**
+ * Resend an email from an existing log entry
+ */
+export async function resendFromLog(logId: string): Promise<{ success: boolean; error?: string }> {
+  const log = await dbGet<any>(
+    (db as any).select().from(emailLogs).where(eq((emailLogs as any).id, logId))
+  );
+
+  if (!log) {
+    return { success: false, error: 'Email log not found' };
+  }
+
+  if (!log.bodyHtml || !log.subject || !log.recipientEmail) {
+    return { success: false, error: 'Email log missing required data to resend' };
+  }
+
+  const result = await sendEmail({
+    to: log.recipientEmail,
+    subject: log.subject,
+    html: log.bodyHtml,
+    text: undefined,
+  });
+
+  const now = getNow();
+  const currentResendAttempts = (log.resendAttempts ?? 0) + 1;
+
+  if (result.success) {
+    await (db as any)
+      .update(emailLogs)
+      .set({
+        status: 'sent',
+        sentAt: now,
+        errorMessage: null,
+        resendAttempts: currentResendAttempts,
+        lastResentAt: now,
+      })
+      .where(eq((emailLogs as any).id, logId));
+  } else {
+    await (db as any)
+      .update(emailLogs)
+      .set({
+        status: 'failed',
+        errorMessage: result.error,
+        resendAttempts: currentResendAttempts,
+        lastResentAt: now,
+      })
+      .where(eq((emailLogs as any).id, logId));
+  }
+
+  return {
+    success: result.success,
+    error: result.error,
+  };
+}

backend/src/lib/email/transport.ts

@@ -0,0 +1,308 @@
+// Email transport layer: provider configuration, SMTP setup, and the low-level
+// sendEmail router. No template rendering or DB logging happens here.
+
+import nodemailer from 'nodemailer';
+import type { Transporter } from 'nodemailer';
+
+// ==================== Types ====================
+
+export interface SendEmailOptions {
+  to: string | string[];
+  subject: string;
+  html: string;
+  text?: string;
+  replyTo?: string;
+}
+
+export interface SendEmailResult {
+  success: boolean;
+  messageId?: string;
+  error?: string;
+}
+
+export type EmailProvider = 'resend' | 'smtp' | 'console';
+
+// ==================== Provider Configuration ====================
+
+function getEmailProvider(): EmailProvider {
+  const provider = (process.env.EMAIL_PROVIDER || 'console').toLowerCase();
+  if (provider === 'resend' || provider === 'smtp' || provider === 'console') {
+    return provider;
+  }
+  console.warn(`[Email] Unknown provider "${provider}", falling back to console`);
+  return 'console';
+}
+
+function getFromEmail(): string {
+  return process.env.EMAIL_FROM || 'noreply@spanglish.com';
+}
+
+function getFromName(): string {
+  return process.env.EMAIL_FROM_NAME || 'Spanglish';
+}
+
+/** Provider info for diagnostics endpoints. */
+export function getProviderInfo(): { provider: EmailProvider; configured: boolean } {
+  const provider = getEmailProvider();
+  let configured = false;
+
+  switch (provider) {
+    case 'resend':
+      configured = !!(process.env.EMAIL_API_KEY || process.env.RESEND_API_KEY);
+      break;
+    case 'smtp':
+      configured = !!process.env.SMTP_HOST;
+      break;
+    case 'console':
+      configured = true;
+      break;
+  }
+
+  return { provider, configured };
+}
+
+// ==================== SMTP Configuration ====================
+
+interface SMTPConfig {
+  host: string;
+  port: number;
+  secure: boolean;
+  auth?: {
+    user: string;
+    pass: string;
+  };
+}
+
+function getSMTPConfig(): SMTPConfig | null {
+  const host = process.env.SMTP_HOST;
+  const port = parseInt(process.env.SMTP_PORT || '587');
+  const user = process.env.SMTP_USER;
+  const pass = process.env.SMTP_PASS;
+  const secure = process.env.SMTP_SECURE === 'true' || port === 465;
+
+  if (!host) {
+    return null;
+  }
+
+  const config: SMTPConfig = {
+    host,
+    port,
+    secure,
+  };
+
+  if (user && pass) {
+    config.auth = { user, pass };
+  }
+
+  return config;
+}
+
+// Cached SMTP transporter
+let smtpTransporter: Transporter | null = null;
+
+function getSMTPTransporter(): Transporter | null {
+  if (smtpTransporter) {
+    return smtpTransporter;
+  }
+
+  const config = getSMTPConfig();
+  if (!config) {
+    console.error('[Email] SMTP configuration missing');
+    return null;
+  }
+
+  smtpTransporter = nodemailer.createTransport({
+    host: config.host,
+    port: config.port,
+    secure: config.secure,
+    auth: config.auth,
+    // Additional options for better deliverability
+    pool: true,
+    maxConnections: 5,
+    maxMessages: 100,
+    // TLS options
+    tls: {
+      rejectUnauthorized: process.env.SMTP_TLS_REJECT_UNAUTHORIZED !== 'false',
+    },
+  });
+
+  // Verify connection configuration
+  smtpTransporter.verify((error, success) => {
+    if (error) {
+      console.error('[Email] SMTP connection verification failed:', error.message);
+    } else {
+      console.log('[Email] SMTP server is ready to send emails');
+    }
+  });
+
+  return smtpTransporter;
+}
+
+// ==================== Email Providers ====================
+
+/**
+ * Send email using Resend API
+ */
+async function sendWithResend(options: SendEmailOptions): Promise<SendEmailResult> {
+  const apiKey = process.env.EMAIL_API_KEY || process.env.RESEND_API_KEY;
+  const fromEmail = getFromEmail();
+  const fromName = getFromName();
+
+  if (!apiKey) {
+    console.error('[Email] Resend API key not configured');
+    return { success: false, error: 'Resend API key not configured' };
+  }
+
+  try {
+    const response = await fetch('https://api.resend.com/emails', {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${apiKey}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        from: `${fromName} <${fromEmail}>`,
+        to: Array.isArray(options.to) ? options.to : [options.to],
+        subject: options.subject,
+        html: options.html,
+        text: options.text,
+        reply_to: options.replyTo,
+      }),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      console.error('[Email] Resend API error:', data);
+      return {
+        success: false,
+        error: data.message || data.error || 'Failed to send email'
+      };
+    }
+
+    console.log('[Email] Email sent via Resend:', data.id);
+    return {
+      success: true,
+      messageId: data.id
+    };
+  } catch (error: any) {
+    console.error('[Email] Resend error:', error);
+    return {
+      success: false,
+      error: error.message || 'Failed to send email via Resend'
+    };
+  }
+}
+
+/**
+ * Send email using SMTP (Nodemailer)
+ */
+async function sendWithSMTP(options: SendEmailOptions): Promise<SendEmailResult> {
+  const transporter = getSMTPTransporter();
+
+  if (!transporter) {
+    return { success: false, error: 'SMTP not configured' };
+  }
+
+  const fromEmail = getFromEmail();
+  const fromName = getFromName();
+
+  try {
+    const info = await transporter.sendMail({
+      from: `"${fromName}" <${fromEmail}>`,
+      to: Array.isArray(options.to) ? options.to.join(', ') : options.to,
+      replyTo: options.replyTo,
+      subject: options.subject,
+      html: options.html,
+      text: options.text,
+    });
+
+    console.log('[Email] Email sent via SMTP:', info.messageId);
+    return {
+      success: true,
+      messageId: info.messageId
+    };
+  } catch (error: any) {
+    console.error('[Email] SMTP error:', error);
+    return {
+      success: false,
+      error: error.message || 'Failed to send email via SMTP'
+    };
+  }
+}
+
+/**
+ * Console logger for development/testing (no actual email sent)
+ */
+async function sendWithConsole(options: SendEmailOptions): Promise<SendEmailResult> {
+  const to = Array.isArray(options.to) ? options.to.join(', ') : options.to;
+
+  console.log('\n========================================');
+  console.log('[Email] Console Mode - Email Preview');
+  console.log('========================================');
+  console.log(`To: ${to}`);
+  console.log(`Subject: ${options.subject}`);
+  console.log(`Reply-To: ${options.replyTo || 'N/A'}`);
+  console.log('----------------------------------------');
+  console.log('HTML Body (truncated):');
+  console.log(options.html?.substring(0, 500) + '...');
+  console.log('========================================\n');
+
+  return {
+    success: true,
+    messageId: `console-${Date.now()}`
+  };
+}
+
+// Mask an email address for logs: keep first char + domain (e.g. j***@example.com).
+function maskEmail(email: string): string {
+  const [local, domain] = String(email).split('@');
+  if (!domain) return '***';
+  const head = local.slice(0, 1);
+  return `${head}***@${domain}`;
+}
+
+/**
+ * Main send function that routes to the appropriate provider
+ */
+export async function sendEmail(options: SendEmailOptions): Promise<SendEmailResult> {
+  const provider = getEmailProvider();
+
+  const recipientCount = Array.isArray(options.to) ? options.to.length : 1;
+  const sample = Array.isArray(options.to) ? options.to[0] : options.to;
+  console.log(`[Email] Sending email via ${provider} to ${maskEmail(sample)}${recipientCount > 1 ? ` (+${recipientCount - 1} more)` : ''}`);
+
+  switch (provider) {
+    case 'resend':
+      return sendWithResend(options);
+    case 'smtp':
+      return sendWithSMTP(options);
+    case 'console':
+    default:
+      return sendWithConsole(options);
+  }
+}
+
+/**
+ * Test email configuration by sending a test email
+ */
+export async function testConnection(to: string): Promise<SendEmailResult> {
+  const { provider, configured } = getProviderInfo();
+
+  if (!configured) {
+    return { success: false, error: `Email provider "${provider}" is not configured` };
+  }
+
+  return sendEmail({
+    to,
+    subject: 'Spanglish - Email Test',
+    html: `
+        <h2>Email Configuration Test</h2>
+        <p>This is a test email from your Spanglish platform.</p>
+        <p><strong>Provider:</strong> ${provider}</p>
+        <p><strong>Timestamp:</strong> ${new Date().toISOString()}</p>
+        <p>If you received this email, your email configuration is working correctly!</p>
+      `,
+    text: `Email Configuration Test\n\nProvider: ${provider}\nTimestamp: ${new Date().toISOString()}\n\nIf you received this email, your email configuration is working correctly!`,
+  });
+}

backend/src/lib/emailQueue.ts

@@ -1,17 +1,16 @@
-// In-memory email queue with rate limiting
+// Durable email queue with rate limiting.
-// Processes emails asynchronously in the background without blocking the request thread
+// Jobs are persisted in the `email_queue` DB table so they survive process
+// restarts. Emails are processed asynchronously in the background without
+// blocking the request thread.
 
-import { generateId } from './utils.js';
+import { eq, and, asc, sql } from 'drizzle-orm';
+import { db, dbGet, emailQueue } from '../db/index.js';
+import { generateId, getNow } from './utils.js';
+import { isRedisEnabled } from './redis.js';
+import { getRateLimiter } from './stores/rateLimiter.js';
 
 // ==================== Types ====================
 
-export interface EmailJob {
-  id: string;
-  type: 'template';
-  params: TemplateEmailJobParams;
-  addedAt: number;
-}
-
 export interface TemplateEmailJobParams {
   templateSlug: string;
   to: string;
@@ -22,6 +21,11 @@ export interface TemplateEmailJobParams {
   sentBy?: string;
 }
 
+interface ClaimedJob {
+  id: string;
+  params: TemplateEmailJobParams;
+}
+
 export interface QueueStatus {
   queued: number;
   processing: boolean;
@@ -31,7 +35,8 @@ export interface QueueStatus {
 
 // ==================== Queue State ====================
 
-const queue: EmailJob[] = [];
+// Tracks send timestamps for the per-process (non-Redis) sliding-window rate
+// limit. The job backlog itself lives in the database, not in memory.
 const sentTimestamps: number[] = [];
 let processing = false;
 let processTimer: ReturnType<typeof setTimeout> | null = null;
@@ -41,7 +46,6 @@ let _emailService: any = null;
 
 function getEmailService() {
   if (!_emailService) {
-    // Dynamic import to avoid circular dependency
     throw new Error('[EmailQueue] Email service not initialized. Call initEmailQueue() first.');
   }
   return _emailService;
@@ -50,12 +54,31 @@ function getEmailService() {
 /**
  * Initialize the email queue with a reference to the email service.
  * Must be called once at startup.
+ *
+ * Also performs crash recovery: any jobs left in the 'processing' state by a
+ * previous (crashed) process are reset to 'pending' so they get retried.
  */
 export function initEmailQueue(emailService: any): void {
   _emailService = emailService;
+  recoverProcessingJobs()
+    .then((recovered) => {
+      if (recovered > 0) {
+        console.log(`[EmailQueue] Recovered ${recovered} in-flight job(s) after restart`);
+      }
+      scheduleProcessing();
+    })
+    .catch((err) => console.error('[EmailQueue] Recovery failed:', err?.message || err));
   console.log('[EmailQueue] Initialized');
 }
 
+async function recoverProcessingJobs(): Promise<number> {
+  const result: any = await (db as any)
+    .update(emailQueue)
+    .set({ status: 'pending' })
+    .where(eq((emailQueue as any).status, 'processing'));
+  return result?.changes ?? result?.rowCount ?? 0;
+}
+
 // ==================== Rate Limiting ====================
 
 function getMaxPerHour(): number {
@@ -74,19 +97,26 @@ function cleanOldTimestamps(): void {
 
 // ==================== Queue Operations ====================
 
+async function insertJob(id: string, params: TemplateEmailJobParams): Promise<void> {
+  await (db as any).insert(emailQueue).values({
+    id,
+    params: JSON.stringify(params),
+    status: 'pending',
+    attempts: 0,
+    createdAt: getNow(),
+  });
+}
+
 /**
  * Add a single email job to the queue.
- * Returns the job ID.
+ * Returns the job ID. Persistence happens asynchronously so the caller is not
+ * blocked; processing is scheduled once the row is written.
  */
 export function enqueueEmail(params: TemplateEmailJobParams): string {
   const id = generateId();
-  queue.push({
+  insertJob(id, params)
-    id,
+    .then(() => scheduleProcessing())
-    type: 'template',
+    .catch((err) => console.error('[EmailQueue] Failed to enqueue email:', err?.message || err));
-    params,
-    addedAt: Date.now(),
-  });
-  scheduleProcessing();
   return id;
 }
 
@@ -95,31 +125,32 @@ export function enqueueEmail(params: TemplateEmailJobParams): string {
  * Returns array of job IDs.
  */
 export function enqueueBulkEmails(paramsList: TemplateEmailJobParams[]): string[] {
-  const ids: string[] = [];
+  const ids = paramsList.map(() => generateId());
-  for (const params of paramsList) {
+  if (ids.length === 0) return ids;
-    const id = generateId();
+
-    queue.push({
+  Promise.all(paramsList.map((params, i) => insertJob(ids[i], params)))
-      id,
+    .then(() => {
-      type: 'template',
+      console.log(`[EmailQueue] Queued ${ids.length} emails for background processing`);
-      params,
+      scheduleProcessing();
-      addedAt: Date.now(),
+    })
-    });
+    .catch((err) => console.error('[EmailQueue] Failed to enqueue bulk emails:', err?.message || err));
-    ids.push(id);
+
-  }
-  if (ids.length > 0) {
-    console.log(`[EmailQueue] Queued ${ids.length} emails for background processing`);
-    scheduleProcessing();
-  }
   return ids;
 }
 
 /**
  * Get current queue status
  */
-export function getQueueStatus(): QueueStatus {
+export async function getQueueStatus(): Promise<QueueStatus> {
   cleanOldTimestamps();
+  const row = await dbGet<any>(
+    (db as any)
+      .select({ count: sql<number>`count(*)` })
+      .from(emailQueue)
+      .where(eq((emailQueue as any).status, 'pending'))
+  );
   return {
-    queued: queue.length,
+    queued: Number(row?.count || 0),
     processing,
     sentInLastHour: sentTimestamps.length,
     maxPerHour: getMaxPerHour(),
@@ -135,46 +166,125 @@ function scheduleProcessing(): void {
   setImmediate(() => processNext());
 }
 
+/**
+ * Atomically claim the oldest pending job by flipping its status to
+ * 'processing'. Returns null if there is nothing to do. The conditional update
+ * (WHERE status='pending') guards against two workers claiming the same row.
+ */
+async function claimNextJob(): Promise<ClaimedJob | null> {
+  for (let attempt = 0; attempt < 5; attempt++) {
+    const row = await dbGet<any>(
+      (db as any)
+        .select({ id: (emailQueue as any).id, params: (emailQueue as any).params })
+        .from(emailQueue)
+        .where(eq((emailQueue as any).status, 'pending'))
+        .orderBy(asc((emailQueue as any).createdAt))
+        .limit(1)
+    );
+    if (!row) return null;
+
+    const result: any = await (db as any)
+      .update(emailQueue)
+      .set({ status: 'processing' })
+      .where(and(
+        eq((emailQueue as any).id, row.id),
+        eq((emailQueue as any).status, 'pending')
+      ));
+
+    const affected = result?.changes ?? result?.rowCount ?? 0;
+    if (affected > 0) {
+      try {
+        return { id: row.id, params: JSON.parse(row.params) };
+      } catch {
+        // Corrupt params: mark failed and move on rather than crash-looping.
+        await markJob(row.id, 'failed', 'Invalid job params (JSON parse failed)');
+        continue;
+      }
+    }
+    // Lost the race for this row; try the next pending one.
+  }
+  return null;
+}
+
+async function markJob(id: string, status: 'sent' | 'failed', error?: string | null): Promise<void> {
+  const update: any = { status, processedAt: getNow() };
+  if (status === 'failed') {
+    update.attempts = sql`${(emailQueue as any).attempts} + 1`;
+    if (error) update.lastError = error.slice(0, 1000);
+  }
+  await (db as any).update(emailQueue).set(update).where(eq((emailQueue as any).id, id));
+}
+
+async function releaseJob(id: string): Promise<void> {
+  await (db as any)
+    .update(emailQueue)
+    .set({ status: 'pending' })
+    .where(eq((emailQueue as any).id, id));
+}
+
 async function processNext(): Promise<void> {
-  if (queue.length === 0) {
+  let job: ClaimedJob | null;
+  try {
+    job = await claimNextJob();
+  } catch (error: any) {
+    // Database error while claiming: back off and retry rather than stop.
+    console.error('[EmailQueue] Failed to claim next job:', error?.message || error);
+    processTimer = setTimeout(() => processNext(), 5_000);
+    return;
+  }
+
+  if (!job) {
     processing = false;
     console.log('[EmailQueue] Queue empty. Processing stopped.');
     return;
   }
 
-  // Rate limit check
+  // Rate limit check.
+  // - Without Redis: per-process sliding window.
+  // - With Redis: a shared hourly counter so the cap applies across all
+  //   instances rather than once per replica.
   cleanOldTimestamps();
   const maxPerHour = getMaxPerHour();
+  let waitMs = 0;
 
-  if (sentTimestamps.length >= maxPerHour) {
+  if (isRedisEnabled()) {
+    const result = await getRateLimiter().consume('email:hourly', maxPerHour, 3_600_000);
+    if (!result.allowed) {
+      waitMs = (result.retryAfter ?? 60) * 1000 + 500; // 500ms buffer
+    }
+  } else if (sentTimestamps.length >= maxPerHour) {
     // Calculate when the oldest timestamp in the window expires
-    const waitMs = sentTimestamps[0] + 3_600_000 - Date.now() + 500; // 500ms buffer
+    waitMs = sentTimestamps[0] + 3_600_000 - Date.now() + 500; // 500ms buffer
+  }
+
+  if (waitMs > 0) {
+    // Put the claimed job back so it is retried after the cooldown.
+    await releaseJob(job.id);
     console.log(
       `[EmailQueue] Rate limit reached (${maxPerHour}/hr). ` +
-      `Pausing for ${Math.ceil(waitMs / 1000)}s. ${queue.length} email(s) remaining.`
+      `Pausing for ${Math.ceil(waitMs / 1000)}s.`
     );
     processTimer = setTimeout(() => processNext(), waitMs);
     return;
   }
 
-  // Dequeue and process
-  const job = queue.shift()!;
-
   try {
     const emailService = getEmailService();
     await emailService.sendTemplateEmail(job.params);
     sentTimestamps.push(Date.now());
+    await markJob(job.id, 'sent');
     console.log(
       `[EmailQueue] Sent email ${job.id} to ${job.params.to}. ` +
-      `Queue: ${queue.length} remaining. Sent this hour: ${sentTimestamps.length}/${maxPerHour}`
+      `Sent this hour: ${sentTimestamps.length}/${maxPerHour}`
     );
   } catch (error: any) {
+    await markJob(job.id, 'failed', error?.message || String(error));
     console.error(
       `[EmailQueue] Failed to send email ${job.id} to ${job.params.to}:`,
       error?.message || error
     );
-    // The sendTemplateEmail method already logs the failure in the email_logs table,
+    // The sendTemplateEmail method already logs the failure in the email_logs
-    // so we don't need to retry here. The error is logged and we move on.
+    // table, so we just record it on the queue row and move on.
   }
 
   // Small delay between sends to be gentle on the email server
@@ -182,7 +292,8 @@ async function processNext(): Promise<void> {
 }
 
 /**
- * Stop processing (for graceful shutdown)
+ * Stop processing (for graceful shutdown). In-flight and pending jobs remain
+ * persisted in the database and resume on the next startup.
  */
 export function stopQueue(): void {
   if (processTimer) {
@@ -190,5 +301,5 @@ export function stopQueue(): void {
     processTimer = null;
   }
   processing = false;
-  console.log(`[EmailQueue] Stopped. ${queue.length} email(s) remaining in queue.`);
+  console.log('[EmailQueue] Stopped. Pending jobs remain persisted in the database.');
 }

backend/src/lib/rateLimit.ts

@@ -1,30 +1,15 @@
 import { Context } from 'hono';
+import { getRateLimiter } from './stores/rateLimiter.js';
 
 /**
- * Simple in-memory rate limiter.
+ * Rate limiting helpers.
  *
- * Suitable for a single backend instance (the current deployment model). If the
+ * The actual counting is delegated to a pluggable rate limiter (in-memory by
- * backend is ever scaled horizontally, replace the in-memory Map with a shared
+ * default, Redis-backed when REDIS_URL is set) so limits are enforced either
- * store (e.g. Redis) so limits are enforced across instances.
+ * per instance (single-instance deployments) or across all instances
+ * (horizontal scaling). See lib/stores/rateLimiter.ts.
  */
 
-interface Bucket {
-  count: number;
-  resetAt: number;
-}
-
-const buckets = new Map<string, Bucket>();
-
-// Periodically drop expired buckets so the Map does not grow unbounded.
-const cleanup = setInterval(() => {
-  const now = Date.now();
-  for (const [key, bucket] of buckets) {
-    if (now > bucket.resetAt) buckets.delete(key);
-  }
-}, 60_000);
-// Don't keep the process alive just for cleanup.
-(cleanup as any).unref?.();
-
 /** Best-effort client IP extraction (honours common reverse-proxy headers). */
 export function getClientIp(c: Context): string {
   const forwarded = c.req.header('x-forwarded-for');
@@ -40,20 +25,8 @@ export function consumeRateLimit(
   key: string,
   max: number,
   windowMs: number
-): { allowed: boolean; retryAfter?: number } {
+): Promise<{ allowed: boolean; retryAfter?: number }> {
-  const now = Date.now();
+  return getRateLimiter().consume(key, max, windowMs);
-  const bucket = buckets.get(key);
-
-  if (!bucket || now > bucket.resetAt) {
-    buckets.set(key, { count: 1, resetAt: now + windowMs });
-    return { allowed: true };
-  }
-
-  bucket.count++;
-  if (bucket.count > max) {
-    return { allowed: false, retryAfter: Math.ceil((bucket.resetAt - now) / 1000) };
-  }
-  return { allowed: true };
 }
 
 /**
@@ -63,7 +36,7 @@ export function consumeRateLimit(
 export function rateLimitMiddleware(opts: { max: number; windowMs: number; prefix: string }) {
   return async (c: Context, next: () => Promise<void>) => {
     const ip = getClientIp(c);
-    const result = consumeRateLimit(`${opts.prefix}:${ip}`, opts.max, opts.windowMs);
+    const result = await consumeRateLimit(`${opts.prefix}:${ip}`, opts.max, opts.windowMs);
     if (!result.allowed) {
       return c.json(
         { error: 'Too many requests. Please try again later.', retryAfter: result.retryAfter },

backend/src/lib/redis.ts

@@ -0,0 +1,93 @@
+// Optional Redis connection manager.
+//
+// Redis is entirely optional. When REDIS_URL is unset the app runs exactly as
+// before with in-memory backends. When set, this module owns a single shared
+// command connection plus a dedicated subscriber connection (a connection in
+// subscribe mode cannot run normal commands), with auto-reconnect, capped
+// backoff, and a health flag that callers and the health endpoint can read.
+
+import Redis from 'ioredis';
+
+let client: Redis | null = null;
+let subscriber: Redis | null = null;
+let healthy = false;
+let initialized = false;
+
+/** Whether Redis is configured via REDIS_URL. */
+export function isRedisEnabled(): boolean {
+  return !!process.env.REDIS_URL;
+}
+
+/** Whether the Redis connection is currently usable. */
+export function isRedisHealthy(): boolean {
+  return isRedisEnabled() && healthy;
+}
+
+function buildClient(label: string): Redis {
+  const url = process.env.REDIS_URL as string;
+  const instance = new Redis(url, {
+    // Keep the process responsive: fail fast on a per-command basis and let the
+    // callers degrade to their in-memory fallback rather than hanging.
+    maxRetriesPerRequest: 1,
+    enableOfflineQueue: false,
+    lazyConnect: false,
+    retryStrategy(times) {
+      // Capped exponential backoff for reconnects: 200ms, 400ms ... max 5s.
+      const delay = Math.min(times * 200, 5000);
+      return delay;
+    },
+  });
+
+  instance.on('connect', () => {
+    console.log(`[redis] (${label}) connecting`);
+  });
+  instance.on('ready', () => {
+    healthy = true;
+    console.log(`[redis] (${label}) ready`);
+  });
+  instance.on('error', (err) => {
+    healthy = false;
+    console.error(`[redis] (${label}) error:`, err?.message || err);
+  });
+  instance.on('reconnecting', () => {
+    healthy = false;
+    console.warn(`[redis] (${label}) reconnecting`);
+  });
+  instance.on('end', () => {
+    healthy = false;
+    console.warn(`[redis] (${label}) connection closed`);
+  });
+
+  return instance;
+}
+
+function ensureInit(): void {
+  if (initialized || !isRedisEnabled()) return;
+  initialized = true;
+  client = buildClient('commands');
+  subscriber = buildClient('subscriber');
+}
+
+/** Shared command connection, or null when Redis is not configured. */
+export function getRedis(): Redis | null {
+  ensureInit();
+  return client;
+}
+
+/** Dedicated subscriber connection, or null when Redis is not configured. */
+export function getSubscriber(): Redis | null {
+  ensureInit();
+  return subscriber;
+}
+
+/** Close connections (used for graceful shutdown). */
+export async function closeRedis(): Promise<void> {
+  const tasks: Promise<unknown>[] = [];
+  if (client) tasks.push(client.quit().catch(() => undefined));
+  if (subscriber) tasks.push(subscriber.quit().catch(() => undefined));
+  await Promise.all(tasks);
+  client = null;
+  subscriber = null;
+  initialized = false;
+  healthy = false;
+}

backend/src/lib/storage.ts

@@ -0,0 +1,136 @@
+// Media storage abstraction with two implementations:
+// - local: writes to the ./uploads directory and serves via /uploads/* (the
+//   original behavior, and the zero-config default)
+// - s3: stores objects in an S3-compatible bucket (e.g. Garage), so uploads are
+//   shared across instances instead of living on one container's local disk
+//
+// S3 is enabled only when S3_ENDPOINT and S3_BUCKET are set. With it unset the
+// app behaves exactly as before. A "key" is the object name (e.g. "abc123.jpg").
+
+import { writeFile, mkdir, unlink } from 'fs/promises';
+import { existsSync } from 'fs';
+import { join } from 'path';
+
+const UPLOAD_DIR = './uploads';
+
+export interface Storage {
+  readonly backend: 'local' | 's3';
+  put(key: string, buffer: Buffer, contentType: string): Promise<void>;
+  delete(key: string): Promise<void>;
+  // Public URL to persist as the media record's fileUrl.
+  publicUrl(key: string): string;
+}
+
+/** Whether S3-compatible storage is configured. */
+export function isS3Enabled(): boolean {
+  return !!(process.env.S3_ENDPOINT && process.env.S3_BUCKET);
+}
+
+/** Extract the storage key (object name) from a stored fileUrl. */
+export function keyFromUrl(fileUrl: string): string {
+  return fileUrl.split('/').pop() || fileUrl;
+}
+
+// ==================== Local implementation ====================
+
+class LocalStorage implements Storage {
+  readonly backend = 'local' as const;
+
+  private async ensureDir(): Promise<void> {
+    if (!existsSync(UPLOAD_DIR)) {
+      await mkdir(UPLOAD_DIR, { recursive: true });
+    }
+  }
+
+  async put(key: string, buffer: Buffer): Promise<void> {
+    await this.ensureDir();
+    await writeFile(join(UPLOAD_DIR, key), buffer);
+  }
+
+  async delete(key: string): Promise<void> {
+    const filepath = join(UPLOAD_DIR, key);
+    if (existsSync(filepath)) {
+      await unlink(filepath);
+    }
+  }
+
+  publicUrl(key: string): string {
+    return `/uploads/${key}`;
+  }
+}
+
+// ==================== S3 implementation ====================
+
+// Imported lazily so the AWS SDK is only loaded when S3 is actually configured.
+type S3ClientType = import('@aws-sdk/client-s3').S3Client;
+
+class S3Storage implements Storage {
+  readonly backend = 's3' as const;
+  private client: S3ClientType | null = null;
+  private bucket = process.env.S3_BUCKET as string;
+
+  private async getClient(): Promise<S3ClientType> {
+    if (this.client) return this.client;
+    const { S3Client } = await import('@aws-sdk/client-s3');
+    const forcePathStyle = (process.env.S3_FORCE_PATH_STYLE || 'true') !== 'false';
+    this.client = new S3Client({
+      endpoint: process.env.S3_ENDPOINT,
+      region: process.env.S3_REGION || 'us-east-1',
+      forcePathStyle,
+      credentials:
+        process.env.S3_ACCESS_KEY_ID && process.env.S3_SECRET_ACCESS_KEY
+          ? {
+              accessKeyId: process.env.S3_ACCESS_KEY_ID,
+              secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
+            }
+          : undefined,
+    });
+    return this.client;
+  }
+
+  async put(key: string, buffer: Buffer, contentType: string): Promise<void> {
+    const client = await this.getClient();
+    const { PutObjectCommand } = await import('@aws-sdk/client-s3');
+    await client.send(
+      new PutObjectCommand({
+        Bucket: this.bucket,
+        Key: key,
+        Body: buffer,
+        ContentType: contentType,
+      })
+    );
+  }
+
+  async delete(key: string): Promise<void> {
+    const client = await this.getClient();
+    const { DeleteObjectCommand } = await import('@aws-sdk/client-s3');
+    await client.send(
+      new DeleteObjectCommand({
+        Bucket: this.bucket,
+        Key: key,
+      })
+    );
+  }
+
+  publicUrl(key: string): string {
+    // Prefer an explicit public base URL (e.g. a CDN or Garage web endpoint).
+    const base = process.env.S3_PUBLIC_URL;
+    if (base) {
+      return `${base.replace(/\/$/, '')}/${key}`;
+    }
+    // Fall back to a path-style URL against the configured endpoint.
+    const endpoint = (process.env.S3_ENDPOINT || '').replace(/\/$/, '');
+    return `${endpoint}/${this.bucket}/${key}`;
+  }
+}
+
+// ==================== Selection ====================
+
+let instance: Storage | null = null;
+
+export function getStorage(): Storage {
+  if (!instance) {
+    instance = isS3Enabled() ? new S3Storage() : new LocalStorage();
+  }
+  return instance;
+}

backend/src/lib/stores/cache.ts

@@ -0,0 +1,105 @@
+// Cache abstraction with two implementations:
+// - memory: per-process Map with TTL expiry (single instance)
+// - redis: shared GET / SETEX / DEL with JSON values (all instances)
+//
+// Values are JSON-serialized. Selection happens once based on REDIS_URL. On any
+// Redis error the cache behaves as a miss so callers fall back to their source.
+
+import { getRedis, isRedisEnabled } from '../redis.js';
+
+export interface Cache {
+  readonly backend: 'memory' | 'redis';
+  get<T>(key: string): Promise<T | null>;
+  set<T>(key: string, value: T, ttlSeconds: number): Promise<void>;
+  del(key: string): Promise<void>;
+}
+
+// ==================== Memory implementation ====================
+
+interface Entry {
+  value: unknown;
+  expiresAt: number;
+}
+
+class MemoryCache implements Cache {
+  readonly backend = 'memory' as const;
+  private store = new Map<string, Entry>();
+
+  constructor() {
+    const cleanup = setInterval(() => {
+      const now = Date.now();
+      for (const [key, entry] of this.store) {
+        if (now > entry.expiresAt) this.store.delete(key);
+      }
+    }, 60_000);
+    (cleanup as any).unref?.();
+  }
+
+  async get<T>(key: string): Promise<T | null> {
+    const entry = this.store.get(key);
+    if (!entry) return null;
+    if (Date.now() > entry.expiresAt) {
+      this.store.delete(key);
+      return null;
+    }
+    return entry.value as T;
+  }
+
+  async set<T>(key: string, value: T, ttlSeconds: number): Promise<void> {
+    this.store.set(key, { value, expiresAt: Date.now() + ttlSeconds * 1000 });
+  }
+
+  async del(key: string): Promise<void> {
+    this.store.delete(key);
+  }
+}
+
+// ==================== Redis implementation ====================
+
+class RedisCache implements Cache {
+  readonly backend = 'redis' as const;
+
+  async get<T>(key: string): Promise<T | null> {
+    const redis = getRedis();
+    if (!redis) return null;
+    try {
+      const raw = await redis.get(`cache:${key}`);
+      if (raw === null) return null;
+      return JSON.parse(raw) as T;
+    } catch (err: any) {
+      console.error('[cache] redis get error:', err?.message || err);
+      return null;
+    }
+  }
+
+  async set<T>(key: string, value: T, ttlSeconds: number): Promise<void> {
+    const redis = getRedis();
+    if (!redis) return;
+    try {
+      await redis.set(`cache:${key}`, JSON.stringify(value), 'EX', ttlSeconds);
+    } catch (err: any) {
+      console.error('[cache] redis set error:', err?.message || err);
+    }
+  }
+
+  async del(key: string): Promise<void> {
+    const redis = getRedis();
+    if (!redis) return;
+    try {
+      await redis.del(`cache:${key}`);
+    } catch (err: any) {
+      console.error('[cache] redis del error:', err?.message || err);
+    }
+  }
+}
+
+// ==================== Selection ====================
+
+let instance: Cache | null = null;
+
+export function getCache(): Cache {
+  if (!instance) {
+    instance = isRedisEnabled() ? new RedisCache() : new MemoryCache();
+  }
+  return instance;
+}

backend/src/lib/stores/lock.ts

@@ -0,0 +1,111 @@
+// Distributed lock abstraction with two implementations:
+// - memory: per-process key set with TTL (only meaningful within one instance)
+// - redis: SET key token NX PX ttl, released with a compare-and-delete Lua
+//   script so only the holder can release it
+//
+// Use acquire/release for long-lived ownership (e.g. a background poller) and
+// withLock for a one-shot critical section. Selection is based on REDIS_URL.
+
+import { randomUUID } from 'crypto';
+import { getRedis, isRedisEnabled } from '../redis.js';
+
+export interface Lock {
+  readonly backend: 'memory' | 'redis';
+  // Returns a token when the lock was acquired, or null when already held.
+  acquire(key: string, ttlMs: number): Promise<string | null>;
+  release(key: string, token: string): Promise<void>;
+  // Runs fn while holding the lock; returns fn's result, or null if not acquired.
+  withLock<T>(key: string, ttlMs: number, fn: () => Promise<T>): Promise<T | null>;
+}
+
+// ==================== Memory implementation ====================
+
+class MemoryLock implements Lock {
+  readonly backend = 'memory' as const;
+  private held = new Map<string, { token: string; expiresAt: number }>();
+
+  async acquire(key: string, ttlMs: number): Promise<string | null> {
+    const existing = this.held.get(key);
+    const now = Date.now();
+    if (existing && existing.expiresAt > now) {
+      return null;
+    }
+    const token = randomUUID();
+    this.held.set(key, { token, expiresAt: now + ttlMs });
+    return token;
+  }
+
+  async release(key: string, token: string): Promise<void> {
+    const existing = this.held.get(key);
+    if (existing && existing.token === token) {
+      this.held.delete(key);
+    }
+  }
+
+  async withLock<T>(key: string, ttlMs: number, fn: () => Promise<T>): Promise<T | null> {
+    const token = await this.acquire(key, ttlMs);
+    if (!token) return null;
+    try {
+      return await fn();
+    } finally {
+      await this.release(key, token);
+    }
+  }
+}
+
+// ==================== Redis implementation ====================
+
+const RELEASE_SCRIPT =
+  'if redis.call("get", KEYS[1]) == ARGV[1] then return redis.call("del", KEYS[1]) else return 0 end';
+
+class RedisLock implements Lock {
+  readonly backend = 'redis' as const;
+
+  async acquire(key: string, ttlMs: number): Promise<string | null> {
+    const redis = getRedis();
+    if (!redis) {
+      // Redis configured but unavailable: do not block critical sections.
+      return randomUUID();
+    }
+    const token = randomUUID();
+    try {
+      const result = await redis.set(`lock:${key}`, token, 'PX', ttlMs, 'NX');
+      return result === 'OK' ? token : null;
+    } catch (err: any) {
+      console.error('[lock] redis acquire error, proceeding without lock:', err?.message || err);
+      // Fail open so a Redis outage does not deadlock startup or jobs.
+      return randomUUID();
+    }
+  }
+
+  async release(key: string, token: string): Promise<void> {
+    const redis = getRedis();
+    if (!redis) return;
+    try {
+      await redis.eval(RELEASE_SCRIPT, 1, `lock:${key}`, token);
+    } catch (err: any) {
+      console.error('[lock] redis release error:', err?.message || err);
+    }
+  }
+
+  async withLock<T>(key: string, ttlMs: number, fn: () => Promise<T>): Promise<T | null> {
+    const token = await this.acquire(key, ttlMs);
+    if (!token) return null;
+    try {
+      return await fn();
+    } finally {
+      await this.release(key, token);
+    }
+  }
+}
+
+// ==================== Selection ====================
+
+let instance: Lock | null = null;
+
+export function getLock(): Lock {
+  if (!instance) {
+    instance = isRedisEnabled() ? new RedisLock() : new MemoryLock();
+  }
+  return instance;
+}

backend/src/lib/stores/pubsub.ts

@@ -0,0 +1,121 @@
+// Pub/Sub abstraction with two implementations:
+// - memory: in-process EventEmitter (single instance only)
+// - redis: PUBLISH / SUBSCRIBE so a message published on one instance reaches
+//   subscribers on every instance
+//
+// Messages are JSON-serialized. Selection happens once based on REDIS_URL.
+
+import { EventEmitter } from 'events';
+import { getRedis, getSubscriber, isRedisEnabled } from '../redis.js';
+
+export type PubSubHandler = (message: any) => void;
+
+export interface PubSub {
+  readonly backend: 'memory' | 'redis';
+  publish(channel: string, message: any): Promise<void>;
+  // Returns an unsubscribe function for this specific handler.
+  subscribe(channel: string, handler: PubSubHandler): Promise<() => void>;
+}
+
+// ==================== Memory implementation ====================
+
+class MemoryPubSub implements PubSub {
+  readonly backend = 'memory' as const;
+  private emitter = new EventEmitter();
+
+  constructor() {
+    // SSE fan-out can attach many listeners to the same channel; lift the cap.
+    this.emitter.setMaxListeners(0);
+  }
+
+  async publish(channel: string, message: any): Promise<void> {
+    this.emitter.emit(channel, message);
+  }
+
+  async subscribe(channel: string, handler: PubSubHandler): Promise<() => void> {
+    this.emitter.on(channel, handler);
+    return () => this.emitter.off(channel, handler);
+  }
+}
+
+// ==================== Redis implementation ====================
+
+class RedisPubSub implements PubSub {
+  readonly backend = 'redis' as const;
+  // Per-channel handler sets so a single Redis subscription fans out locally.
+  private handlers = new Map<string, Set<PubSubHandler>>();
+  private wired = false;
+
+  private ensureWired(): void {
+    if (this.wired) return;
+    const sub = getSubscriber();
+    if (!sub) return;
+    this.wired = true;
+    sub.on('message', (channel: string, payload: string) => {
+      const set = this.handlers.get(channel);
+      if (!set || set.size === 0) return;
+      let parsed: any = payload;
+      try {
+        parsed = JSON.parse(payload);
+      } catch {
+        // Leave as raw string if it was not JSON.
+      }
+      for (const handler of set) {
+        try {
+          handler(parsed);
+        } catch (err: any) {
+          console.error('[pubsub] handler error:', err?.message || err);
+        }
+      }
+    });
+  }
+
+  async publish(channel: string, message: any): Promise<void> {
+    const redis = getRedis();
+    if (!redis) return;
+    try {
+      await redis.publish(channel, JSON.stringify(message));
+    } catch (err: any) {
+      console.error('[pubsub] publish error:', err?.message || err);
+    }
+  }
+
+  async subscribe(channel: string, handler: PubSubHandler): Promise<() => void> {
+    this.ensureWired();
+    const sub = getSubscriber();
+    if (!sub) return () => undefined;
+
+    let set = this.handlers.get(channel);
+    if (!set) {
+      set = new Set();
+      this.handlers.set(channel, set);
+      try {
+        await sub.subscribe(channel);
+      } catch (err: any) {
+        console.error('[pubsub] subscribe error:', err?.message || err);
+      }
+    }
+    set.add(handler);
+
+    return () => {
+      const current = this.handlers.get(channel);
+      if (!current) return;
+      current.delete(handler);
+      if (current.size === 0) {
+        this.handlers.delete(channel);
+        sub.unsubscribe(channel).catch(() => undefined);
+      }
+    };
+  }
+}
+
+// ==================== Selection ====================
+
+let instance: PubSub | null = null;
+
+export function getPubSub(): PubSub {
+  if (!instance) {
+    instance = isRedisEnabled() ? new RedisPubSub() : new MemoryPubSub();
+  }
+  return instance;
+}

backend/src/lib/stores/rateLimiter.ts

@@ -0,0 +1,98 @@
+// Rate limiter abstraction with two implementations:
+// - memory: per-process fixed window (the original behavior)
+// - redis: shared fixed window across all instances (INCR + PEXPIRE)
+//
+// Selection happens once based on REDIS_URL. On any Redis error the limiter
+// fails open (allows the request) so a Redis blip never takes the API down.
+
+import { getRedis, isRedisEnabled } from '../redis.js';
+
+export interface RateLimitResult {
+  allowed: boolean;
+  retryAfter?: number;
+}
+
+export interface RateLimiter {
+  readonly backend: 'memory' | 'redis';
+  consume(key: string, max: number, windowMs: number): Promise<RateLimitResult>;
+}
+
+// ==================== Memory implementation ====================
+
+interface Bucket {
+  count: number;
+  resetAt: number;
+}
+
+class MemoryRateLimiter implements RateLimiter {
+  readonly backend = 'memory' as const;
+  private buckets = new Map<string, Bucket>();
+
+  constructor() {
+    // Periodically drop expired buckets so the Map does not grow unbounded.
+    const cleanup = setInterval(() => {
+      const now = Date.now();
+      for (const [key, bucket] of this.buckets) {
+        if (now > bucket.resetAt) this.buckets.delete(key);
+      }
+    }, 60_000);
+    (cleanup as any).unref?.();
+  }
+
+  async consume(key: string, max: number, windowMs: number): Promise<RateLimitResult> {
+    const now = Date.now();
+    const bucket = this.buckets.get(key);
+
+    if (!bucket || now > bucket.resetAt) {
+      this.buckets.set(key, { count: 1, resetAt: now + windowMs });
+      return { allowed: true };
+    }
+
+    bucket.count++;
+    if (bucket.count > max) {
+      return { allowed: false, retryAfter: Math.ceil((bucket.resetAt - now) / 1000) };
+    }
+    return { allowed: true };
+  }
+}
+
+// ==================== Redis implementation ====================
+
+class RedisRateLimiter implements RateLimiter {
+  readonly backend = 'redis' as const;
+
+  async consume(key: string, max: number, windowMs: number): Promise<RateLimitResult> {
+    const redis = getRedis();
+    if (!redis) return { allowed: true };
+
+    const redisKey = `rl:${key}`;
+    try {
+      const count = await redis.incr(redisKey);
+      if (count === 1) {
+        // First hit in this window: set the expiry that defines the window.
+        await redis.pexpire(redisKey, windowMs);
+      }
+      if (count > max) {
+        const ttl = await redis.pttl(redisKey);
+        const retryAfter = ttl > 0 ? Math.ceil(ttl / 1000) : Math.ceil(windowMs / 1000);
+        return { allowed: false, retryAfter };
+      }
+      return { allowed: true };
+    } catch (err: any) {
+      // Fail open: never block traffic because Redis is unavailable.
+      console.error('[rateLimiter] redis error, allowing request:', err?.message || err);
+      return { allowed: true };
+    }
+  }
+}
+
+// ==================== Selection ====================
+
+let instance: RateLimiter | null = null;
+
+export function getRateLimiter(): RateLimiter {
+  if (!instance) {
+    instance = isRedisEnabled() ? new RedisRateLimiter() : new MemoryRateLimiter();
+  }
+  return instance;
+}

backend/src/routes/admin.ts

@@ -6,6 +6,16 @@ import { getNow } from '../lib/utils.js';
 
 const adminRouter = new Hono();
 
+// Escape a value for inclusion in a CSV cell (RFC 4180 quoting).
+const csvEscape = (value: string) => {
+  if (value == null) return '';
+  const str = String(value);
+  if (str.includes(',') || str.includes('"') || str.includes('\n') || str.includes('\r')) {
+    return '"' + str.replace(/"/g, '""') + '"';
+  }
+  return str;
+};
+
 // Dashboard overview stats (admin)
 adminRouter.get('/dashboard', requireAuth(['admin', 'organizer']), async (c) => {
   const now = getNow();
@@ -291,16 +301,6 @@ adminRouter.get('/events/:eventId/attendees/export', requireAuth(['admin']), asy
     })
   );
 
-  // Generate CSV
-  const csvEscape = (value: string) => {
-    if (value == null) return '';
-    const str = String(value);
-    if (str.includes(',') || str.includes('"') || str.includes('\n') || str.includes('\r')) {
-      return '"' + str.replace(/"/g, '""') + '"';
-    }
-    return str;
-  };
-
   const columns = [
     'Ticket ID', 'Full Name', 'Email', 'Phone',
     'Status', 'Checked In', 'Check-in Time', 'Payment Status',
@@ -380,15 +380,6 @@ adminRouter.get('/events/:eventId/tickets/export', requireAuth(['admin']), async
     });
   }
 
-  const csvEscape = (value: string) => {
-    if (value == null) return '';
-    const str = String(value);
-    if (str.includes(',') || str.includes('"') || str.includes('\n') || str.includes('\r')) {
-      return '"' + str.replace(/"/g, '""') + '"';
-    }
-    return str;
-  };
-
   const columns = ['Ticket ID', 'Booking ID', 'Attendee Name', 'Status', 'Check-in Time', 'Booked At'];
 
   const rows = ticketList.map((ticket: any) => ({

backend/src/routes/auth.ts

@@ -229,6 +229,21 @@ auth.post('/login', authRateLimit, zValidator('json', loginSchema), async (c) =>
   
   // Clear failed attempts on successful login
   clearFailedAttempts(data.email);
+
+  // Transparently upgrade legacy bcrypt hashes to argon2 now that we have the
+  // plaintext and have verified it. Best-effort: a failure here must not block
+  // the login.
+  if (!String(user.password).startsWith('$argon2')) {
+    try {
+      const upgradedHash = await hashPassword(data.password);
+      await (db as any)
+        .update(users)
+        .set({ password: upgradedHash })
+        .where(eq((users as any).id, user.id));
+    } catch (err: any) {
+      console.error('[auth] Failed to upgrade legacy password hash:', err?.message || err);
+    }
+  }
   
   const token = await createToken(user.id, user.email, user.role, user.tokenVersion ?? 0);
   const refreshToken = await createRefreshToken(user.id);

backend/src/routes/contacts.ts

@@ -4,7 +4,7 @@ import { z } from 'zod';
 import { db, dbGet, dbAll, contacts, emailSubscribers, legalSettings } from '../db/index.js';
 import { eq, desc } from 'drizzle-orm';
 import { requireAuth } from '../lib/auth.js';
-import { generateId, getNow } from '../lib/utils.js';
+import { generateId, getNow, sanitizeHtml } from '../lib/utils.js';
 import { emailService } from '../lib/email.js';
 import { rateLimitMiddleware } from '../lib/rateLimit.js';
 
@@ -16,19 +16,6 @@ const publicFormLimit = rateLimitMiddleware({ max: 5, windowMs: 10 * 60 * 1000,
 
 // ==================== Sanitization Helpers ====================
 
-/**
- * Sanitize a string to prevent HTML injection
- * Escapes HTML special characters
- */
-function sanitizeHtml(str: string): string {
-  return str
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#x27;');
-}
-
 /**
  * Sanitize email header values to prevent email header injection
  * Strips newlines and carriage returns that could be used to inject headers

backend/src/routes/emails.ts

@@ -163,9 +163,8 @@ emailsRouter.put('/templates/:id', requireAuth(['admin']), zValidator('json', up
   
   const updateData: any = { updatedAt: getNow() };
   
-  // Only allow updating certain fields for system templates
+  // System templates cannot have their slug or isSystem flag changed; only the
-  const systemProtectedFields = ['slug', 'isSystem'];
+  // editable fields below are applied.
-  
   const allowedFields = ['name', 'subject', 'subjectEs', 'bodyHtml', 'bodyHtmlEs', 'bodyText', 'bodyTextEs', 'description', 'variables', 'isActive'];
   if (!existing.isSystem) {
     allowedFields.push('slug');
@@ -486,7 +485,7 @@ emailsRouter.post('/test', requireAuth(['admin']), async (c) => {
 
 // Get email queue status
 emailsRouter.get('/queue/status', requireAuth(['admin']), async (c) => {
-  const status = getQueueStatus();
+  const status = await getQueueStatus();
   return c.json({ status });
 });
 

backend/src/routes/legal-pages.ts

@@ -9,24 +9,6 @@ import path from 'path';
 
 const legalPagesRouter = new Hono();
 
-// Helper: Convert plain text to simple markdown
-// Preserves paragraphs and line breaks, nothing fancy
-function textToMarkdown(text: string): string {
-  if (!text) return '';
-  
-  // Split into paragraphs (double newlines)
-  const paragraphs = text.split(/\n\s*\n/);
-  
-  // Process each paragraph
-  const processed = paragraphs.map(para => {
-    // Replace single newlines with double spaces + newline for markdown line breaks
-    return para.trim().replace(/\n/g, '  \n');
-  });
-  
-  // Join paragraphs with double newlines
-  return processed.join('\n\n');
-}
-
 // Helper: Convert markdown to plain text for editing
 function markdownToText(markdown: string): string {
   if (!markdown) return '';

backend/src/routes/lnbits.ts

@@ -5,15 +5,26 @@ import { eq, and } from 'drizzle-orm';
 import { getNow } from '../lib/utils.js';
 import { verifyWebhookPayment, getPaymentStatus } from '../lib/lnbits.js';
 import emailService from '../lib/email.js';
+import { getPubSub } from '../lib/stores/pubsub.js';
+import { getLock } from '../lib/stores/lock.js';
 
 const lnbitsRouter = new Hono();
 
-// Store for active SSE connections (ticketId -> Set of response writers)
+// Local SSE connections owned by THIS process (ticketId -> Set of response writers).
+// Cross-instance delivery is handled by pub/sub: see paymentChannel below.
 const activeConnections = new Map<string, Set<(data: any) => Promise<void>>>();
 
+// Pub/sub unsubscribe handles per ticket (one local subscription per ticket).
+const channelUnsubs = new Map<string, () => void>();
+
 // Store for active background checkers (ticketId -> intervalId)
 const activeCheckers = new Map<string, NodeJS.Timeout>();
 
+/** Pub/sub channel that carries payment events for a ticket. */
+function paymentChannel(ticketId: string): string {
+  return `payment:${ticketId}`;
+}
+
 /**
  * LNbits webhook payload structure
  */
@@ -32,9 +43,21 @@ interface LNbitsWebhookPayload {
 }
 
 /**
- * Notify all connected clients for a ticket
+ * Notify every client for a ticket across all instances.
+ *
+ * Publishes to the ticket's pub/sub channel. In single-instance / in-memory
+ * mode this is an in-process broadcast; with Redis it reaches whichever
+ * instance(s) actually hold the SSE socket(s) for this ticket.
  */
 async function notifyClients(ticketId: string, data: any) {
+  await getPubSub().publish(paymentChannel(ticketId), data);
+}
+
+/**
+ * Deliver an event to the SSE sockets held by THIS process for a ticket.
+ * Invoked by the pub/sub subscription handler.
+ */
+async function deliverLocal(ticketId: string, data: any) {
   const connections = activeConnections.get(ticketId);
   if (connections) {
     await Promise.all(
@@ -49,17 +72,42 @@ async function notifyClients(ticketId: string, data: any) {
   }
 }
 
+// Distributed lock tokens for the per-ticket poller (ticketId -> token).
+const checkerLockTokens = new Map<string, string>();
+
+/** Release the per-ticket poller lock if this process holds it. */
+function releaseCheckerLock(ticketId: string) {
+  const token = checkerLockTokens.get(ticketId);
+  if (token) {
+    checkerLockTokens.delete(ticketId);
+    void getLock().release(`checker:${ticketId}`, token);
+  }
+}
+
 /**
- * Start background payment checking for a ticket
+ * Start background payment checking for a ticket.
+ *
+ * Only one instance should poll LNbits per ticket, so we take a distributed
+ * lock for the lifetime of the poll. Other instances skip polling and instead
+ * receive the result via pub/sub. With no Redis configured the lock is a local
+ * no-op and behavior matches the original single-instance polling.
  */
-function startBackgroundChecker(ticketId: string, paymentHash: string, expirySeconds: number = 900) {
+async function startBackgroundChecker(ticketId: string, paymentHash: string, expirySeconds: number = 900) {
-  // Don't start if already checking
+  // Don't start if already checking on this instance
   if (activeCheckers.has(ticketId)) {
     return;
   }
 
-  const startTime = Date.now();
   const expiryMs = expirySeconds * 1000;
+
+  const lockToken = await getLock().acquire(`checker:${ticketId}`, expiryMs);
+  if (!lockToken) {
+    // Another instance is already polling this ticket.
+    return;
+  }
+  checkerLockTokens.set(ticketId, lockToken);
+
+  const startTime = Date.now();
   let checkCount = 0;
 
   console.log(`Starting background checker for ticket ${ticketId}, expires in ${expirySeconds}s`);
@@ -73,6 +121,7 @@ function startBackgroundChecker(ticketId: string, paymentHash: string, expirySec
       console.log(`Invoice expired for ticket ${ticketId}`);
       clearInterval(checkInterval);
       activeCheckers.delete(ticketId);
+      releaseCheckerLock(ticketId);
       await notifyClients(ticketId, { type: 'expired', ticketId });
       return;
     }
@@ -84,6 +133,7 @@ function startBackgroundChecker(ticketId: string, paymentHash: string, expirySec
         console.log(`Payment confirmed for ticket ${ticketId} (check #${checkCount})`);
         clearInterval(checkInterval);
         activeCheckers.delete(ticketId);
+        releaseCheckerLock(ticketId);
         
         await handlePaymentComplete(ticketId, paymentHash);
         await notifyClients(ticketId, { type: 'paid', ticketId, paymentHash });
@@ -104,6 +154,7 @@ function stopBackgroundChecker(ticketId: string) {
   if (interval) {
     clearInterval(interval);
     activeCheckers.delete(ticketId);
+    releaseCheckerLock(ticketId);
   }
 }
 
@@ -273,7 +324,7 @@ lnbitsRouter.get('/stream/:ticketId', async (c) => {
   
   // Start background checker if not already running (only while still pending)
   if (ticket.status !== 'confirmed' && payment?.reference && !activeCheckers.has(ticketId)) {
-    startBackgroundChecker(ticketId, payment.reference, 900); // 15 min expiry
+    await startBackgroundChecker(ticketId, payment.reference, 900); // 15 min expiry
   }
   
   // Prevent proxies/CDNs from buffering the event stream so events flush immediately.
@@ -291,9 +342,15 @@ lnbitsRouter.get('/stream/:ticketId', async (c) => {
       return;
     }
     
-    // Register this connection
+    // Register this connection. The first local connection for a ticket also
+    // subscribes to the ticket's pub/sub channel so events published by any
+    // instance (webhook or background checker) are delivered to these sockets.
     if (!activeConnections.has(ticketId)) {
       activeConnections.set(ticketId, new Set());
+      const unsub = await getPubSub().subscribe(paymentChannel(ticketId), (data) => {
+        void deliverLocal(ticketId, data);
+      });
+      channelUnsubs.set(ticketId, unsub);
     }
     activeConnections.get(ticketId)!.add(sendEvent);
     
@@ -317,6 +374,12 @@ lnbitsRouter.get('/stream/:ticketId', async (c) => {
         connections.delete(sendEvent);
         if (connections.size === 0) {
           activeConnections.delete(ticketId);
+          // Drop the pub/sub subscription once no local sockets remain.
+          const unsub = channelUnsubs.get(ticketId);
+          if (unsub) {
+            unsub();
+            channelUnsubs.delete(ticketId);
+          }
         }
       }
     });

backend/src/routes/media.ts

@@ -3,13 +3,10 @@ import { db, dbGet, dbAll, media } from '../db/index.js';
 import { eq, and } from 'drizzle-orm';
 import { requireAuth } from '../lib/auth.js';
 import { generateId, getNow } from '../lib/utils.js';
-import { writeFile, mkdir, unlink } from 'fs/promises';
+import { getStorage, keyFromUrl } from '../lib/storage.js';
-import { existsSync } from 'fs';
-import { join } from 'path';
 
 const mediaRouter = new Hono();
 
-const UPLOAD_DIR = './uploads';
 const MAX_FILE_SIZE =
   (Number(process.env.MEDIA_MAX_UPLOAD_MB || '10') || 10) * 1024 * 1024; // default 10MB
 
@@ -51,13 +48,6 @@ function detectImageType(buf: Buffer): { mime: string; ext: string } | null {
   return null;
 }
 
-// Ensure upload directory exists
-async function ensureUploadDir() {
-  if (!existsSync(UPLOAD_DIR)) {
-    await mkdir(UPLOAD_DIR, { recursive: true });
-  }
-}
-
 // Upload image
 mediaRouter.post('/upload', requireAuth(['admin', 'organizer']), async (c) => {
   try {
@@ -83,15 +73,13 @@ mediaRouter.post('/upload', requireAuth(['admin', 'organizer']), async (c) => {
       return c.json({ error: 'Invalid file. Allowed: JPEG, PNG, GIF, WebP, AVIF' }, 400);
     }
     
-    await ensureUploadDir();
-    
     // Generate unique filename using the *detected* extension (ignore client filename)
     const id = generateId();
     const filename = `${id}${detected.ext}`;
-    const filepath = join(UPLOAD_DIR, filename);
+
-    
+    // Persist via the storage backend (local disk or S3-compatible object store).
-    // Write file
+    const storage = getStorage();
-    await writeFile(filepath, buffer);
+    await storage.put(filename, buffer, detected.mime);
     
     // Get related info from form data
     const relatedId = body['relatedId'] as string | undefined;
@@ -101,7 +89,7 @@ mediaRouter.post('/upload', requireAuth(['admin', 'organizer']), async (c) => {
     const now = getNow();
     const mediaRecord = {
       id,
-      fileUrl: `/uploads/${filename}`,
+      fileUrl: storage.publicUrl(filename),
       type: 'image' as const,
       relatedId: relatedId || null,
       relatedType: relatedType || null,
@@ -147,12 +135,9 @@ mediaRouter.delete('/:id', requireAuth(['admin', 'organizer']), async (c) => {
     return c.json({ error: 'Media not found' }, 404);
   }
   
-  // Delete file from disk
+  // Delete the underlying object from the storage backend.
   try {
-    const filepath = join('.', mediaRecord.fileUrl);
+    await getStorage().delete(keyFromUrl(mediaRecord.fileUrl));
-    if (existsSync(filepath)) {
-      await unlink(filepath);
-    }
   } catch (error) {
     console.error('Failed to delete file:', error);
   }

deploy/docker-compose.scale.yml

@@ -0,0 +1,81 @@
+# Example docker-compose for running the Spanglish API as multiple replicas
+# behind nginx, with Redis for shared state and Postgres as the database.
+#
+# This is a starting point, not a turnkey production setup. It expects a
+# Dockerfile at backend/Dockerfile that builds the API and runs it on PORT.
+#
+# Bring it up with N API replicas:
+#   docker compose -f deploy/docker-compose.scale.yml up --build --scale api=3
+#
+# No em dashes are used in this file by design.
+
+services:
+  postgres:
+    image: postgres:16-alpine
+    environment:
+      POSTGRES_USER: spanglish
+      POSTGRES_PASSWORD: spanglish
+      POSTGRES_DB: spanglish
+    # Raise max_connections if DB_POOL_MAX * replicas approaches the default 100.
+    command: ["postgres", "-c", "max_connections=200"]
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U spanglish"]
+      interval: 5s
+      timeout: 3s
+      retries: 10
+
+  redis:
+    image: redis:7-alpine
+    command: ["redis-server", "--appendonly", "yes"]
+    volumes:
+      - redisdata:/data
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 5s
+      timeout: 3s
+      retries: 10
+
+  api:
+    build:
+      context: ../backend
+    environment:
+      NODE_ENV: production
+      PORT: "3001"
+      DB_TYPE: postgres
+      DATABASE_URL: postgresql://spanglish:spanglish@postgres:5432/spanglish
+      DB_POOL_MAX: "15"
+      REDIS_URL: redis://redis:6379
+      JWT_SECRET: change-me-to-a-strong-secret
+      FRONTEND_URL: http://localhost:8080
+      # Optional S3-compatible storage so uploads are shared across replicas.
+      # If you omit these, mount a shared volume at /app/uploads on every replica.
+      # S3_ENDPOINT: http://garage:3900
+      # S3_REGION: garage
+      # S3_BUCKET: spanglish-media
+      # S3_ACCESS_KEY_ID: ""
+      # S3_SECRET_ACCESS_KEY: ""
+      # S3_PUBLIC_URL: http://localhost:8080/media
+    expose:
+      - "3001"
+    depends_on:
+      postgres:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
+
+  # Load balancer across the scaled api replicas. nginx resolves the "api"
+  # service name via Docker's embedded DNS, which round-robins across replicas.
+  lb:
+    image: nginx:alpine
+    ports:
+      - "8080:80"
+    volumes:
+      - ./nginx.scale.conf:/etc/nginx/conf.d/default.conf:ro
+    depends_on:
+      - api
+
+volumes:
+  pgdata:
+  redisdata:

deploy/nginx.scale.conf

@@ -0,0 +1,29 @@
+# nginx load balancer for the scaled "api" service in docker-compose.scale.yml.
+# Uses Docker's embedded DNS resolver so newly scaled replicas are discovered
+# without editing a static upstream list.
+
+server {
+    listen 80;
+
+    # Docker embedded DNS. valid=10s re-resolves so scaling up/down is picked up.
+    resolver 127.0.0.11 valid=10s;
+
+    location / {
+        # Use a variable so nginx defers resolution to request time (round-robin
+        # across all replicas of the "api" service).
+        set $api_upstream http://api:3001;
+        proxy_pass $api_upstream;
+
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        # Server-Sent Events: do not buffer the payment status stream.
+        proxy_buffering off;
+        proxy_cache off;
+        proxy_read_timeout 1h;
+        proxy_set_header Connection "";
+        proxy_http_version 1.1;
+    }
+}

frontend/package.json

@@ -22,8 +22,7 @@
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-markdown": "^10.1.0",
-    "remark-gfm": "^4.0.1",
+    "remark-gfm": "^4.0.1"
-    "swr": "^2.2.5"
   },
   "devDependencies": {
     "@types/node": "^20.14.9",

frontend/src/app/(public)/book/[eventId]/_hooks/useLightningWatcher.ts

@@ -0,0 +1,83 @@
+import { useEffect } from 'react';
+import toast from 'react-hot-toast';
+import { ticketsApi } from '@/lib/api';
+import type { BookingStep } from '../_types';
+
+/**
+ * Watch for Lightning payment confirmation while on the paying step.
+ * SSE gives instant updates; a 3s poll runs in parallel as a safety net so a
+ * buffered/stuck stream (e.g. a proxy that doesn't flush SSE) can't strand the UI.
+ */
+export function useLightningWatcher(
+  step: BookingStep,
+  ticketId: string | undefined,
+  locale: string,
+  setPaymentPending: (value: boolean) => void,
+  setStep: (value: BookingStep) => void
+) {
+  useEffect(() => {
+    if (step !== 'paying' || !ticketId) return;
+
+    let settled = false;
+    let pollTimer: ReturnType<typeof setTimeout> | null = null;
+
+    const confirmPaid = () => {
+      if (settled) return;
+      settled = true;
+      toast.success(locale === 'es' ? '¡Pago confirmado!' : 'Payment confirmed!');
+      setPaymentPending(false);
+      setStep('success');
+    };
+
+    const expire = () => {
+      if (settled) return;
+      settled = true;
+      toast.error(locale === 'es' ? 'La factura ha expirado' : 'Invoice has expired');
+      setPaymentPending(false);
+    };
+
+    // Always same-origin so the streaming proxy route handler is used (it
+    // bypasses the rewrite, which buffers SSE).
+    const eventSource = new EventSource(`/api/lnbits/stream/${ticketId}`);
+
+    eventSource.addEventListener('payment', (event) => {
+      try {
+        const data = JSON.parse((event as MessageEvent).data);
+        if (data.type === 'paid' || data.type === 'already_paid') {
+          confirmPaid();
+        } else if (data.type === 'expired') {
+          expire();
+        }
+      } catch (e) {
+        console.error('Error parsing payment event:', e);
+      }
+    });
+
+    eventSource.onerror = () => {
+      // SSE failed or was closed; the poll below remains the source of truth.
+      eventSource.close();
+    };
+
+    const poll = async () => {
+      try {
+        const status = await ticketsApi.checkPaymentStatus(ticketId);
+        if (status.isPaid) {
+          confirmPaid();
+          return;
+        }
+      } catch (error) {
+        console.error('Error checking payment status:', error);
+      }
+      if (!settled) {
+        pollTimer = setTimeout(poll, 3000);
+      }
+    };
+    pollTimer = setTimeout(poll, 3000);
+
+    return () => {
+      settled = true;
+      eventSource.close();
+      if (pollTimer) clearTimeout(pollTimer);
+    };
+  }, [step, ticketId, locale]);
+}

frontend/src/app/(public)/book/[eventId]/_logic/booking.ts

@@ -0,0 +1,131 @@
+import toast from 'react-hot-toast';
+import { PaymentOptionsConfig } from '@/lib/api';
+import {
+  CreditCardIcon,
+  BanknotesIcon,
+  BoltIcon,
+  BuildingLibraryIcon,
+} from '@heroicons/react/24/outline';
+import type { PaymentMethod, BookingResult } from '../_types';
+
+export const rucPattern = /^\d{6,10}$/;
+
+/** Format RUC input: digits only, max 10. */
+export function formatRuc(value: string): string {
+  return value.replace(/\D/g, '').slice(0, 10);
+}
+
+/** Truncate a long invoice string for display. */
+export function truncateInvoice(invoice: string, chars: number = 20): string {
+  if (invoice.length <= chars * 2) return invoice;
+  return `${invoice.slice(0, chars)}...${invoice.slice(-chars)}`;
+}
+
+/** Copy a Lightning invoice to the clipboard with localized feedback. */
+export function copyInvoiceToClipboard(invoice: string, locale: string): void {
+  navigator.clipboard.writeText(invoice).then(() => {
+    toast.success(locale === 'es' ? '¡Copiado!' : 'Copied!');
+  }).catch(() => {
+    toast.error(locale === 'es' ? 'Error al copiar' : 'Failed to copy');
+  });
+}
+
+export interface PaymentMethodOption {
+  id: PaymentMethod;
+  icon: typeof CreditCardIcon;
+  label: string;
+  description: string;
+  badge?: string;
+}
+
+/** Build the list of selectable payment methods from the event config. */
+export function buildPaymentMethods(
+  paymentConfig: PaymentOptionsConfig | null,
+  locale: string
+): PaymentMethodOption[] {
+  const paymentMethods: PaymentMethodOption[] = [];
+
+  if (paymentConfig?.lightningEnabled) {
+    paymentMethods.push({
+      id: 'lightning',
+      icon: BoltIcon,
+      label: 'Bitcoin Lightning',
+      description: locale === 'es' ? 'Pago instantáneo con Bitcoin' : 'Instant payment with Bitcoin',
+      badge: locale === 'es' ? 'Instantáneo' : 'Instant',
+    });
+  }
+
+  if (paymentConfig?.tpagoEnabled) {
+    paymentMethods.push({
+      id: 'tpago',
+      icon: CreditCardIcon,
+      label: locale === 'es' ? 'TPago / Tarjetas de Crédito' : 'TPago / Credit Cards',
+      description: locale === 'es' ? 'Pagá con tarjetas de crédito locales o internacionales' : 'Pay with local or international credit cards',
+      badge: locale === 'es' ? 'Manual' : 'Manual',
+    });
+  }
+
+  if (paymentConfig?.bankTransferEnabled) {
+    paymentMethods.push({
+      id: 'bank_transfer',
+      icon: BuildingLibraryIcon,
+      label: locale === 'es' ? 'Transferencia Bancaria Local' : 'Local Bank Transfer',
+      description: locale === 'es' ? 'Pago por transferencia bancaria en Paraguay' : 'Pay via Paraguayan bank transfer',
+      badge: locale === 'es' ? 'Manual' : 'Manual',
+    });
+  }
+
+  if (paymentConfig?.cashEnabled) {
+    paymentMethods.push({
+      id: 'cash',
+      icon: BanknotesIcon,
+      label: locale === 'es' ? 'Efectivo en el Evento' : 'Cash at Event',
+      description: locale === 'es' ? 'Paga cuando llegues al evento' : 'Pay when you arrive at the event',
+      badge: locale === 'es' ? 'Manual' : 'Manual',
+    });
+  }
+
+  return paymentMethods;
+}
+
+export interface SuccessContent {
+  title: string;
+  description: string;
+  iconColor: string;
+  iconTextColor: string;
+}
+
+/** Resolve the success-screen copy based on the payment method used. */
+export function getSuccessContent(
+  bookingResult: BookingResult | null,
+  locale: string,
+  t: (key: string) => string
+): SuccessContent {
+  if (bookingResult?.paymentMethod === 'cash') {
+    return {
+      title: locale === 'es' ? '¡Reserva Recibida!' : 'Reservation Received!',
+      description: locale === 'es'
+        ? 'Tu lugar está reservado. El pago se realizará en el evento.'
+        : 'Your spot is reserved. Payment will be collected at the event.',
+      iconColor: 'bg-yellow-100',
+      iconTextColor: 'text-yellow-600',
+    };
+  }
+  if (bookingResult?.paymentMethod === 'lightning') {
+    // For Lightning, if we're on success step, payment was confirmed
+    return {
+      title: locale === 'es' ? '¡Pago Confirmado!' : 'Payment Confirmed!',
+      description: locale === 'es'
+        ? '¡Tu reserva está confirmada! Te esperamos en el evento.'
+        : 'Your booking is confirmed! See you at the event.',
+      iconColor: 'bg-green-100',
+      iconTextColor: 'text-green-600',
+    };
+  }
+  return {
+    title: t('booking.success.title'),
+    description: t('booking.success.description'),
+    iconColor: 'bg-green-100',
+    iconTextColor: 'text-green-600',
+  };
+}

frontend/src/app/(public)/book/[eventId]/_steps/BookingFormStep.tsx

@@ -0,0 +1,447 @@
+import Link from 'next/link';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import {
+  CalendarIcon,
+  MapPinIcon,
+  UserGroupIcon,
+  CurrencyDollarIcon,
+  ArrowLeftIcon,
+  CheckCircleIcon,
+  UserIcon,
+} from '@heroicons/react/24/outline';
+import { Event } from '@/lib/api';
+import { formatPrice } from '@/lib/utils';
+import type { AttendeeInfo, BookingFormData } from '../_types';
+import type { PaymentMethodOption } from '../_logic/booking';
+
+interface BookingFormStepProps {
+  event: Event;
+  locale: string;
+  t: (key: string) => string;
+  spotsLeft: number;
+  isSoldOut: boolean;
+  ticketQuantity: number;
+  formData: BookingFormData;
+  setFormData: React.Dispatch<React.SetStateAction<BookingFormData>>;
+  errors: Partial<Record<keyof BookingFormData, string>>;
+  attendees: AttendeeInfo[];
+  setAttendees: React.Dispatch<React.SetStateAction<AttendeeInfo[]>>;
+  attendeeErrors: { [key: number]: string };
+  setAttendeeErrors: React.Dispatch<React.SetStateAction<{ [key: number]: string }>>;
+  handleRucChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleRucBlur: () => void;
+  paymentMethods: PaymentMethodOption[];
+  agreedToTerms: boolean;
+  setAgreedToTerms: (value: boolean) => void;
+  termsError: string | null;
+  submitting: boolean;
+  onSubmit: (e: React.FormEvent) => void;
+  formatDate: (dateStr: string) => string;
+  fmtTime: (dateStr: string) => string;
+}
+
+export function BookingFormStep({
+  event,
+  locale,
+  t,
+  spotsLeft,
+  isSoldOut,
+  ticketQuantity,
+  formData,
+  setFormData,
+  errors,
+  attendees,
+  setAttendees,
+  attendeeErrors,
+  setAttendeeErrors,
+  handleRucChange,
+  handleRucBlur,
+  paymentMethods,
+  agreedToTerms,
+  setAgreedToTerms,
+  termsError,
+  submitting,
+  onSubmit,
+  formatDate,
+  fmtTime,
+}: BookingFormStepProps) {
+  return (
+    <div className="section-padding bg-secondary-gray min-h-screen">
+      <div className="container-page max-w-2xl">
+        <Link
+          href={`/events/${event.slug}`}
+          className="inline-flex items-center gap-2 text-gray-600 hover:text-primary-dark mb-6"
+        >
+          <ArrowLeftIcon className="w-4 h-4" />
+          {t('common.back')}
+        </Link>
+
+        {/* Event Summary - Always Visible */}
+        <Card className="mb-6 overflow-hidden">
+          <div className="bg-primary-yellow/20 p-4 border-b border-primary-yellow/30">
+            <h2 className="font-bold text-lg text-primary-dark">
+              {locale === 'es' && event.titleEs ? event.titleEs : event.title}
+            </h2>
+          </div>
+          <div className="p-4 space-y-2 text-sm">
+            <div className="flex items-center gap-3">
+              <CalendarIcon className="w-5 h-5 text-primary-yellow" />
+              <span>{formatDate(event.startDatetime)} • {fmtTime(event.startDatetime)}</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <MapPinIcon className="w-5 h-5 text-primary-yellow" />
+              <span>{event.location}</span>
+            </div>
+            {!event.externalBookingEnabled && (
+              <div className="flex items-center gap-3">
+                <UserGroupIcon className="w-5 h-5 text-primary-yellow" />
+                <span>{spotsLeft} / {event.capacity} {t('events.details.spotsLeft')}</span>
+              </div>
+            )}
+            <div className="flex items-center gap-3">
+              <CurrencyDollarIcon className="w-5 h-5 text-primary-yellow" />
+              <span className="font-bold text-lg">
+                {event.price === 0
+                  ? t('events.details.free')
+                  : formatPrice(event.price, event.currency)}
+              </span>
+              {event.price > 0 && (
+                <span className="text-gray-400 text-sm">
+                  {locale === 'es' ? 'por persona' : 'per person'}
+                </span>
+              )}
+            </div>
+            {/* Ticket quantity and total */}
+            {ticketQuantity > 1 && (
+              <div className="mt-3 pt-3 border-t border-secondary-light-gray">
+                <div className="flex items-center justify-between">
+                  <span className="text-gray-600">
+                    {locale === 'es' ? 'Tickets' : 'Tickets'}: <span className="font-semibold">{ticketQuantity}</span>
+                  </span>
+                  <span className="font-bold text-lg text-primary-dark">
+                    {locale === 'es' ? 'Total' : 'Total'}: {formatPrice(event.price * ticketQuantity, event.currency)}
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
+        </Card>
+
+        {isSoldOut ? (
+          <Card className="p-8 text-center">
+            <UserGroupIcon className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+            <h2 className="text-xl font-bold text-gray-700">{t('events.details.soldOut')}</h2>
+            <p className="text-gray-500 mt-2">{t('booking.form.soldOutMessage')}</p>
+          </Card>
+        ) : (
+          <form onSubmit={onSubmit}>
+            {/* User Information Section */}
+            <Card className="mb-6 p-6">
+              <h3 className="font-bold text-lg mb-4 text-primary-dark flex items-center gap-2">
+                {attendees.length > 0 && (
+                  <span className="w-6 h-6 rounded-full bg-primary-yellow text-primary-dark text-sm font-bold flex items-center justify-center">
+                    1
+                  </span>
+                )}
+                {t('booking.form.personalInfo')}
+                {attendees.length > 0 && (
+                  <span className="text-sm font-normal text-gray-500">
+                    ({locale === 'es' ? 'Asistente principal' : 'Primary attendee'})
+                  </span>
+                )}
+              </h3>
+
+              <div className="space-y-4">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <Input
+                    label={t('booking.form.firstName')}
+                    value={formData.firstName}
+                    onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
+                    placeholder={t('booking.form.firstNamePlaceholder')}
+                    error={errors.firstName}
+                    required
+                  />
+                  <div>
+                    <div className="flex items-center gap-2 mb-1">
+                      <label className="block text-sm font-medium text-gray-700">
+                        {t('booking.form.lastName')}
+                      </label>
+                      <span className="text-xs text-gray-400">
+                        ({locale === 'es' ? 'Opcional' : 'Optional'})
+                      </span>
+                    </div>
+                    <Input
+                      value={formData.lastName}
+                      onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
+                      placeholder={t('booking.form.lastNamePlaceholder')}
+                      error={errors.lastName}
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <Input
+                    label={t('booking.form.email')}
+                    type="email"
+                    value={formData.email}
+                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                    placeholder={t('booking.form.emailPlaceholder')}
+                    error={errors.email}
+                    required
+                  />
+                </div>
+
+                <div>
+                  <div className="flex items-center gap-2 mb-1">
+                    <label className="block text-sm font-medium text-gray-700">
+                      {t('booking.form.phone')}
+                    </label>
+                    <span className="text-xs text-gray-400">
+                      ({locale === 'es' ? 'Opcional' : 'Optional'})
+                    </span>
+                  </div>
+                  <Input
+                    type="tel"
+                    value={formData.phone}
+                    onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
+                    placeholder={t('booking.form.phonePlaceholder')}
+                    error={errors.phone}
+                  />
+                </div>
+
+                <div>
+                  <div className="flex items-center gap-2 mb-1">
+                    <label className="block text-sm font-medium text-gray-700">
+                      {t('booking.form.ruc')}
+                    </label>
+                    <span className="text-xs text-gray-400">
+                      {t('booking.form.rucOptional')}
+                    </span>
+                  </div>
+                  <Input
+                    value={formData.ruc}
+                    onChange={handleRucChange}
+                    onBlur={handleRucBlur}
+                    placeholder={t('booking.form.rucPlaceholder')}
+                    error={errors.ruc}
+                    inputMode="numeric"
+                    maxLength={10}
+                    aria-label={t('booking.form.ruc')}
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    {t('booking.form.preferredLanguage')}
+                  </label>
+                  <select
+                    value={formData.preferredLanguage}
+                    onChange={(e) => setFormData({ ...formData, preferredLanguage: e.target.value as 'en' | 'es' })}
+                    className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                  >
+                    <option value="en">English</option>
+                    <option value="es">Español</option>
+                  </select>
+                </div>
+              </div>
+            </Card>
+
+            {/* Additional Attendees Section (for multi-ticket bookings) */}
+            {attendees.length > 0 && (
+              <Card className="mb-6 p-6">
+                <h3 className="font-bold text-lg mb-4 text-primary-dark flex items-center gap-2">
+                  <UserIcon className="w-5 h-5 text-primary-yellow" />
+                  {locale === 'es' ? 'Información de los Otros Asistentes' : 'Other Attendees Information'}
+                </h3>
+                <p className="text-sm text-gray-600 mb-4">
+                  {locale === 'es'
+                    ? 'Ingresa el nombre de cada asistente adicional. Cada persona recibirá su propio ticket.'
+                    : 'Enter the name for each additional attendee. Each person will receive their own ticket.'}
+                </p>
+
+                <div className="space-y-4">
+                  {attendees.map((attendee, index) => (
+                    <div key={index} className="p-4 bg-gray-50 rounded-lg">
+                      <div className="flex items-center gap-2 mb-3">
+                        <span className="w-6 h-6 rounded-full bg-primary-yellow text-primary-dark text-sm font-bold flex items-center justify-center">
+                          {index + 2}
+                        </span>
+                        <span className="font-medium text-gray-700">
+                          {locale === 'es' ? `Asistente ${index + 2}` : `Attendee ${index + 2}`}
+                        </span>
+                      </div>
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        <Input
+                          label={t('booking.form.firstName')}
+                          value={attendee.firstName}
+                          onChange={(e) => {
+                            const newAttendees = [...attendees];
+                            newAttendees[index].firstName = e.target.value;
+                            setAttendees(newAttendees);
+                            if (attendeeErrors[index]) {
+                              const newErrors = { ...attendeeErrors };
+                              delete newErrors[index];
+                              setAttendeeErrors(newErrors);
+                            }
+                          }}
+                          placeholder={t('booking.form.firstNamePlaceholder')}
+                          error={attendeeErrors[index]}
+                          required
+                        />
+                        <div>
+                          <div className="flex items-center gap-2 mb-1">
+                            <label className="block text-sm font-medium text-gray-700">
+                              {t('booking.form.lastName')}
+                            </label>
+                            <span className="text-xs text-gray-400">
+                              ({locale === 'es' ? 'Opcional' : 'Optional'})
+                            </span>
+                          </div>
+                          <Input
+                            value={attendee.lastName}
+                            onChange={(e) => {
+                              const newAttendees = [...attendees];
+                              newAttendees[index].lastName = e.target.value;
+                              setAttendees(newAttendees);
+                            }}
+                            placeholder={t('booking.form.lastNamePlaceholder')}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            )}
+
+            {/* Payment Selection Section */}
+            <Card className="mb-6 p-6">
+              <h3 className="font-bold text-lg mb-4 text-primary-dark">
+                {t('booking.form.paymentMethod')}
+              </h3>
+
+              <div className="space-y-3">
+                {paymentMethods.length === 0 ? (
+                  <div className="text-center py-8 text-gray-500">
+                    {locale === 'es'
+                      ? 'No hay métodos de pago disponibles para este evento.'
+                      : 'No payment methods available for this event.'}
+                  </div>
+                ) : (
+                  <>
+                    {paymentMethods.map((method) => (
+                      <button
+                        key={method.id}
+                        type="button"
+                        onClick={() => setFormData({ ...formData, paymentMethod: method.id })}
+                        className={`w-full p-4 rounded-lg border-2 transition-all text-left flex items-start gap-4 ${
+                          formData.paymentMethod === method.id
+                            ? 'border-primary-yellow bg-primary-yellow/10'
+                            : 'border-secondary-light-gray hover:border-gray-300'
+                        }`}
+                      >
+                        <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
+                          formData.paymentMethod === method.id
+                            ? 'bg-primary-yellow'
+                            : 'bg-gray-100'
+                        }`}>
+                          <method.icon className={`w-5 h-5 ${
+                            formData.paymentMethod === method.id
+                              ? 'text-primary-dark'
+                              : 'text-gray-500'
+                          }`} />
+                        </div>
+                        <div className="flex-1">
+                          <div className="flex items-center gap-2">
+                            <p className="font-medium text-primary-dark">{method.label}</p>
+                            {method.badge && (
+                              <span className={`text-xs px-2 py-0.5 rounded-full ${
+                                method.badge === 'Instant' || method.badge === 'Instantáneo'
+                                  ? 'bg-green-100 text-green-700'
+                                  : 'bg-gray-100 text-gray-600'
+                              }`}>
+                                {method.badge}
+                              </span>
+                            )}
+                          </div>
+                          <p className="text-sm text-gray-500">{method.description}</p>
+                        </div>
+                        {formData.paymentMethod === method.id && (
+                          <CheckCircleIcon className="w-6 h-6 text-primary-yellow ml-auto flex-shrink-0" />
+                        )}
+                      </button>
+                    ))}
+
+                  </>
+                )}
+              </div>
+            </Card>
+
+            {/* Terms & Privacy agreement */}
+            <Card className="mb-6 p-6">
+              <div className="flex items-start gap-3">
+                <input
+                  id="booking-terms-agree"
+                  type="checkbox"
+                  checked={agreedToTerms}
+                  onChange={(e) => setAgreedToTerms(e.target.checked)}
+                  aria-required="true"
+                  aria-invalid={termsError ? true : undefined}
+                  aria-describedby={termsError ? 'booking-terms-error' : undefined}
+                  className="h-5 w-5 mt-0.5 flex-shrink-0 accent-primary-yellow rounded focus:outline-none focus:ring-2 focus:ring-primary-yellow focus:ring-offset-2 cursor-pointer"
+                />
+                <label
+                  htmlFor="booking-terms-agree"
+                  className="text-sm text-gray-500 leading-relaxed cursor-pointer select-none"
+                >
+                  {t('booking.form.termsAgreePart1')}
+                  <Link
+                    href={`/legal/terms-policy${locale === 'es' ? '?locale=es' : ''}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-secondary-blue hover:text-brand-navy underline"
+                  >
+                    {t('booking.form.termsOfService')}
+                  </Link>
+                  {t('booking.form.termsAgreePart2')}
+                  <Link
+                    href={`/legal/privacy-policy${locale === 'es' ? '?locale=es' : ''}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-secondary-blue hover:text-brand-navy underline"
+                  >
+                    {t('booking.form.privacyPolicy')}
+                  </Link>
+                  {t('booking.form.termsAgreePart3')}
+                </label>
+              </div>
+              {termsError && (
+                <p id="booking-terms-error" className="mt-1.5 text-sm text-red-600">
+                  {termsError}
+                </p>
+              )}
+            </Card>
+
+            {/* Submit Button */}
+            <Button
+              type="submit"
+              size="lg"
+              className="w-full"
+              isLoading={submitting}
+              disabled={paymentMethods.length === 0 || !agreedToTerms}
+            >
+              {formData.paymentMethod === 'cash'
+                ? t('booking.form.reserveSpot')
+                : formData.paymentMethod === 'lightning'
+                  ? t('booking.form.proceedPayment')
+                  : locale === 'es' ? 'Continuar al Pago' : 'Continue to Payment'
+              }
+            </Button>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/app/(public)/book/[eventId]/_steps/ManualPaymentStep.tsx

@@ -0,0 +1,249 @@
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import {
+  CreditCardIcon,
+  BuildingLibraryIcon,
+  CheckCircleIcon,
+  ArrowTopRightOnSquareIcon,
+} from '@heroicons/react/24/outline';
+import { Event, PaymentOptionsConfig } from '@/lib/api';
+import { formatPrice, getTpagoLink } from '@/lib/utils';
+import type { BookingResult } from '../_types';
+
+interface ManualPaymentStepProps {
+  bookingResult: BookingResult;
+  event: Event;
+  paymentConfig: PaymentOptionsConfig;
+  locale: string;
+  paidUnderDifferentName: boolean;
+  setPaidUnderDifferentName: (value: boolean) => void;
+  payerName: string;
+  setPayerName: (value: string) => void;
+  markingPaid: boolean;
+  onMarkPaymentSent: () => void;
+}
+
+export function ManualPaymentStep({
+  bookingResult,
+  event,
+  paymentConfig,
+  locale,
+  paidUnderDifferentName,
+  setPaidUnderDifferentName,
+  payerName,
+  setPayerName,
+  markingPaid,
+  onMarkPaymentSent,
+}: ManualPaymentStepProps) {
+  const isBankTransfer = bookingResult.paymentMethod === 'bank_transfer';
+  const isTpago = bookingResult.paymentMethod === 'tpago';
+  const ticketCount = bookingResult.ticketCount || 1;
+  const totalAmount = (event?.price || 0) * ticketCount;
+  const tpagoLink = getTpagoLink(paymentConfig, ticketCount);
+
+  return (
+    <div className="section-padding">
+      <div className="container-page max-w-xl">
+        <Card className="p-6">
+          <div className="text-center mb-6">
+            <div className={`w-16 h-16 rounded-full ${isBankTransfer ? 'bg-green-100' : 'bg-blue-100'} flex items-center justify-center mx-auto mb-4`}>
+              {isBankTransfer ? (
+                <BuildingLibraryIcon className="w-8 h-8 text-green-600" />
+              ) : (
+                <CreditCardIcon className="w-8 h-8 text-blue-600" />
+              )}
+            </div>
+            <h1 className="text-xl font-bold text-primary-dark mb-2">
+              {locale === 'es' ? 'Completa tu Pago' : 'Complete Your Payment'}
+            </h1>
+            <p className="text-gray-600">
+              {locale === 'es'
+                ? 'Sigue las instrucciones para completar tu pago'
+                : 'Follow the instructions to complete your payment'}
+            </p>
+          </div>
+
+          {/* Amount to pay */}
+          <div className="bg-gray-50 rounded-lg p-4 mb-6 text-center">
+            <p className="text-sm text-gray-500 mb-1">
+              {locale === 'es' ? 'Monto a pagar' : 'Amount to pay'}
+            </p>
+            <p className="text-2xl font-bold text-primary-dark">
+              {event?.price !== undefined ? formatPrice(totalAmount, event.currency) : ''}
+            </p>
+            {ticketCount > 1 && (
+              <p className="text-sm text-gray-500 mt-1">
+                {ticketCount} tickets × {formatPrice(event?.price || 0, event?.currency || 'PYG')}
+              </p>
+            )}
+          </div>
+
+          {/* Bank Transfer Details */}
+          {isBankTransfer && (
+            <div className="space-y-4 mb-6">
+              <h3 className="font-semibold text-gray-900">
+                {locale === 'es' ? 'Datos Bancarios' : 'Bank Details'}
+              </h3>
+              <div className="bg-green-50 border border-green-200 rounded-lg p-4 space-y-3">
+                {paymentConfig.bankName && (
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">{locale === 'es' ? 'Banco' : 'Bank'}:</span>
+                    <span className="font-medium">{paymentConfig.bankName}</span>
+                  </div>
+                )}
+                {paymentConfig.bankAccountHolder && (
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">{locale === 'es' ? 'Titular' : 'Account Holder'}:</span>
+                    <span className="font-medium">{paymentConfig.bankAccountHolder}</span>
+                  </div>
+                )}
+                {paymentConfig.bankAccountNumber && (
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">{locale === 'es' ? 'Nro. Cuenta' : 'Account Number'}:</span>
+                    <span className="font-medium font-mono">{paymentConfig.bankAccountNumber}</span>
+                  </div>
+                )}
+                {paymentConfig.bankAlias && (
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">Alias:</span>
+                    <span className="font-medium">{paymentConfig.bankAlias}</span>
+                  </div>
+                )}
+                {paymentConfig.bankPhone && (
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">{locale === 'es' ? 'Teléfono' : 'Phone'}:</span>
+                    <span className="font-medium">{paymentConfig.bankPhone}</span>
+                  </div>
+                )}
+              </div>
+              {(locale === 'es' ? paymentConfig.bankNotesEs : paymentConfig.bankNotes) && (
+                <p className="text-sm text-gray-600">
+                  {locale === 'es' ? paymentConfig.bankNotesEs : paymentConfig.bankNotes}
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* TPago Link */}
+          {isTpago && (
+            <div className="space-y-4 mb-6">
+              <h3 className="font-semibold text-gray-900">
+                {locale === 'es' ? 'Pago con Tarjeta' : 'Card Payment'}
+              </h3>
+              {tpagoLink && (
+                <a
+                  href={tpagoLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center justify-center gap-2 w-full px-6 py-4 bg-blue-600 text-white rounded-btn hover:bg-blue-700 transition-colors font-medium"
+                >
+                  <ArrowTopRightOnSquareIcon className="w-5 h-5" />
+                  {locale === 'es' ? 'Abrir TPago para Pagar' : 'Open TPago to Pay'}
+                </a>
+              )}
+              {(locale === 'es' ? paymentConfig.tpagoInstructionsEs : paymentConfig.tpagoInstructions) && (
+                <p className="text-sm text-gray-600">
+                  {locale === 'es' ? paymentConfig.tpagoInstructionsEs : paymentConfig.tpagoInstructions}
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* Reference */}
+          <div className="bg-gray-100 rounded-lg p-3 mb-6">
+            <p className="text-xs text-gray-500 mb-1">
+              {locale === 'es' ? 'Referencia de tu reserva' : 'Your booking reference'}
+            </p>
+            <p className="font-mono font-bold text-lg">{bookingResult.qrCode}</p>
+          </div>
+
+          {/* Manual verification notice */}
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
+            <div className="flex gap-3">
+              <div className="flex-shrink-0">
+                <svg className="w-5 h-5 text-blue-600 mt-0.5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+                </svg>
+              </div>
+              <div className="text-sm text-blue-800">
+                <p className="font-medium mb-1">
+                  {locale === 'es' ? 'Verificación manual' : 'Manual verification'}
+                </p>
+                <p className="text-blue-700">
+                  {locale === 'es'
+                    ? 'El equipo de Spanglish revisará el pago manualmente. Tu reserva solo será confirmada después de recibir un email de confirmación de nuestra parte.'
+                    : 'The Spanglish team will review the payment manually. Your booking is only confirmed after you receive a confirmation email from us.'}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Paid under different name option */}
+          <div className="bg-gray-50 rounded-lg p-4 mb-4">
+            <label className="flex items-start gap-3 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={paidUnderDifferentName}
+                onChange={(e) => {
+                  setPaidUnderDifferentName(e.target.checked);
+                  if (!e.target.checked) setPayerName('');
+                }}
+                className="mt-1 w-4 h-4 text-primary-yellow border-gray-300 rounded focus:ring-primary-yellow"
+              />
+              <div>
+                <span className="font-medium text-gray-700">
+                  {locale === 'es'
+                    ? 'El pago está a nombre de otra persona'
+                    : 'The payment is under another person\'s name'}
+                </span>
+                <p className="text-xs text-gray-500 mt-1">
+                  {locale === 'es'
+                    ? 'Marcá esta opción si el pago fue realizado por un familiar o tercero.'
+                    : 'Check this option if the payment was made by a family member or a third party.'}
+                </p>
+              </div>
+            </label>
+
+            {paidUnderDifferentName && (
+              <div className="mt-3 pl-7">
+                <Input
+                  label={locale === 'es' ? 'Nombre del pagador' : 'Payer name'}
+                  value={payerName}
+                  onChange={(e) => setPayerName(e.target.value)}
+                  placeholder={locale === 'es' ? 'Nombre completo del titular de la cuenta' : 'Full name of account holder'}
+                  required
+                />
+              </div>
+            )}
+          </div>
+
+          {/* Warning before I Have Paid button */}
+          <p className="text-sm text-center text-amber-700 font-medium mb-3">
+            {locale === 'es'
+              ? 'Solo haz clic aquí después de haber completado el pago.'
+              : 'Only click this after you have actually completed the payment.'}
+          </p>
+
+          {/* I Have Paid Button */}
+          <Button
+            onClick={onMarkPaymentSent}
+            isLoading={markingPaid}
+            size="lg"
+            className="w-full"
+            disabled={paidUnderDifferentName && !payerName.trim()}
+          >
+            <CheckCircleIcon className="w-5 h-5 mr-2" />
+            {locale === 'es' ? 'Ya Realicé el Pago' : 'I Have Paid'}
+          </Button>
+
+          <p className="text-xs text-center text-gray-500 mt-4">
+            {locale === 'es'
+              ? 'Tu reserva será confirmada una vez que verifiquemos el pago'
+              : 'Your booking will be confirmed once we verify the payment'}
+          </p>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/src/app/(public)/book/[eventId]/_steps/PayingStep.tsx

@@ -0,0 +1,81 @@
+import { QRCodeSVG } from 'qrcode.react';
+import Card from '@/components/ui/Card';
+import { BoltIcon, ClipboardDocumentIcon } from '@heroicons/react/24/outline';
+import { copyInvoiceToClipboard, truncateInvoice } from '../_logic/booking';
+import type { LightningInvoice } from '../_types';
+
+interface PayingStepProps {
+  invoice: LightningInvoice;
+  qrCode: string;
+  locale: string;
+}
+
+export function PayingStep({ invoice, qrCode, locale }: PayingStepProps) {
+  return (
+    <div className="section-padding">
+      <div className="container-page max-w-md">
+        <Card className="p-6 text-center">
+          {/* Amount - prominent at top */}
+          <div className="mb-4">
+            {invoice.fiatAmount && invoice.fiatCurrency && (
+              <p className="text-2xl font-bold text-primary-dark">
+                {invoice.fiatAmount.toLocaleString()} {invoice.fiatCurrency}
+              </p>
+            )}
+            <p className="text-orange-600 font-medium">
+              ≈ {invoice.amount.toLocaleString()} sats
+            </p>
+          </div>
+
+          {/* QR Code - clickable to copy */}
+          <div
+            className="bg-white p-4 rounded-lg shadow-inner inline-block mb-4 cursor-pointer hover:shadow-md transition-shadow"
+            onClick={() => copyInvoiceToClipboard(invoice.paymentRequest, locale)}
+            title={locale === 'es' ? 'Clic para copiar' : 'Click to copy'}
+          >
+            <QRCodeSVG
+              value={invoice.paymentRequest.toUpperCase()}
+              size={200}
+              level="M"
+              includeMargin={false}
+            />
+          </div>
+
+          {/* Invoice string - truncated, clickable */}
+          <div
+            className="bg-secondary-gray rounded-lg p-3 mb-4 cursor-pointer hover:bg-gray-200 transition-colors"
+            onClick={() => copyInvoiceToClipboard(invoice.paymentRequest, locale)}
+          >
+            <p className="font-mono text-xs text-gray-600 flex items-center justify-center gap-2">
+              <ClipboardDocumentIcon className="w-4 h-4 flex-shrink-0" />
+              <span className="truncate">{truncateInvoice(invoice.paymentRequest, 16)}</span>
+            </p>
+            <p className="text-xs text-gray-400 mt-1">
+              {locale === 'es' ? 'Toca para copiar' : 'Tap to copy'}
+            </p>
+          </div>
+
+          {/* Open in Wallet - primary action */}
+          <a
+            href={`lightning:${invoice.paymentRequest}`}
+            className="inline-flex items-center justify-center gap-2 w-full px-6 py-3 bg-orange-500 text-white rounded-btn hover:bg-orange-600 transition-colors font-medium mb-4"
+          >
+            <BoltIcon className="w-5 h-5" />
+            {locale === 'es' ? 'Abrir en Billetera' : 'Open in Wallet'}
+          </a>
+
+          {/* Status indicator */}
+          <div className="flex items-center justify-center gap-2 text-gray-500 text-sm">
+            <div className="animate-spin w-3 h-3 border-2 border-orange-400 border-t-transparent rounded-full" />
+            <span>{locale === 'es' ? 'Esperando pago...' : 'Waiting for payment...'}</span>
+          </div>
+
+          {/* Ticket reference - small */}
+          <p className="text-xs text-gray-400 mt-3">
+            {locale === 'es' ? 'Ref' : 'Ref'}: {qrCode}
+          </p>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/src/app/(public)/book/[eventId]/_steps/PendingApprovalStep.tsx

@@ -0,0 +1,76 @@
+import Link from 'next/link';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { ClockIcon, TicketIcon } from '@heroicons/react/24/outline';
+import { Event } from '@/lib/api';
+import type { BookingResult } from '../_types';
+
+interface PendingApprovalStepProps {
+  bookingResult: BookingResult;
+  event: Event | null;
+  locale: string;
+  t: (key: string) => string;
+  formatDate: (dateStr: string) => string;
+  fmtTime: (dateStr: string) => string;
+}
+
+export function PendingApprovalStep({
+  bookingResult,
+  event,
+  locale,
+  t,
+  formatDate,
+  fmtTime,
+}: PendingApprovalStepProps) {
+  return (
+    <div className="section-padding">
+      <div className="container-page max-w-xl">
+        <Card className="p-8 text-center">
+          <div className="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center mx-auto mb-6">
+            <ClockIcon className="w-10 h-10 text-yellow-600" />
+          </div>
+
+          <h1 className="text-2xl font-bold text-primary-dark mb-2">
+            {locale === 'es' ? '¡Pago en Verificación!' : 'Payment Being Verified!'}
+          </h1>
+          <p className="text-gray-600 mb-6">
+            {locale === 'es'
+              ? 'Estamos verificando tu pago. Recibirás un email de confirmación una vez aprobado.'
+              : 'We are verifying your payment. You will receive a confirmation email once approved.'}
+          </p>
+
+          <div className="bg-secondary-gray rounded-lg p-6 mb-6">
+            <div className="flex items-center justify-center gap-2 mb-4">
+              <TicketIcon className="w-6 h-6 text-primary-yellow" />
+              <span className="font-mono text-lg font-bold">{bookingResult.qrCode}</span>
+            </div>
+
+            <div className="text-sm text-gray-600 space-y-2">
+              <p><strong>{t('booking.success.event')}:</strong> {event?.title}</p>
+              <p><strong>{t('booking.success.date')}:</strong> {event && formatDate(event.startDatetime)}</p>
+              <p><strong>{t('booking.success.time')}:</strong> {event && fmtTime(event.startDatetime)}</p>
+              <p><strong>{t('booking.success.location')}:</strong> {event?.location}</p>
+            </div>
+          </div>
+
+          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
+            <p className="text-yellow-800 text-sm">
+              {locale === 'es'
+                ? 'La verificación del pago puede tomar hasta 24 horas hábiles. Por favor revisa tu email regularmente.'
+                : 'Payment verification may take up to 24 business hours. Please check your email regularly.'}
+            </p>
+          </div>
+
+          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+            <Link href="/events">
+              <Button variant="outline">{t('booking.success.browseEvents')}</Button>
+            </Link>
+            <Link href="/">
+              <Button>{t('booking.success.backHome')}</Button>
+            </Link>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/src/app/(public)/book/[eventId]/_steps/SuccessStep.tsx

@@ -0,0 +1,144 @@
+import Link from 'next/link';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import {
+  CheckCircleIcon,
+  TicketIcon,
+  ArrowDownTrayIcon,
+} from '@heroicons/react/24/outline';
+import { Event } from '@/lib/api';
+import { getSuccessContent } from '../_logic/booking';
+import type { BookingResult } from '../_types';
+
+interface SuccessStepProps {
+  bookingResult: BookingResult;
+  event: Event;
+  locale: string;
+  t: (key: string) => string;
+  formatDate: (dateStr: string) => string;
+  fmtTime: (dateStr: string) => string;
+}
+
+export function SuccessStep({
+  bookingResult,
+  event,
+  locale,
+  t,
+  formatDate,
+  fmtTime,
+}: SuccessStepProps) {
+  const successContent = getSuccessContent(bookingResult, locale, t);
+
+  return (
+    <div className="section-padding">
+      <div className="container-page max-w-2xl">
+        <Card className="p-8 text-center">
+          <div className={`w-16 h-16 rounded-full ${successContent.iconColor} flex items-center justify-center mx-auto mb-6`}>
+            <CheckCircleIcon className={`w-10 h-10 ${successContent.iconTextColor}`} />
+          </div>
+
+          <h1 className="text-2xl font-bold text-primary-dark mb-2">
+            {successContent.title}
+          </h1>
+          <p className="text-gray-600 mb-6">
+            {successContent.description}
+          </p>
+
+          <div className="bg-secondary-gray rounded-lg p-6 mb-6">
+            {/* Multi-ticket indicator */}
+            {bookingResult.ticketCount && bookingResult.ticketCount > 1 && (
+              <div className="mb-4 pb-4 border-b border-gray-300">
+                <p className="text-lg font-semibold text-primary-dark">
+                  {locale === 'es'
+                    ? `${bookingResult.ticketCount} tickets reservados`
+                    : `${bookingResult.ticketCount} tickets booked`}
+                </p>
+                <p className="text-sm text-gray-500">
+                  {locale === 'es'
+                    ? 'Cada asistente recibirá su propio código QR'
+                    : 'Each attendee will receive their own QR code'}
+                </p>
+              </div>
+            )}
+
+            <div className="flex items-center justify-center gap-2 mb-4">
+              <TicketIcon className="w-6 h-6 text-primary-yellow" />
+              <span className="font-mono text-lg font-bold">{bookingResult.qrCode}</span>
+              {bookingResult.ticketCount && bookingResult.ticketCount > 1 && (
+                <span className="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded-full">
+                  +{bookingResult.ticketCount - 1} {locale === 'es' ? 'más' : 'more'}
+                </span>
+              )}
+            </div>
+
+            <div className="text-sm text-gray-600 space-y-2">
+              <p><strong>{t('booking.success.event')}:</strong> {event.title}</p>
+              <p><strong>{t('booking.success.date')}:</strong> {formatDate(event.startDatetime)}</p>
+              <p><strong>{t('booking.success.time')}:</strong> {fmtTime(event.startDatetime)}</p>
+              <p><strong>{t('booking.success.location')}:</strong> {event.location}</p>
+            </div>
+          </div>
+
+          {bookingResult.paymentMethod === 'cash' && (
+            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
+              <p className="text-yellow-800 text-sm">
+                <strong>{t('booking.success.cashNote')}:</strong> {t('booking.success.cashDescription')}
+              </p>
+            </div>
+          )}
+
+          {bookingResult.paymentMethod === 'bancard' && (
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+              <p className="text-blue-800 text-sm">
+                {t('booking.success.cardNote')}
+              </p>
+            </div>
+          )}
+
+          {bookingResult.paymentMethod === 'lightning' && (
+            <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
+              <p className="text-green-800 text-sm flex items-center gap-2">
+                <CheckCircleIcon className="w-5 h-5" />
+                {locale === 'es'
+                  ? '¡Pago con Bitcoin Lightning recibido exitosamente!'
+                  : 'Bitcoin Lightning payment received successfully!'}
+              </p>
+            </div>
+          )}
+
+          <p className="text-sm text-gray-500 mb-6">
+            {t('booking.success.emailSent')}
+          </p>
+
+          {/* Download Ticket Button - only for instant confirmation (Lightning) */}
+          {bookingResult.paymentMethod === 'lightning' && (
+            <div className="mb-6">
+              <a
+                href={bookingResult.bookingId
+                  ? `/api/tickets/booking/${bookingResult.bookingId}/pdf`
+                  : `/api/tickets/${bookingResult.ticketId}/pdf`
+                }
+                download
+                className="inline-flex items-center gap-2 px-4 py-2 bg-primary-yellow text-primary-dark font-medium rounded-btn hover:bg-primary-yellow/90 transition-colors"
+              >
+                <ArrowDownTrayIcon className="w-5 h-5" />
+                {locale === 'es'
+                  ? (bookingResult.ticketCount && bookingResult.ticketCount > 1 ? 'Descargar Tickets' : 'Descargar Ticket')
+                  : (bookingResult.ticketCount && bookingResult.ticketCount > 1 ? 'Download Tickets' : 'Download Ticket')}
+              </a>
+            </div>
+          )}
+
+          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+            <Link href="/events">
+              <Button variant="outline">{t('booking.success.browseEvents')}</Button>
+            </Link>
+            <Link href="/">
+              <Button>{t('booking.success.backHome')}</Button>
+            </Link>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/src/app/(public)/book/[eventId]/_types.ts

@@ -0,0 +1,40 @@
+// Shared types for the booking flow.
+
+export interface AttendeeInfo {
+  firstName: string;
+  lastName: string;
+}
+
+export type PaymentMethod = 'bancard' | 'lightning' | 'cash' | 'bank_transfer' | 'tpago';
+
+export interface BookingFormData {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  preferredLanguage: 'en' | 'es';
+  paymentMethod: PaymentMethod;
+  ruc: string;
+}
+
+export interface LightningInvoice {
+  paymentHash: string;
+  paymentRequest: string; // BOLT11 invoice
+  amount: number; // Amount in satoshis
+  fiatAmount?: number; // Original fiat amount
+  fiatCurrency?: string; // Original fiat currency
+  expiry?: string;
+}
+
+export interface BookingResult {
+  ticketId: string;
+  ticketIds?: string[]; // For multi-ticket bookings
+  bookingId?: string;
+  qrCode: string;
+  qrCodes?: string[]; // For multi-ticket bookings
+  paymentMethod: PaymentMethod;
+  lightningInvoice?: LightningInvoice;
+  ticketCount?: number;
+}
+
+export type BookingStep = 'form' | 'paying' | 'manual_payment' | 'pending_approval' | 'success';

frontend/src/app/admin/events/[id]/_components/StatusBadge.tsx

@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+
+export function StatusBadge({ status, compact = false }: { status: string; compact?: boolean }) {
+  const styles: Record<string, string> = {
+    pending: 'bg-yellow-100 text-yellow-800',
+    confirmed: 'bg-green-100 text-green-800',
+    cancelled: 'bg-red-100 text-red-800',
+    checked_in: 'bg-blue-100 text-blue-800',
+  };
+  return (
+    <span className={clsx(
+      'inline-flex items-center rounded-full font-medium',
+      compact ? 'px-1.5 py-0.5 text-[10px]' : 'px-2 py-0.5 text-xs',
+      styles[status] || 'bg-gray-100 text-gray-800'
+    )}>
+      {status.replace('_', ' ')}
+    </span>
+  );
+}

frontend/src/app/admin/events/[id]/_hooks/useEventDetailData.ts

@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react';
+import toast from 'react-hot-toast';
+import { eventsApi, ticketsApi, emailsApi, Event, Ticket, EmailTemplate } from '@/lib/api';
+
+/**
+ * Loads the core data for the admin event detail page (event, tickets, active
+ * email templates) and exposes a reload function used after mutations.
+ */
+export function useEventDetailData(eventId: string) {
+  const [loading, setLoading] = useState(true);
+  const [event, setEvent] = useState<Event | null>(null);
+  const [tickets, setTickets] = useState<Ticket[]>([]);
+  const [templates, setTemplates] = useState<EmailTemplate[]>([]);
+
+  const loadEventData = async () => {
+    try {
+      const [eventRes, ticketsRes, templatesRes] = await Promise.all([
+        eventsApi.getById(eventId),
+        ticketsApi.getAll({ eventId }),
+        emailsApi.getTemplates(),
+      ]);
+      setEvent(eventRes.event);
+      setTickets(ticketsRes.tickets);
+      setTemplates(templatesRes.templates.filter(t => t.isActive));
+    } catch (error) {
+      toast.error('Failed to load event data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadEventData();
+  }, [eventId]);
+
+  return { loading, event, tickets, templates, loadEventData };
+}

frontend/src/app/admin/events/[id]/_hooks/usePaymentOverrides.ts

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { paymentOptionsApi, PaymentOptionsConfig } from '@/lib/api';
+
+/**
+ * Manages the event-level payment override editor state: loading global +
+ * override config, computing effective values, editing, saving and resetting.
+ */
+export function usePaymentOverrides(eventId: string, locale: string) {
+  const [globalPaymentOptions, setGlobalPaymentOptions] = useState<PaymentOptionsConfig | null>(null);
+  const [paymentOverrides, setPaymentOverrides] = useState<Partial<PaymentOptionsConfig>>({});
+  const [hasPaymentOverrides, setHasPaymentOverrides] = useState(false);
+  const [savingPayments, setSavingPayments] = useState(false);
+  const [loadingPayments, setLoadingPayments] = useState(false);
+
+  const loadPaymentOptions = async () => {
+    if (globalPaymentOptions) return;
+    setLoadingPayments(true);
+    try {
+      const [globalRes, overridesRes] = await Promise.all([
+        paymentOptionsApi.getGlobal(),
+        paymentOptionsApi.getEventOverrides(eventId),
+      ]);
+      setGlobalPaymentOptions(globalRes.paymentOptions);
+      if (overridesRes.overrides) {
+        setPaymentOverrides(overridesRes.overrides);
+        setHasPaymentOverrides(true);
+      }
+    } catch (error) {
+      toast.error('Failed to load payment options');
+    } finally {
+      setLoadingPayments(false);
+    }
+  };
+
+  const getEffectivePaymentOption = <K extends keyof PaymentOptionsConfig>(key: K): PaymentOptionsConfig[K] => {
+    if (paymentOverrides[key] !== undefined && paymentOverrides[key] !== null) {
+      return paymentOverrides[key] as PaymentOptionsConfig[K];
+    }
+    return globalPaymentOptions?.[key] as PaymentOptionsConfig[K];
+  };
+
+  const updatePaymentOverride = <K extends keyof PaymentOptionsConfig>(
+    key: K,
+    value: PaymentOptionsConfig[K] | null
+  ) => {
+    setPaymentOverrides((prev) => ({ ...prev, [key]: value }));
+    setHasPaymentOverrides(true);
+  };
+
+  const handleSavePaymentOptions = async () => {
+    setSavingPayments(true);
+    try {
+      await paymentOptionsApi.updateEventOverrides(eventId, paymentOverrides);
+      toast.success(locale === 'es' ? 'Opciones de pago guardadas' : 'Payment options saved');
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to save payment options');
+    } finally {
+      setSavingPayments(false);
+    }
+  };
+
+  const handleResetToGlobal = async () => {
+    if (!confirm(locale === 'es'
+      ? '¿Resetear a la configuración global? Se eliminarán todas las personalizaciones de este evento.'
+      : 'Reset to global settings? This will remove all customizations for this event.')) {
+      return;
+    }
+    setSavingPayments(true);
+    try {
+      await paymentOptionsApi.deleteEventOverrides(eventId);
+      setPaymentOverrides({});
+      setHasPaymentOverrides(false);
+      toast.success(locale === 'es' ? 'Restablecido a configuración global' : 'Reset to global settings');
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to reset payment options');
+    } finally {
+      setSavingPayments(false);
+    }
+  };
+
+  return {
+    globalPaymentOptions,
+    paymentOverrides,
+    hasPaymentOverrides,
+    savingPayments,
+    loadingPayments,
+    loadPaymentOptions,
+    getEffectivePaymentOption,
+    updatePaymentOverride,
+    handleSavePaymentOptions,
+    handleResetToGlobal,
+  };
+}
+
+export type PaymentOverridesController = ReturnType<typeof usePaymentOverrides>;

frontend/src/app/admin/events/[id]/_modals/EventModals.tsx

@@ -0,0 +1,521 @@
+import type { Dispatch, FormEvent, SetStateAction } from 'react';
+import { Ticket } from '@/lib/api';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { BottomSheet } from '@/components/admin/MobileComponents';
+import clsx from 'clsx';
+import {
+  CheckCircleIcon,
+  EnvelopeIcon,
+  PlusIcon,
+  StarIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/outline';
+import type { AttendeeStatusFilter, AttendeeFormState, AddAtDoorFormState } from '../_types';
+
+interface EventModalsProps {
+  // counts + filter
+  ticketsCount: number;
+  pendingCount: number;
+  confirmedCount: number;
+  checkedInCount: number;
+  cancelledCount: number;
+  statusFilter: AttendeeStatusFilter;
+  setStatusFilter: (value: AttendeeStatusFilter) => void;
+  // mobile filter sheet
+  mobileFilterOpen: boolean;
+  setMobileFilterOpen: (value: boolean) => void;
+  // add ticket sheet
+  showAddTicketSheet: boolean;
+  setShowAddTicketSheet: (value: boolean) => void;
+  // export sheets
+  showExportSheet: boolean;
+  setShowExportSheet: (value: boolean) => void;
+  handleExportAttendees: (status: 'confirmed' | 'checked_in' | 'confirmed_pending' | 'all') => void;
+  showTicketExportSheet: boolean;
+  setShowTicketExportSheet: (value: boolean) => void;
+  handleExportTickets: (status: 'confirmed' | 'checked_in' | 'all') => void;
+  // add at door
+  showAddAtDoorModal: boolean;
+  setShowAddAtDoorModal: (value: boolean) => void;
+  addAtDoorForm: AddAtDoorFormState;
+  setAddAtDoorForm: Dispatch<SetStateAction<AddAtDoorFormState>>;
+  handleAddAtDoor: (e: FormEvent) => void;
+  // manual ticket
+  showManualTicketModal: boolean;
+  setShowManualTicketModal: (value: boolean) => void;
+  manualTicketForm: AttendeeFormState;
+  setManualTicketForm: Dispatch<SetStateAction<AttendeeFormState>>;
+  handleManualTicket: (e: FormEvent) => void;
+  // invite guest
+  showInviteGuestModal: boolean;
+  setShowInviteGuestModal: (value: boolean) => void;
+  inviteGuestForm: AttendeeFormState;
+  setInviteGuestForm: Dispatch<SetStateAction<AttendeeFormState>>;
+  handleInviteGuest: (e: FormEvent) => void;
+  // shared submit flag
+  submitting: boolean;
+  // note modal
+  showNoteModal: boolean;
+  setShowNoteModal: (value: boolean) => void;
+  selectedTicket: Ticket | null;
+  setSelectedTicket: (value: Ticket | null) => void;
+  noteText: string;
+  setNoteText: (value: string) => void;
+  handleSaveNote: () => void;
+  // preview modal
+  previewHtml: string | null;
+  setPreviewHtml: (value: string | null) => void;
+}
+
+export function EventModals(props: EventModalsProps) {
+  const {
+    ticketsCount,
+    pendingCount,
+    confirmedCount,
+    checkedInCount,
+    cancelledCount,
+    statusFilter,
+    setStatusFilter,
+    mobileFilterOpen,
+    setMobileFilterOpen,
+    showAddTicketSheet,
+    setShowAddTicketSheet,
+    showExportSheet,
+    setShowExportSheet,
+    handleExportAttendees,
+    showTicketExportSheet,
+    setShowTicketExportSheet,
+    handleExportTickets,
+    showAddAtDoorModal,
+    setShowAddAtDoorModal,
+    addAtDoorForm,
+    setAddAtDoorForm,
+    handleAddAtDoor,
+    showManualTicketModal,
+    setShowManualTicketModal,
+    manualTicketForm,
+    setManualTicketForm,
+    handleManualTicket,
+    showInviteGuestModal,
+    setShowInviteGuestModal,
+    inviteGuestForm,
+    setInviteGuestForm,
+    handleInviteGuest,
+    submitting,
+    showNoteModal,
+    setShowNoteModal,
+    selectedTicket,
+    setSelectedTicket,
+    noteText,
+    setNoteText,
+    handleSaveNote,
+    previewHtml,
+    setPreviewHtml,
+  } = props;
+
+  return (
+    <>
+      {/* Mobile filter bottom sheet */}
+      <BottomSheet
+        open={mobileFilterOpen}
+        onClose={() => setMobileFilterOpen(false)}
+        title="Filter by Status"
+      >
+        <div className="space-y-1">
+          {[
+            { value: 'all', label: `All (${ticketsCount})` },
+            { value: 'pending', label: `Pending (${pendingCount})` },
+            { value: 'confirmed', label: `Confirmed (${confirmedCount})` },
+            { value: 'checked_in', label: `Checked In (${checkedInCount})` },
+            { value: 'cancelled', label: `Cancelled (${cancelledCount})` },
+          ].map((option) => (
+            <button
+              key={option.value}
+              onClick={() => { setStatusFilter(option.value as AttendeeStatusFilter); setMobileFilterOpen(false); }}
+              className={clsx(
+                'w-full text-left px-4 py-3 rounded-btn text-sm min-h-[44px] flex items-center justify-between',
+                statusFilter === option.value ? 'bg-yellow-50 text-primary-dark font-medium' : 'hover:bg-gray-50'
+              )}
+            >
+              {option.label}
+              {statusFilter === option.value && <CheckCircleIcon className="w-4 h-4 text-primary-yellow" />}
+            </button>
+          ))}
+        </div>
+      </BottomSheet>
+
+      {/* Mobile FAB bottom sheet */}
+      <BottomSheet
+        open={showAddTicketSheet}
+        onClose={() => setShowAddTicketSheet(false)}
+        title="Add Ticket"
+      >
+        <div className="space-y-1">
+          <button
+            onClick={() => { setShowManualTicketModal(true); setShowAddTicketSheet(false); }}
+            className="w-full text-left px-4 py-3 rounded-btn text-sm hover:bg-gray-50 min-h-[44px] flex items-center gap-3"
+          >
+            <EnvelopeIcon className="w-5 h-5 text-gray-500" />
+            <div>
+              <p className="font-medium">Manual Ticket</p>
+              <p className="text-xs text-gray-500">Send confirmation email with ticket</p>
+            </div>
+          </button>
+          <button
+            onClick={() => { setShowAddAtDoorModal(true); setShowAddTicketSheet(false); }}
+            className="w-full text-left px-4 py-3 rounded-btn text-sm hover:bg-gray-50 min-h-[44px] flex items-center gap-3"
+          >
+            <PlusIcon className="w-5 h-5 text-gray-500" />
+            <div>
+              <p className="font-medium">Add at Door</p>
+              <p className="text-xs text-gray-500">Quick add with optional auto check-in</p>
+            </div>
+          </button>
+          <button
+            onClick={() => { setShowInviteGuestModal(true); setShowAddTicketSheet(false); }}
+            className="w-full text-left px-4 py-3 rounded-btn text-sm hover:bg-gray-50 min-h-[44px] flex items-center gap-3"
+          >
+            <StarIcon className="w-5 h-5 text-gray-500" />
+            <div>
+              <p className="font-medium">Invite Guest</p>
+              <p className="text-xs text-gray-500">Free ticket, not counted in revenue</p>
+            </div>
+          </button>
+        </div>
+      </BottomSheet>
+
+      {/* Mobile export bottom sheet (attendees) */}
+      <BottomSheet
+        open={showExportSheet}
+        onClose={() => setShowExportSheet(false)}
+        title="Export Attendees"
+      >
+        <div className="space-y-1">
+          {[
+            { status: 'all' as const, label: 'Export All' },
+            { status: 'confirmed' as const, label: 'Export Confirmed' },
+            { status: 'checked_in' as const, label: 'Export Checked-in' },
+            { status: 'confirmed_pending' as const, label: 'Confirmed & Pending' },
+          ].map((opt) => (
+            <button
+              key={opt.status}
+              onClick={() => { handleExportAttendees(opt.status); setShowExportSheet(false); }}
+              className="w-full text-left px-4 py-3 rounded-btn text-sm hover:bg-gray-50 min-h-[44px]"
+            >
+              {opt.label}
+            </button>
+          ))}
+          <p className="text-[10px] text-gray-400 px-4 pt-2">Format: CSV</p>
+        </div>
+      </BottomSheet>
+
+      {/* Mobile export bottom sheet (tickets) */}
+      <BottomSheet
+        open={showTicketExportSheet}
+        onClose={() => setShowTicketExportSheet(false)}
+        title="Export Tickets"
+      >
+        <div className="space-y-1">
+          {[
+            { status: 'all' as const, label: 'Export All' },
+            { status: 'confirmed' as const, label: 'Export Valid' },
+            { status: 'checked_in' as const, label: 'Export Checked-in' },
+          ].map((opt) => (
+            <button
+              key={opt.status}
+              onClick={() => { handleExportTickets(opt.status); setShowTicketExportSheet(false); }}
+              className="w-full text-left px-4 py-3 rounded-btn text-sm hover:bg-gray-50 min-h-[44px]"
+            >
+              {opt.label}
+            </button>
+          ))}
+          <p className="text-[10px] text-gray-400 px-4 pt-2">Format: CSV</p>
+        </div>
+      </BottomSheet>
+
+      {/* Add at Door Modal */}
+      {showAddAtDoorModal && (
+        <div
+          className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4"
+          onClick={() => setShowAddAtDoorModal(false)}
+          role="presentation"
+        >
+          <Card
+            className="w-full md:max-w-md max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray flex-shrink-0">
+              <h2 className="text-base font-bold">Add Attendee at Door</h2>
+              <button
+                onClick={() => setShowAddAtDoorModal(false)}
+                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center"
+              >
+                <XMarkIcon className="w-5 h-5" />
+              </button>
+            </div>
+            <form onSubmit={handleAddAtDoor} className="p-4 space-y-3 overflow-y-auto flex-1 min-h-0">
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-medium mb-1">First Name *</label>
+                  <input type="text" required value={addAtDoorForm.firstName}
+                    onChange={(e) => setAddAtDoorForm({ ...addAtDoorForm, firstName: e.target.value })}
+                    className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                    placeholder="First name" />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium mb-1">Last Name</label>
+                  <input type="text" value={addAtDoorForm.lastName}
+                    onChange={(e) => setAddAtDoorForm({ ...addAtDoorForm, lastName: e.target.value })}
+                    className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                    placeholder="Last name" />
+                </div>
+              </div>
+              <div>
+                <label className="block text-xs font-medium mb-1">Email</label>
+                <input type="email" value={addAtDoorForm.email}
+                  onChange={(e) => setAddAtDoorForm({ ...addAtDoorForm, email: e.target.value })}
+                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                  placeholder="email@example.com" />
+              </div>
+              <div>
+                <label className="block text-xs font-medium mb-1">Phone</label>
+                <input type="tel" value={addAtDoorForm.phone}
+                  onChange={(e) => setAddAtDoorForm({ ...addAtDoorForm, phone: e.target.value })}
+                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                  placeholder="+595 981 123456" />
+              </div>
+              <div>
+                <label className="block text-xs font-medium mb-1">Admin Note</label>
+                <textarea value={addAtDoorForm.adminNote}
+                  onChange={(e) => setAddAtDoorForm({ ...addAtDoorForm, adminNote: e.target.value })}
+                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                  rows={2} placeholder="Internal note..." />
+              </div>
+              <div className="flex items-center gap-3">
+                <input type="checkbox" id="autoCheckin" checked={addAtDoorForm.autoCheckin}
+                  onChange={(e) => setAddAtDoorForm({ ...addAtDoorForm, autoCheckin: e.target.checked })}
+                  className="w-4 h-4 rounded border-secondary-light-gray text-primary-yellow focus:ring-primary-yellow" />
+                <label htmlFor="autoCheckin" className="text-sm font-medium">Auto check-in immediately</label>
+              </div>
+              <div className="flex gap-3 pt-2">
+                <Button type="button" variant="outline" onClick={() => setShowAddAtDoorModal(false)} className="flex-1 min-h-[44px]">Cancel</Button>
+                <Button type="submit" isLoading={submitting} className="flex-1 min-h-[44px]">Add Attendee</Button>
+              </div>
+            </form>
+          </Card>
+        </div>
+      )}
+
+      {/* Manual Ticket Modal */}
+      {showManualTicketModal && (
+        <div
+          className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4"
+          onClick={() => setShowManualTicketModal(false)}
+          role="presentation"
+        >
+          <Card
+            className="w-full md:max-w-md max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray flex-shrink-0">
+              <div>
+                <h2 className="text-base font-bold">Create Manual Ticket</h2>
+                <p className="text-xs text-gray-500">Confirmation email will be sent</p>
+              </div>
+              <button onClick={() => setShowManualTicketModal(false)}
+                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
+                <XMarkIcon className="w-5 h-5" />
+              </button>
+            </div>
+            <form onSubmit={handleManualTicket} className="p-4 space-y-3 overflow-y-auto flex-1 min-h-0">
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-medium mb-1">First Name *</label>
+                  <input type="text" required value={manualTicketForm.firstName}
+                    onChange={(e) => setManualTicketForm({ ...manualTicketForm, firstName: e.target.value })}
+                    className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                    placeholder="First name" />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium mb-1">Last Name</label>
+                  <input type="text" value={manualTicketForm.lastName}
+                    onChange={(e) => setManualTicketForm({ ...manualTicketForm, lastName: e.target.value })}
+                    className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                    placeholder="Last name" />
+                </div>
+              </div>
+              <div>
+                <label className="block text-xs font-medium mb-1">Email *</label>
+                <input type="email" required value={manualTicketForm.email}
+                  onChange={(e) => setManualTicketForm({ ...manualTicketForm, email: e.target.value })}
+                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                  placeholder="email@example.com" />
+                <p className="text-[10px] text-gray-500 mt-1">Ticket will be sent to this email</p>
+              </div>
+              <div>
+                <label className="block text-xs font-medium mb-1">Phone</label>
+                <input type="tel" value={manualTicketForm.phone}
+                  onChange={(e) => setManualTicketForm({ ...manualTicketForm, phone: e.target.value })}
+                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                  placeholder="+595 981 123456" />
+              </div>
+              <div>
+                <label className="block text-xs font-medium mb-1">Admin Note</label>
+                <textarea value={manualTicketForm.adminNote}
+                  onChange={(e) => setManualTicketForm({ ...manualTicketForm, adminNote: e.target.value })}
+                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                  rows={2} placeholder="Internal note..." />
+              </div>
+              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                <div className="flex items-start gap-2">
+                  <EnvelopeIcon className="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" />
+                  <div className="text-xs text-blue-800">
+                    <p className="font-medium">This will send:</p>
+                    <ul className="list-disc ml-4 mt-0.5 space-y-0.5">
+                      <li>Booking confirmation email</li>
+                      <li>Ticket with QR code</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div className="flex gap-3 pt-2">
+                <Button type="button" variant="outline" onClick={() => setShowManualTicketModal(false)} className="flex-1 min-h-[44px]">Cancel</Button>
+                <Button type="submit" isLoading={submitting} className="flex-1 min-h-[44px]">
+                  <EnvelopeIcon className="w-4 h-4 mr-1.5" />
+                  Create & Send
+                </Button>
+              </div>
+            </form>
+          </Card>
+        </div>
+      )}
+
+      {/* Invite Guest Modal */}
+      {showInviteGuestModal && (
+        <div
+          className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4"
+          onClick={() => setShowInviteGuestModal(false)}
+          role="presentation"
+        >
+          <Card
+            className="w-full md:max-w-md max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray flex-shrink-0">
+              <div>
+                <h2 className="text-base font-bold">Invite Guest</h2>
+                <p className="text-xs text-gray-500">Free ticket — not counted in revenue</p>
+              </div>
+              <button onClick={() => setShowInviteGuestModal(false)}
+                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
+                <XMarkIcon className="w-5 h-5" />
+              </button>
+            </div>
+            <form onSubmit={handleInviteGuest} className="p-4 space-y-3 overflow-y-auto flex-1 min-h-0">
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-medium mb-1">First Name *</label>
+                  <input type="text" required value={inviteGuestForm.firstName}
+                    onChange={(e) => setInviteGuestForm({ ...inviteGuestForm, firstName: e.target.value })}
+                    className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                    placeholder="First name" />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium mb-1">Last Name</label>
+                  <input type="text" value={inviteGuestForm.lastName}
+                    onChange={(e) => setInviteGuestForm({ ...inviteGuestForm, lastName: e.target.value })}
+                    className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                    placeholder="Last name" />
+                </div>
+              </div>
+              <div>
+                <label className="block text-xs font-medium mb-1">Email</label>
+                <input type="email" value={inviteGuestForm.email}
+                  onChange={(e) => setInviteGuestForm({ ...inviteGuestForm, email: e.target.value })}
+                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                  placeholder="email@example.com (optional)" />
+                <p className="text-[10px] text-gray-500 mt-1">If provided, a confirmation email will be sent</p>
+              </div>
+              <div>
+                <label className="block text-xs font-medium mb-1">Phone</label>
+                <input type="tel" value={inviteGuestForm.phone}
+                  onChange={(e) => setInviteGuestForm({ ...inviteGuestForm, phone: e.target.value })}
+                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                  placeholder="+595 981 123456" />
+              </div>
+              <div>
+                <label className="block text-xs font-medium mb-1">Admin Note</label>
+                <textarea value={inviteGuestForm.adminNote}
+                  onChange={(e) => setInviteGuestForm({ ...inviteGuestForm, adminNote: e.target.value })}
+                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                  rows={2} placeholder="Internal note..." />
+              </div>
+              <div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
+                <div className="flex items-start gap-2">
+                  <StarIcon className="w-4 h-4 text-amber-500 mt-0.5 flex-shrink-0" />
+                  <p className="text-xs text-amber-800">
+                    Guest tickets are <strong>free</strong> and are automatically confirmed. They are not counted toward revenue or paid ticket totals.
+                  </p>
+                </div>
+              </div>
+              <div className="flex gap-3 pt-2">
+                <Button type="button" variant="outline" onClick={() => setShowInviteGuestModal(false)} className="flex-1 min-h-[44px]">Cancel</Button>
+                <Button type="submit" isLoading={submitting} className="flex-1 min-h-[44px]">
+                  <StarIcon className="w-4 h-4 mr-1.5" />
+                  Invite Guest
+                </Button>
+              </div>
+            </form>
+          </Card>
+        </div>
+      )}
+
+      {/* Note Modal */}
+      {showNoteModal && selectedTicket && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
+          <Card className="w-full md:max-w-md rounded-t-2xl md:rounded-card">
+            <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray">
+              <div>
+                <h2 className="text-base font-bold">Admin Note</h2>
+                <p className="text-xs text-gray-500">{selectedTicket.attendeeFirstName} {selectedTicket.attendeeLastName || ''}</p>
+              </div>
+              <button onClick={() => { setShowNoteModal(false); setSelectedTicket(null); }}
+                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
+                <XMarkIcon className="w-5 h-5" />
+              </button>
+            </div>
+            <div className="p-4 space-y-3">
+              <div>
+                <label className="block text-xs font-medium mb-1">Note</label>
+                <textarea value={noteText} onChange={(e) => setNoteText(e.target.value)}
+                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                  rows={4} placeholder="Add a private note..." maxLength={1000} />
+                <p className="text-[10px] text-gray-400 mt-1 text-right">{noteText.length}/1000</p>
+              </div>
+              <div className="flex gap-3">
+                <Button variant="outline" onClick={() => { setShowNoteModal(false); setSelectedTicket(null); }} className="flex-1 min-h-[44px]">Cancel</Button>
+                <Button onClick={handleSaveNote} isLoading={submitting} className="flex-1 min-h-[44px]">Save Note</Button>
+              </div>
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {/* Preview Modal */}
+      {previewHtml && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+          <Card className="w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
+            <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray">
+              <h2 className="text-base font-bold">Email Preview</h2>
+              <Button variant="outline" size="sm" onClick={() => setPreviewHtml(null)} className="min-h-[44px] md:min-h-0">Close</Button>
+            </div>
+            <div className="flex-1 overflow-auto">
+              <iframe srcDoc={previewHtml} sandbox="" className="w-full h-full min-h-[500px]" title="Email Preview" />
+            </div>
+          </Card>
+        </div>
+      )}
+    </>
+  );
+}

frontend/src/app/admin/events/[id]/_tabs/AttendeesTab.tsx

@@ -0,0 +1,355 @@
+import { Ticket } from '@/lib/api';
+import { parseDate, EVENT_TIMEZONE } from '@/lib/utils';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { Dropdown, DropdownItem, MoreMenu } from '@/components/admin/MobileComponents';
+import clsx from 'clsx';
+import {
+  MagnifyingGlassIcon,
+  ChevronDownIcon,
+  ArrowDownTrayIcon,
+  PlusIcon,
+  EnvelopeIcon,
+  StarIcon,
+  FunnelIcon,
+  ChatBubbleLeftIcon,
+} from '@heroicons/react/24/outline';
+import { StatusBadge } from '../_components/StatusBadge';
+import type { AttendeeStatusFilter, PrimaryAction } from '../_types';
+
+interface AttendeesTabProps {
+  locale: string;
+  tickets: Ticket[];
+  filteredTickets: Ticket[];
+  searchQuery: string;
+  setSearchQuery: (value: string) => void;
+  statusFilter: AttendeeStatusFilter;
+  setStatusFilter: (value: AttendeeStatusFilter) => void;
+  pendingCount: number;
+  confirmedCount: number;
+  checkedInCount: number;
+  cancelledCount: number;
+  exporting: boolean;
+  showExportDropdown: boolean;
+  setShowExportDropdown: (value: boolean) => void;
+  showAddTicketDropdown: boolean;
+  setShowAddTicketDropdown: (value: boolean) => void;
+  handleExportAttendees: (status: 'confirmed' | 'checked_in' | 'confirmed_pending' | 'all') => void;
+  setShowManualTicketModal: (value: boolean) => void;
+  setShowAddAtDoorModal: (value: boolean) => void;
+  setShowInviteGuestModal: (value: boolean) => void;
+  setMobileFilterOpen: (value: boolean) => void;
+  setShowExportSheet: (value: boolean) => void;
+  setShowAddTicketSheet: (value: boolean) => void;
+  getPrimaryAction: (ticket: Ticket) => PrimaryAction | null;
+  handleOpenNoteModal: (ticket: Ticket) => void;
+}
+
+export function AttendeesTab({
+  locale,
+  tickets,
+  filteredTickets,
+  searchQuery,
+  setSearchQuery,
+  statusFilter,
+  setStatusFilter,
+  pendingCount,
+  confirmedCount,
+  checkedInCount,
+  cancelledCount,
+  exporting,
+  showExportDropdown,
+  setShowExportDropdown,
+  showAddTicketDropdown,
+  setShowAddTicketDropdown,
+  handleExportAttendees,
+  setShowManualTicketModal,
+  setShowAddAtDoorModal,
+  setShowInviteGuestModal,
+  setMobileFilterOpen,
+  setShowExportSheet,
+  setShowAddTicketSheet,
+  getPrimaryAction,
+  handleOpenNoteModal,
+}: AttendeesTabProps) {
+  return (
+    <div className="space-y-3">
+      {/* Desktop toolbar */}
+      <Card className="p-3 hidden md:block">
+        <div className="flex items-center gap-3">
+          {/* Left: Search + Status */}
+          <div className="relative flex-1 max-w-sm">
+            <MagnifyingGlassIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+            <input
+              type="text"
+              placeholder="Search name, email, phone..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-9 pr-3 py-1.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+            />
+          </div>
+          <select
+            value={statusFilter}
+            onChange={(e) => setStatusFilter(e.target.value as AttendeeStatusFilter)}
+            className="px-3 py-1.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+          >
+            <option value="all">All ({tickets.length})</option>
+            <option value="pending">Pending ({pendingCount})</option>
+            <option value="confirmed">Confirmed ({confirmedCount})</option>
+            <option value="checked_in">Checked In ({checkedInCount})</option>
+            <option value="cancelled">Cancelled ({cancelledCount})</option>
+          </select>
+
+          <div className="flex-1" />
+
+          {/* Right: Export + Add Ticket dropdown */}
+          <Dropdown
+            open={showExportDropdown}
+            onOpenChange={setShowExportDropdown}
+            trigger={
+              <Button variant="outline" size="sm" disabled={exporting}>
+                {exporting ? (
+                  <div className="w-3.5 h-3.5 mr-1.5 border-2 border-gray-400 border-t-transparent rounded-full animate-spin" />
+                ) : (
+                  <ArrowDownTrayIcon className="w-3.5 h-3.5 mr-1.5" />
+                )}
+                Export
+                <ChevronDownIcon className="w-3 h-3 ml-1" />
+              </Button>
+            }
+          >
+            <DropdownItem onClick={() => handleExportAttendees('all')}>Export All</DropdownItem>
+            <DropdownItem onClick={() => handleExportAttendees('confirmed')}>Export Confirmed</DropdownItem>
+            <DropdownItem onClick={() => handleExportAttendees('checked_in')}>Export Checked-in</DropdownItem>
+            <DropdownItem onClick={() => handleExportAttendees('confirmed_pending')}>Confirmed &amp; Pending</DropdownItem>
+            <div className="border-t border-gray-100 mx-2" />
+            <div className="px-4 py-1.5 text-[10px] text-gray-400">Format: CSV</div>
+          </Dropdown>
+
+          <Dropdown
+            open={showAddTicketDropdown}
+            onOpenChange={setShowAddTicketDropdown}
+            trigger={
+              <Button size="sm">
+                <PlusIcon className="w-3.5 h-3.5 mr-1.5" />
+                Add Ticket
+                <ChevronDownIcon className="w-3 h-3 ml-1" />
+              </Button>
+            }
+          >
+            <DropdownItem onClick={() => { setShowManualTicketModal(true); setShowAddTicketDropdown(false); }}>
+              <EnvelopeIcon className="w-4 h-4 mr-2" /> Manual Ticket
+            </DropdownItem>
+            <DropdownItem onClick={() => { setShowAddAtDoorModal(true); setShowAddTicketDropdown(false); }}>
+              <PlusIcon className="w-4 h-4 mr-2" /> Add at Door
+            </DropdownItem>
+            <DropdownItem onClick={() => { setShowInviteGuestModal(true); setShowAddTicketDropdown(false); }}>
+              <StarIcon className="w-4 h-4 mr-2" /> Invite Guest
+            </DropdownItem>
+          </Dropdown>
+        </div>
+        {(searchQuery || statusFilter !== 'all') && (
+          <div className="mt-2 text-xs text-gray-500 flex items-center gap-2">
+            <span>Showing {filteredTickets.length} of {tickets.length}</span>
+            <button onClick={() => { setSearchQuery(''); setStatusFilter('all'); }} className="text-primary-yellow hover:underline">
+              Clear
+            </button>
+          </div>
+        )}
+      </Card>
+
+      {/* Mobile toolbar */}
+      <div className="md:hidden space-y-2">
+        <div className="relative">
+          <MagnifyingGlassIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+          <input
+            type="text"
+            placeholder="Search name, email, phone..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-9 pr-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setMobileFilterOpen(true)}
+            className={clsx(
+              'flex items-center gap-1.5 px-3 py-2 rounded-btn border text-sm min-h-[44px]',
+              statusFilter !== 'all'
+                ? 'border-primary-yellow bg-yellow-50 text-primary-dark'
+                : 'border-secondary-light-gray text-gray-600'
+            )}
+          >
+            <FunnelIcon className="w-4 h-4" />
+            {statusFilter === 'all' ? 'Filter' : statusFilter.replace('_', ' ')}
+          </button>
+          <button
+            onClick={() => setShowExportSheet(true)}
+            disabled={exporting}
+            className="flex items-center gap-1.5 px-3 py-2 rounded-btn border border-secondary-light-gray text-sm text-gray-600 min-h-[44px]"
+          >
+            <ArrowDownTrayIcon className="w-4 h-4" />
+            Export
+          </button>
+          {(searchQuery || statusFilter !== 'all') && (
+            <button
+              onClick={() => { setSearchQuery(''); setStatusFilter('all'); }}
+              className="text-xs text-primary-yellow ml-auto min-h-[44px] flex items-center"
+            >
+              Clear
+            </button>
+          )}
+        </div>
+        {(searchQuery || statusFilter !== 'all') && (
+          <p className="text-xs text-gray-500">Showing {filteredTickets.length} of {tickets.length}</p>
+        )}
+      </div>
+
+      {/* Desktop: Dense table */}
+      <Card className="overflow-hidden hidden md:block">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Attendee</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Booked</th>
+                <th className="text-right px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {filteredTickets.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="px-4 py-10 text-center text-gray-500 text-sm">
+                    {tickets.length === 0 ? 'No attendees yet' : 'No attendees match the current filters'}
+                  </td>
+                </tr>
+              ) : (
+                filteredTickets.map((ticket) => {
+                  const primary = getPrimaryAction(ticket);
+                  return (
+                    <tr key={ticket.id} className="hover:bg-gray-50/50">
+                      <td className="px-4 py-2.5">
+                        <p className="font-medium text-sm">{ticket.attendeeFirstName} {ticket.attendeeLastName || ''}</p>
+                        {ticket.bookingId && (
+                          <span className="text-[10px] text-purple-600" title={`Booking: ${ticket.bookingId}`}>
+                            Group booking
+                          </span>
+                        )}
+                      </td>
+                      <td className="px-4 py-2.5">
+                        <p className="text-sm text-gray-600 truncate max-w-[200px]">{ticket.attendeeEmail}</p>
+                        {ticket.attendeePhone && <p className="text-xs text-gray-400">{ticket.attendeePhone}</p>}
+                      </td>
+                      <td className="px-4 py-2.5">
+                        <div className="flex items-center gap-1 flex-wrap">
+                          <StatusBadge status={ticket.status} compact />
+                          {!!ticket.isGuest && (
+                            <span className="px-1.5 py-0.5 text-[10px] rounded-full bg-amber-100 text-amber-700 font-medium">Guest</span>
+                          )}
+                        </div>
+                        {ticket.checkinAt && (
+                          <p className="text-[10px] text-gray-400 mt-0.5">
+                            {parseDate(ticket.checkinAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: EVENT_TIMEZONE })}
+                          </p>
+                        )}
+                      </td>
+                      <td className="px-4 py-2.5 text-xs text-gray-500">
+                        {parseDate(ticket.createdAt).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', { timeZone: EVENT_TIMEZONE })}
+                      </td>
+                      <td className="px-4 py-2.5">
+                        <div className="flex items-center justify-end gap-1">
+                          {primary && (
+                            <Button size="sm" variant={primary.variant} onClick={primary.onClick} className="text-xs px-2 py-1">
+                              {primary.icon && <primary.icon className="w-3 h-3 mr-1" />}
+                              {primary.label}
+                            </Button>
+                          )}
+                          <MoreMenu>
+                            <DropdownItem onClick={() => handleOpenNoteModal(ticket)}>
+                              <ChatBubbleLeftIcon className="w-4 h-4 mr-2" />
+                              {ticket.adminNote ? 'Edit Note' : 'Add Note'}
+                            </DropdownItem>
+                            {ticket.adminNote && (
+                              <div className="px-4 py-1.5 text-[10px] text-gray-400 truncate max-w-[180px]">
+                                Note: {ticket.adminNote}
+                              </div>
+                            )}
+                            <div className="px-4 py-1.5 text-[10px] text-gray-400 font-mono" title={ticket.id}>
+                              ID: {ticket.id.slice(0, 8)}...
+                            </div>
+                          </MoreMenu>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+
+      {/* Mobile: Card layout */}
+      <div className="md:hidden space-y-2">
+        {filteredTickets.length === 0 ? (
+          <div className="text-center py-10 text-gray-500 text-sm">
+            {tickets.length === 0 ? 'No attendees yet' : 'No attendees match the current filters'}
+          </div>
+        ) : (
+          filteredTickets.map((ticket) => {
+            const primary = getPrimaryAction(ticket);
+            return (
+              <Card key={ticket.id} className="p-3">
+                <div className="flex items-start justify-between gap-2">
+                  <div className="min-w-0 flex-1">
+                    <p className="font-medium text-sm truncate">{ticket.attendeeFirstName} {ticket.attendeeLastName || ''}</p>
+                    <p className="text-xs text-gray-500 truncate">{ticket.attendeeEmail}</p>
+                    {ticket.attendeePhone && <p className="text-[10px] text-gray-400">{ticket.attendeePhone}</p>}
+                  </div>
+                  <div className="flex items-center gap-1.5 flex-shrink-0 flex-wrap justify-end">
+                    <StatusBadge status={ticket.status} compact />
+                    {!!ticket.isGuest && (
+                      <span className="px-1.5 py-0.5 text-[10px] rounded-full bg-amber-100 text-amber-700 font-medium">Guest</span>
+                    )}
+                  </div>
+                </div>
+                <div className="flex items-center justify-between mt-2 pt-2 border-t border-gray-100">
+                  <p className="text-[10px] text-gray-400">
+                    {parseDate(ticket.createdAt).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', { timeZone: EVENT_TIMEZONE })}
+                    {ticket.checkinAt && ` · Checked in ${parseDate(ticket.checkinAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: EVENT_TIMEZONE })}`}
+                  </p>
+                  <div className="flex items-center gap-1">
+                    {primary && (
+                      <Button size="sm" variant={primary.variant} onClick={primary.onClick} className="text-xs px-2.5 py-1.5 min-h-[36px]">
+                        {primary.icon && <primary.icon className="w-3 h-3 mr-1" />}
+                        {primary.label}
+                      </Button>
+                    )}
+                    <MoreMenu>
+                      <DropdownItem onClick={() => handleOpenNoteModal(ticket)}>
+                        <ChatBubbleLeftIcon className="w-4 h-4 mr-2" />
+                        {ticket.adminNote ? 'Edit Note' : 'Add Note'}
+                      </DropdownItem>
+                    </MoreMenu>
+                  </div>
+                </div>
+              </Card>
+            );
+          })
+        )}
+      </div>
+
+      {/* Mobile FAB */}
+      <div className="md:hidden fixed bottom-6 right-6 z-40">
+        <button
+          onClick={() => setShowAddTicketSheet(true)}
+          className="w-14 h-14 bg-primary-yellow text-primary-dark rounded-full shadow-lg flex items-center justify-center hover:bg-yellow-400 active:scale-95 transition-transform"
+        >
+          <PlusIcon className="w-6 h-6" />
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/src/app/admin/events/[id]/_tabs/EmailTab.tsx

@@ -0,0 +1,155 @@
+import { EmailTemplate } from '@/lib/api';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import clsx from 'clsx';
+import {
+  EyeIcon,
+  PaperAirplaneIcon,
+  CheckCircleIcon,
+  ClockIcon,
+  TicketIcon,
+  XCircleIcon,
+} from '@heroicons/react/24/outline';
+
+type RecipientFilter = 'all' | 'confirmed' | 'pending' | 'checked_in';
+
+interface EmailTabProps {
+  templates: EmailTemplate[];
+  selectedTemplate: string;
+  setSelectedTemplate: (value: string) => void;
+  recipientFilter: RecipientFilter;
+  setRecipientFilter: (value: RecipientFilter) => void;
+  customMessage: string;
+  setCustomMessage: (value: string) => void;
+  sending: boolean;
+  handlePreviewEmail: () => void;
+  handleSendEmail: () => void;
+  getFilteredRecipientCount: () => number;
+  ticketsCount: number;
+  confirmedCount: number;
+  pendingCount: number;
+  checkedInCount: number;
+  cancelledCount: number;
+}
+
+export function EmailTab({
+  templates,
+  selectedTemplate,
+  setSelectedTemplate,
+  recipientFilter,
+  setRecipientFilter,
+  customMessage,
+  setCustomMessage,
+  sending,
+  handlePreviewEmail,
+  handleSendEmail,
+  getFilteredRecipientCount,
+  ticketsCount,
+  confirmedCount,
+  pendingCount,
+  checkedInCount,
+  cancelledCount,
+}: EmailTabProps) {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      <Card className="p-5">
+        <h3 className="font-semibold text-base mb-3">Send Email to Attendees</h3>
+
+        <div className="space-y-3">
+          <div>
+            <label className="block text-sm font-medium mb-1">Email Template</label>
+            <select
+              value={selectedTemplate}
+              onChange={(e) => setSelectedTemplate(e.target.value)}
+              className="w-full px-3 py-2.5 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow text-sm"
+            >
+              <option value="">Select a template...</option>
+              {templates.map((template) => (
+                <option key={template.id} value={template.slug}>
+                  {template.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-1">Recipients</label>
+            <select
+              value={recipientFilter}
+              onChange={(e) => setRecipientFilter(e.target.value as RecipientFilter)}
+              className="w-full px-3 py-2.5 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow text-sm"
+            >
+              <option value="all">All Attendees ({ticketsCount})</option>
+              <option value="confirmed">Confirmed Only ({confirmedCount})</option>
+              <option value="pending">Pending Only ({pendingCount})</option>
+              <option value="checked_in">Checked In Only ({checkedInCount})</option>
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-1">Custom Message (optional)</label>
+            <textarea
+              value={customMessage}
+              onChange={(e) => setCustomMessage(e.target.value)}
+              className="w-full px-3 py-2.5 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow text-sm"
+              rows={3}
+              placeholder="Add a custom message that will be included in the email..."
+            />
+            <p className="text-[10px] text-gray-500 mt-1">
+              This message will replace the {`{{customMessage}}`} variable in the template.
+            </p>
+          </div>
+
+          <div className="flex flex-wrap gap-2 pt-1">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handlePreviewEmail}
+              disabled={!selectedTemplate}
+              className="min-h-[44px] md:min-h-0"
+            >
+              <EyeIcon className="w-4 h-4 mr-1.5" />
+              Preview
+            </Button>
+            <Button
+              size="sm"
+              onClick={handleSendEmail}
+              disabled={!selectedTemplate || getFilteredRecipientCount() === 0}
+              isLoading={sending}
+              className="min-h-[44px] md:min-h-0"
+            >
+              <PaperAirplaneIcon className="w-4 h-4 mr-1.5" />
+              Send to {getFilteredRecipientCount()} {getFilteredRecipientCount() === 1 ? 'person' : 'people'}
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      <Card className="p-5">
+        <h3 className="font-semibold text-base mb-3">Recipient Summary</h3>
+        <div className="space-y-2">
+          {[
+            { label: 'Confirmed', count: confirmedCount, icon: CheckCircleIcon, color: 'text-green-500' },
+            { label: 'Pending Payment', count: pendingCount, icon: ClockIcon, color: 'text-yellow-500' },
+            { label: 'Checked In', count: checkedInCount, icon: TicketIcon, color: 'text-blue-500' },
+            { label: 'Cancelled', count: cancelledCount, icon: XCircleIcon, color: 'text-red-500' },
+          ].map((item) => (
+            <div key={item.label} className="flex items-center justify-between p-2.5 bg-gray-50 rounded-btn">
+              <div className="flex items-center gap-2">
+                <item.icon className={clsx('w-4 h-4', item.color)} />
+                <span className="text-sm">{item.label}</span>
+              </div>
+              <span className="font-semibold text-sm">{item.count}</span>
+            </div>
+          ))}
+          <div className="border-t pt-2 mt-2">
+            <div className="flex items-center justify-between font-semibold text-sm">
+              <span>Total Bookings</span>
+              <span>{ticketsCount}</span>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

frontend/src/app/admin/events/[id]/_tabs/OverviewTab.tsx

@@ -0,0 +1,83 @@
+import { Event } from '@/lib/api';
+import Card from '@/components/ui/Card';
+import { CalendarIcon, MapPinIcon, CurrencyDollarIcon, UsersIcon } from '@heroicons/react/24/outline';
+
+interface OverviewTabProps {
+  event: Event;
+  formatDate: (dateStr: string) => string;
+  fmtTime: (dateStr: string) => string;
+  formatCurrency: (amount: number, currency: string) => string;
+  confirmedCount: number;
+  checkedInCount: number;
+}
+
+export function OverviewTab({ event, formatDate, fmtTime, formatCurrency, confirmedCount, checkedInCount }: OverviewTabProps) {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      <Card className="p-5">
+        <h3 className="font-semibold text-base mb-3">Event Information</h3>
+        <div className="space-y-3">
+          <div className="flex items-start gap-3">
+            <CalendarIcon className="w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0" />
+            <div>
+              <p className="font-medium text-sm">Date & Time</p>
+              <p className="text-sm text-gray-600">{formatDate(event.startDatetime)}</p>
+              <p className="text-sm text-gray-600">{fmtTime(event.startDatetime)}{event.endDatetime && ` - ${fmtTime(event.endDatetime)}`}</p>
+            </div>
+          </div>
+          <div className="flex items-start gap-3">
+            <MapPinIcon className="w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0" />
+            <div>
+              <p className="font-medium text-sm">Location</p>
+              <p className="text-sm text-gray-600">{event.location}</p>
+              {event.locationUrl && (
+                <a href={event.locationUrl} target="_blank" rel="noopener" className="text-blue-600 text-xs hover:underline">
+                  View on Map
+                </a>
+              )}
+            </div>
+          </div>
+          <div className="flex items-start gap-3">
+            <CurrencyDollarIcon className="w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0" />
+            <div>
+              <p className="font-medium text-sm">Price</p>
+              <p className="text-sm text-gray-600">{event.price === 0 ? 'Free' : formatCurrency(event.price, event.currency)}</p>
+            </div>
+          </div>
+          <div className="flex items-start gap-3">
+            <UsersIcon className="w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0" />
+            <div>
+              <p className="font-medium text-sm">Capacity</p>
+              <p className="text-sm text-gray-600">{confirmedCount + checkedInCount} / {event.capacity} spots filled</p>
+              <p className="text-xs text-gray-500">{Math.max(0, event.capacity - confirmedCount - checkedInCount)} spots remaining</p>
+            </div>
+          </div>
+        </div>
+      </Card>
+
+      <Card className="p-5">
+        <h3 className="font-semibold text-base mb-3">Description</h3>
+        <div className="prose prose-sm max-w-none">
+          <p className="text-sm text-gray-600 whitespace-pre-wrap">{event.description}</p>
+          {event.descriptionEs && (
+            <>
+              <p className="font-medium text-sm mt-3">Spanish:</p>
+              <p className="text-sm text-gray-600 whitespace-pre-wrap">{event.descriptionEs}</p>
+            </>
+          )}
+        </div>
+      </Card>
+
+      {event.bannerUrl && (
+        <Card className="p-5 lg:col-span-2">
+          <h3 className="font-semibold text-base mb-3">Event Banner</h3>
+          <img
+            src={event.bannerUrl}
+            alt={event.title}
+            className="w-full max-h-64 object-cover rounded-lg"
+          />
+        </Card>
+      )}
+    </div>
+  );
+}

frontend/src/app/admin/events/[id]/_tabs/PaymentsTab.tsx

@@ -0,0 +1,406 @@
+import { PaymentOptionsConfig } from '@/lib/api';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import clsx from 'clsx';
+import {
+  CreditCardIcon,
+  BuildingLibraryIcon,
+  BoltIcon,
+  BanknotesIcon,
+  ArrowPathIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+} from '@heroicons/react/24/outline';
+import type { PaymentOverridesController } from '../_hooks/usePaymentOverrides';
+
+interface PaymentsTabProps {
+  locale: string;
+  payments: PaymentOverridesController;
+}
+
+export function PaymentsTab({ locale, payments }: PaymentsTabProps) {
+  const {
+    loadingPayments,
+    hasPaymentOverrides,
+    savingPayments,
+    globalPaymentOptions,
+    paymentOverrides,
+    getEffectivePaymentOption,
+    updatePaymentOverride,
+    handleResetToGlobal,
+    handleSavePaymentOptions,
+  } = payments;
+
+  return (
+    <div className="space-y-4">
+      {loadingPayments ? (
+        <div className="flex items-center justify-center py-12">
+          <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
+        </div>
+      ) : (
+        <>
+          {/* Header */}
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+            <div>
+              <h3 className="font-semibold text-base">
+                {locale === 'es' ? 'Métodos de Pago del Evento' : 'Event Payment Methods'}
+              </h3>
+              <p className="text-xs text-gray-500">
+                {hasPaymentOverrides
+                  ? (locale === 'es' ? 'Configuración personalizada' : 'Custom settings')
+                  : (locale === 'es' ? 'Usando configuración global' : 'Using global settings')}
+              </p>
+            </div>
+            <div className="flex items-center gap-2">
+              {hasPaymentOverrides && (
+                <Button variant="outline" size="sm" onClick={handleResetToGlobal} disabled={savingPayments} className="min-h-[44px] md:min-h-0">
+                  <ArrowPathIcon className="w-4 h-4 mr-1.5" />
+                  {locale === 'es' ? 'Resetear' : 'Reset'}
+                </Button>
+              )}
+              <Button size="sm" onClick={handleSavePaymentOptions} isLoading={savingPayments} className="min-h-[44px] md:min-h-0">
+                {locale === 'es' ? 'Guardar' : 'Save'}
+              </Button>
+            </div>
+          </div>
+
+          {/* TPago */}
+          <Card>
+            <div className="p-4 md:p-5">
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-2.5">
+                  <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
+                    <CreditCardIcon className="w-4 h-4 text-blue-600" />
+                  </div>
+                  <div>
+                    <h4 className="font-semibold text-sm">
+                      {locale === 'es' ? 'TPago / Tarjeta' : 'TPago / Card'}
+                    </h4>
+                    <p className="text-[10px] text-gray-500">
+                      {locale === 'es' ? 'Requiere aprobación' : 'Requires approval'}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  {globalPaymentOptions && !globalPaymentOptions.tpagoEnabled && (
+                    <span className="text-[10px] text-gray-400 hidden sm:inline">
+                      {locale === 'es' ? '(Deshabilitado global)' : '(Disabled globally)'}
+                    </span>
+                  )}
+                  <button
+                    onClick={() => updatePaymentOverride('tpagoEnabled', !getEffectivePaymentOption('tpagoEnabled'))}
+                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                      getEffectivePaymentOption('tpagoEnabled') ? 'bg-primary-yellow' : 'bg-gray-300'
+                    }`}
+                  >
+                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                      getEffectivePaymentOption('tpagoEnabled') ? 'translate-x-6' : 'translate-x-1'
+                    }`} />
+                  </button>
+                </div>
+              </div>
+
+              {getEffectivePaymentOption('tpagoEnabled') && (
+                <div className="space-y-3 pt-3 border-t">
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700 mb-1">
+                      {locale === 'es' ? 'Enlaces de Pago TPago (por cantidad de tickets)' : 'TPago Payment Links (per ticket quantity)'}
+                    </label>
+                    <p className="text-[10px] text-gray-500 mb-2">
+                      {locale === 'es'
+                        ? 'Cada enlace tiene un monto fijo. Un enlace distinto por cantidad de tickets.'
+                        : 'Each link has a fixed amount. One link per ticket quantity.'}
+                    </p>
+                    <div className="space-y-2">
+                      {([1, 2, 3, 4, 5] as const).map((qty) => {
+                        const key = (qty === 1 ? 'tpagoLink' : `tpagoLink${qty}`) as keyof PaymentOptionsConfig;
+                        return (
+                          <div key={qty} className="flex items-center gap-2">
+                            <span className="text-xs font-medium text-gray-600 w-20 flex-shrink-0">
+                              {qty} {qty === 1 ? 'ticket' : 'tickets'}
+                            </span>
+                            <input
+                              type="url"
+                              value={(paymentOverrides[key] as string | null) ?? ''}
+                              onChange={(e) => updatePaymentOverride(key, (e.target.value || null) as any)}
+                              placeholder={(globalPaymentOptions?.[key] as string | null) || 'https://www.tpago.com.py/links?alias=...'}
+                              className="flex-1 px-3 py-2 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                            />
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    <div>
+                      <label className="block text-xs font-medium text-gray-700 mb-1">Instructions (EN)</label>
+                      <textarea
+                        value={paymentOverrides.tpagoInstructions ?? ''}
+                        onChange={(e) => updatePaymentOverride('tpagoInstructions', e.target.value || null)}
+                        rows={2}
+                        placeholder={globalPaymentOptions?.tpagoInstructions || 'Instructions for users...'}
+                        className="w-full px-3 py-2 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-gray-700 mb-1">Instrucciones (ES)</label>
+                      <textarea
+                        value={paymentOverrides.tpagoInstructionsEs ?? ''}
+                        onChange={(e) => updatePaymentOverride('tpagoInstructionsEs', e.target.value || null)}
+                        rows={2}
+                        placeholder={globalPaymentOptions?.tpagoInstructionsEs || 'Instrucciones para usuarios...'}
+                        className="w-full px-3 py-2 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                      />
+                    </div>
+                  </div>
+                  <p className="text-[10px] text-gray-400">
+                    {locale === 'es' ? 'Vacío = configuración global' : 'Empty = global settings'}
+                  </p>
+                </div>
+              )}
+            </div>
+          </Card>
+
+          {/* Bank Transfer */}
+          <Card>
+            <div className="p-4 md:p-5">
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-2.5">
+                  <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
+                    <BuildingLibraryIcon className="w-4 h-4 text-green-600" />
+                  </div>
+                  <div>
+                    <h4 className="font-semibold text-sm">
+                      {locale === 'es' ? 'Transferencia Bancaria' : 'Bank Transfer'}
+                    </h4>
+                    <p className="text-[10px] text-gray-500">
+                      {locale === 'es' ? 'Requiere aprobación' : 'Requires approval'}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  {globalPaymentOptions && !globalPaymentOptions.bankTransferEnabled && (
+                    <span className="text-[10px] text-gray-400 hidden sm:inline">
+                      {locale === 'es' ? '(Deshabilitado global)' : '(Disabled globally)'}
+                    </span>
+                  )}
+                  <button
+                    onClick={() => updatePaymentOverride('bankTransferEnabled', !getEffectivePaymentOption('bankTransferEnabled'))}
+                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                      getEffectivePaymentOption('bankTransferEnabled') ? 'bg-primary-yellow' : 'bg-gray-300'
+                    }`}
+                  >
+                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                      getEffectivePaymentOption('bankTransferEnabled') ? 'translate-x-6' : 'translate-x-1'
+                    }`} />
+                  </button>
+                </div>
+              </div>
+
+              {getEffectivePaymentOption('bankTransferEnabled') && (
+                <div className="space-y-3 pt-3 border-t">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    {[
+                      { label: locale === 'es' ? 'Banco' : 'Bank Name', key: 'bankName' as const, placeholder: 'e.g., Banco Itaú' },
+                      { label: locale === 'es' ? 'Titular' : 'Account Holder', key: 'bankAccountHolder' as const, placeholder: 'e.g., Juan Pérez' },
+                      { label: locale === 'es' ? 'N° Cuenta' : 'Account Number', key: 'bankAccountNumber' as const, placeholder: 'e.g., 1234567890' },
+                      { label: 'Alias', key: 'bankAlias' as const, placeholder: 'e.g., spanglish.pagos' },
+                      { label: locale === 'es' ? 'Teléfono' : 'Phone', key: 'bankPhone' as const, placeholder: '+595 981 123456' },
+                    ].map((field) => (
+                      <div key={field.key}>
+                        <label className="block text-xs font-medium text-gray-700 mb-1">{field.label}</label>
+                        <input
+                          type="text"
+                          value={(paymentOverrides as any)[field.key] ?? ''}
+                          onChange={(e) => updatePaymentOverride(field.key, e.target.value || null)}
+                          placeholder={(globalPaymentOptions as any)?.[field.key] || field.placeholder}
+                          className="w-full px-3 py-2 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                        />
+                      </div>
+                    ))}
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    <div>
+                      <label className="block text-xs font-medium text-gray-700 mb-1">Notes (EN)</label>
+                      <textarea
+                        value={paymentOverrides.bankNotes ?? ''}
+                        onChange={(e) => updatePaymentOverride('bankNotes', e.target.value || null)}
+                        rows={2}
+                        placeholder={globalPaymentOptions?.bankNotes || 'Additional notes...'}
+                        className="w-full px-3 py-2 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-gray-700 mb-1">Notas (ES)</label>
+                      <textarea
+                        value={paymentOverrides.bankNotesEs ?? ''}
+                        onChange={(e) => updatePaymentOverride('bankNotesEs', e.target.value || null)}
+                        rows={2}
+                        placeholder={globalPaymentOptions?.bankNotesEs || 'Notas adicionales...'}
+                        className="w-full px-3 py-2 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                      />
+                    </div>
+                  </div>
+                  <p className="text-[10px] text-gray-400">
+                    {locale === 'es' ? 'Vacío = configuración global' : 'Empty = global settings'}
+                  </p>
+                </div>
+              )}
+            </div>
+          </Card>
+
+          {/* Bitcoin Lightning */}
+          <Card>
+            <div className="p-4 md:p-5">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2.5">
+                  <div className="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
+                    <BoltIcon className="w-4 h-4 text-orange-600" />
+                  </div>
+                  <div>
+                    <h4 className="font-semibold text-sm">Bitcoin Lightning</h4>
+                    <p className="text-[10px] text-gray-500">
+                      {locale === 'es' ? 'Confirmación automática' : 'Auto confirmation'}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  {globalPaymentOptions && !globalPaymentOptions.lightningEnabled && (
+                    <span className="text-[10px] text-gray-400 hidden sm:inline">
+                      {locale === 'es' ? '(Deshabilitado global)' : '(Disabled globally)'}
+                    </span>
+                  )}
+                  <button
+                    onClick={() => updatePaymentOverride('lightningEnabled', !getEffectivePaymentOption('lightningEnabled'))}
+                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                      getEffectivePaymentOption('lightningEnabled') ? 'bg-primary-yellow' : 'bg-gray-300'
+                    }`}
+                  >
+                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                      getEffectivePaymentOption('lightningEnabled') ? 'translate-x-6' : 'translate-x-1'
+                    }`} />
+                  </button>
+                </div>
+              </div>
+              {getEffectivePaymentOption('lightningEnabled') && (
+                <div className="pt-3 border-t mt-3">
+                  <div className="bg-orange-50 border border-orange-200 rounded-lg p-3">
+                    <p className="text-xs text-orange-800">
+                      {locale === 'es'
+                        ? 'Lightning configurado vía LNbits. No personalizable por evento.'
+                        : 'Lightning is configured via LNbits. Cannot be customized per event.'}
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </Card>
+
+          {/* Cash at Door */}
+          <Card>
+            <div className="p-4 md:p-5">
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-2.5">
+                  <div className="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center flex-shrink-0">
+                    <BanknotesIcon className="w-4 h-4 text-yellow-600" />
+                  </div>
+                  <div>
+                    <h4 className="font-semibold text-sm">
+                      {locale === 'es' ? 'Efectivo' : 'Cash at Door'}
+                    </h4>
+                    <p className="text-[10px] text-gray-500">
+                      {locale === 'es' ? 'Requiere aprobación' : 'Requires approval'}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  {globalPaymentOptions && !globalPaymentOptions.cashEnabled && (
+                    <span className="text-[10px] text-gray-400 hidden sm:inline">
+                      {locale === 'es' ? '(Deshabilitado global)' : '(Disabled globally)'}
+                    </span>
+                  )}
+                  <button
+                    onClick={() => updatePaymentOverride('cashEnabled', !getEffectivePaymentOption('cashEnabled'))}
+                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                      getEffectivePaymentOption('cashEnabled') ? 'bg-primary-yellow' : 'bg-gray-300'
+                    }`}
+                  >
+                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                      getEffectivePaymentOption('cashEnabled') ? 'translate-x-6' : 'translate-x-1'
+                    }`} />
+                  </button>
+                </div>
+              </div>
+
+              {getEffectivePaymentOption('cashEnabled') && (
+                <div className="space-y-3 pt-3 border-t">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    <div>
+                      <label className="block text-xs font-medium text-gray-700 mb-1">Instructions (EN)</label>
+                      <textarea
+                        value={paymentOverrides.cashInstructions ?? ''}
+                        onChange={(e) => updatePaymentOverride('cashInstructions', e.target.value || null)}
+                        rows={2}
+                        placeholder={globalPaymentOptions?.cashInstructions || 'Cash payment instructions...'}
+                        className="w-full px-3 py-2 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-gray-700 mb-1">Instrucciones (ES)</label>
+                      <textarea
+                        value={paymentOverrides.cashInstructionsEs ?? ''}
+                        onChange={(e) => updatePaymentOverride('cashInstructionsEs', e.target.value || null)}
+                        rows={2}
+                        placeholder={globalPaymentOptions?.cashInstructionsEs || 'Instrucciones de pago en efectivo...'}
+                        className="w-full px-3 py-2 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                      />
+                    </div>
+                  </div>
+                  <p className="text-[10px] text-gray-400">
+                    {locale === 'es' ? 'Vacío = configuración global' : 'Empty = global settings'}
+                  </p>
+                </div>
+              )}
+            </div>
+          </Card>
+
+          {/* Summary */}
+          <Card>
+            <div className="p-4 md:p-5">
+              <h4 className="font-semibold text-sm mb-3">
+                {locale === 'es' ? 'Resumen' : 'Active Methods'}
+              </h4>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+                {[
+                  { label: 'TPago', enabled: getEffectivePaymentOption('tpagoEnabled') },
+                  { label: locale === 'es' ? 'Transferencia' : 'Bank Transfer', enabled: getEffectivePaymentOption('bankTransferEnabled') },
+                  { label: 'Lightning', enabled: getEffectivePaymentOption('lightningEnabled') },
+                  { label: locale === 'es' ? 'Efectivo' : 'Cash', enabled: getEffectivePaymentOption('cashEnabled') },
+                ].map((method) => (
+                  <div key={method.label} className="flex items-center gap-1.5">
+                    {method.enabled ? (
+                      <CheckCircleIcon className="w-4 h-4 text-green-500" />
+                    ) : (
+                      <XCircleIcon className="w-4 h-4 text-gray-300" />
+                    )}
+                    <span className={clsx('text-sm', method.enabled ? 'text-gray-900' : 'text-gray-400')}>
+                      {method.label}
+                    </span>
+                  </div>
+                ))}
+              </div>
+              {hasPaymentOverrides && (
+                <p className="text-[10px] text-gray-500 mt-3 flex items-center gap-1">
+                  <span className="inline-block w-1.5 h-1.5 bg-primary-yellow rounded-full" />
+                  {locale === 'es'
+                    ? 'Configuración personalizada activa'
+                    : 'Custom settings override global defaults'}
+                </p>
+              )}
+            </div>
+          </Card>
+        </>
+      )}
+    </div>
+  );
+}

frontend/src/app/admin/events/[id]/_tabs/TicketsTab.tsx

@@ -0,0 +1,258 @@
+import { Ticket } from '@/lib/api';
+import { parseDate, EVENT_TIMEZONE } from '@/lib/utils';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { Dropdown, DropdownItem, MoreMenu } from '@/components/admin/MobileComponents';
+import {
+  MagnifyingGlassIcon,
+  ChevronDownIcon,
+  ArrowDownTrayIcon,
+  ArrowUturnLeftIcon,
+} from '@heroicons/react/24/outline';
+import type { TicketStatusFilter } from '../_types';
+
+interface TicketsTabProps {
+  locale: string;
+  confirmedTickets: Ticket[];
+  filteredConfirmedTickets: Ticket[];
+  ticketSearchQuery: string;
+  setTicketSearchQuery: (value: string) => void;
+  ticketStatusFilter: TicketStatusFilter;
+  setTicketStatusFilter: (value: TicketStatusFilter) => void;
+  confirmedCount: number;
+  checkedInCount: number;
+  exporting: boolean;
+  showTicketExportDropdown: boolean;
+  setShowTicketExportDropdown: (value: boolean) => void;
+  handleExportTickets: (status: 'confirmed' | 'checked_in' | 'all') => void;
+  handleCheckin: (ticketId: string) => void;
+  handleRemoveCheckin: (ticketId: string) => void;
+  setShowTicketExportSheet: (value: boolean) => void;
+}
+
+export function TicketsTab({
+  locale,
+  confirmedTickets,
+  filteredConfirmedTickets,
+  ticketSearchQuery,
+  setTicketSearchQuery,
+  ticketStatusFilter,
+  setTicketStatusFilter,
+  confirmedCount,
+  checkedInCount,
+  exporting,
+  showTicketExportDropdown,
+  setShowTicketExportDropdown,
+  handleExportTickets,
+  handleCheckin,
+  handleRemoveCheckin,
+  setShowTicketExportSheet,
+}: TicketsTabProps) {
+  return (
+    <div className="space-y-3">
+      {/* Desktop toolbar */}
+      <Card className="p-3 hidden md:block">
+        <div className="flex items-center gap-3">
+          <div className="relative flex-1 max-w-sm">
+            <MagnifyingGlassIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+            <input
+              type="text"
+              placeholder="Search by name or ticket ID..."
+              value={ticketSearchQuery}
+              onChange={(e) => setTicketSearchQuery(e.target.value)}
+              className="w-full pl-9 pr-3 py-1.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+            />
+          </div>
+          <select
+            value={ticketStatusFilter}
+            onChange={(e) => setTicketStatusFilter(e.target.value as TicketStatusFilter)}
+            className="px-3 py-1.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+          >
+            <option value="all">All ({confirmedTickets.length})</option>
+            <option value="confirmed">Valid ({confirmedCount})</option>
+            <option value="checked_in">Checked In ({checkedInCount})</option>
+          </select>
+          <div className="flex-1" />
+          <Dropdown
+            open={showTicketExportDropdown}
+            onOpenChange={setShowTicketExportDropdown}
+            trigger={
+              <Button variant="outline" size="sm" disabled={exporting}>
+                <ArrowDownTrayIcon className="w-3.5 h-3.5 mr-1.5" />
+                Export
+                <ChevronDownIcon className="w-3 h-3 ml-1" />
+              </Button>
+            }
+          >
+            <DropdownItem onClick={() => handleExportTickets('all')}>Export All</DropdownItem>
+            <DropdownItem onClick={() => handleExportTickets('confirmed')}>Export Valid</DropdownItem>
+            <DropdownItem onClick={() => handleExportTickets('checked_in')}>Export Checked-in</DropdownItem>
+            <div className="border-t border-gray-100 mx-2" />
+            <div className="px-4 py-1.5 text-[10px] text-gray-400">Format: CSV</div>
+          </Dropdown>
+        </div>
+        {(ticketSearchQuery || ticketStatusFilter !== 'all') && (
+          <div className="mt-2 text-xs text-gray-500 flex items-center gap-2">
+            <span>Showing {filteredConfirmedTickets.length} of {confirmedTickets.length}</span>
+            <button onClick={() => { setTicketSearchQuery(''); setTicketStatusFilter('all'); }} className="text-primary-yellow hover:underline">Clear</button>
+          </div>
+        )}
+      </Card>
+
+      {/* Mobile toolbar */}
+      <div className="md:hidden space-y-2">
+        <div className="relative">
+          <MagnifyingGlassIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+          <input
+            type="text"
+            placeholder="Search by name or ticket ID..."
+            value={ticketSearchQuery}
+            onChange={(e) => setTicketSearchQuery(e.target.value)}
+            className="w-full pl-9 pr-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <select
+            value={ticketStatusFilter}
+            onChange={(e) => setTicketStatusFilter(e.target.value as TicketStatusFilter)}
+            className="px-3 py-2 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow min-h-[44px]"
+          >
+            <option value="all">All ({confirmedTickets.length})</option>
+            <option value="confirmed">Valid ({confirmedCount})</option>
+            <option value="checked_in">Checked In ({checkedInCount})</option>
+          </select>
+          <button
+            onClick={() => setShowTicketExportSheet(true)}
+            disabled={exporting}
+            className="flex items-center gap-1.5 px-3 py-2 rounded-btn border border-secondary-light-gray text-sm text-gray-600 min-h-[44px]"
+          >
+            <ArrowDownTrayIcon className="w-4 h-4" />
+            Export
+          </button>
+        </div>
+      </div>
+
+      {/* Desktop: Dense table */}
+      <Card className="overflow-hidden hidden md:block">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Attendee</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Check-in</th>
+                <th className="text-right px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {filteredConfirmedTickets.length === 0 ? (
+                <tr>
+                  <td colSpan={4} className="px-4 py-10 text-center text-gray-500 text-sm">
+                    {confirmedTickets.length === 0 ? 'No confirmed tickets yet' : 'No tickets match the current filters'}
+                  </td>
+                </tr>
+              ) : (
+                filteredConfirmedTickets.map((ticket) => (
+                  <tr key={ticket.id} className="hover:bg-gray-50/50">
+                    <td className="px-4 py-2.5">
+                      <p className="font-medium text-sm">{ticket.attendeeFirstName} {ticket.attendeeLastName || ''}</p>
+                      {ticket.bookingId && (
+                        <span className="text-[10px] text-purple-600">Group booking</span>
+                      )}
+                    </td>
+                    <td className="px-4 py-2.5">
+                      {ticket.status === 'confirmed' ? (
+                        <span className="px-1.5 py-0.5 text-[10px] rounded-full bg-green-100 text-green-800 font-medium">Valid</span>
+                      ) : (
+                        <span className="px-1.5 py-0.5 text-[10px] rounded-full bg-blue-100 text-blue-800 font-medium">Checked In</span>
+                      )}
+                    </td>
+                    <td className="px-4 py-2.5 text-xs text-gray-500">
+                      {ticket.checkinAt ? (
+                        parseDate(ticket.checkinAt).toLocaleString(locale === 'es' ? 'es-ES' : 'en-US', {
+                          month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', timeZone: EVENT_TIMEZONE,
+                        })
+                      ) : (
+                        <span className="text-gray-300">—</span>
+                      )}
+                    </td>
+                    <td className="px-4 py-2.5">
+                      <div className="flex items-center justify-end gap-1">
+                        {ticket.status === 'confirmed' && (
+                          <Button size="sm" onClick={() => handleCheckin(ticket.id)} className="text-xs px-2 py-1">
+                            Check In
+                          </Button>
+                        )}
+                        {ticket.status === 'checked_in' && (
+                          <Button size="sm" variant="outline" onClick={() => handleRemoveCheckin(ticket.id)} className="text-xs px-2 py-1">
+                            <ArrowUturnLeftIcon className="w-3 h-3 mr-1" />
+                            Undo
+                          </Button>
+                        )}
+                        <MoreMenu>
+                          <div className="px-4 py-1.5 text-[10px] text-gray-400 font-mono" title={ticket.id}>
+                            ID: {ticket.id.slice(0, 8)}...
+                          </div>
+                          {ticket.bookingId && (
+                            <div className="px-4 py-1.5 text-[10px] text-purple-500 font-mono" title={ticket.bookingId}>
+                              Booking: {ticket.bookingId.slice(0, 8)}...
+                            </div>
+                          )}
+                        </MoreMenu>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+
+      {/* Mobile: Card layout */}
+      <div className="md:hidden space-y-2">
+        {filteredConfirmedTickets.length === 0 ? (
+          <div className="text-center py-10 text-gray-500 text-sm">
+            {confirmedTickets.length === 0 ? 'No confirmed tickets yet' : 'No tickets match the current filters'}
+          </div>
+        ) : (
+          filteredConfirmedTickets.map((ticket) => (
+            <Card key={ticket.id} className="p-3">
+              <div className="flex items-start justify-between gap-2">
+                <div className="min-w-0 flex-1">
+                  <p className="font-medium text-sm truncate">{ticket.attendeeFirstName} {ticket.attendeeLastName || ''}</p>
+                  {ticket.bookingId && <p className="text-[10px] text-purple-600">Group booking</p>}
+                </div>
+                {ticket.status === 'confirmed' ? (
+                  <span className="px-1.5 py-0.5 text-[10px] rounded-full bg-green-100 text-green-800 font-medium flex-shrink-0">Valid</span>
+                ) : (
+                  <span className="px-1.5 py-0.5 text-[10px] rounded-full bg-blue-100 text-blue-800 font-medium flex-shrink-0">Checked In</span>
+                )}
+              </div>
+              <div className="flex items-center justify-between mt-2 pt-2 border-t border-gray-100">
+                <p className="text-[10px] text-gray-400">
+                  {ticket.checkinAt
+                    ? `Checked in ${parseDate(ticket.checkinAt).toLocaleString(locale === 'es' ? 'es-ES' : 'en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', timeZone: EVENT_TIMEZONE })}`
+                    : 'Not checked in'}
+                </p>
+                <div className="flex items-center gap-1">
+                  {ticket.status === 'confirmed' && (
+                    <Button size="sm" onClick={() => handleCheckin(ticket.id)} className="text-xs px-2.5 py-1.5 min-h-[36px]">
+                      Check In
+                    </Button>
+                  )}
+                  {ticket.status === 'checked_in' && (
+                    <Button size="sm" variant="outline" onClick={() => handleRemoveCheckin(ticket.id)} className="text-xs px-2.5 py-1.5 min-h-[36px]">
+                      <ArrowUturnLeftIcon className="w-3 h-3 mr-1" />
+                      Undo
+                    </Button>
+                  )}
+                </div>
+              </div>
+            </Card>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/app/admin/events/[id]/_types.ts

@@ -0,0 +1,26 @@
+import type { ComponentType } from 'react';
+
+export type TabType = 'overview' | 'attendees' | 'tickets' | 'email' | 'payments';
+
+export type AttendeeStatusFilter = 'all' | 'pending' | 'confirmed' | 'checked_in' | 'cancelled';
+export type TicketStatusFilter = 'all' | 'confirmed' | 'checked_in';
+export type RecipientFilter = 'all' | 'confirmed' | 'pending' | 'checked_in';
+
+export interface PrimaryAction {
+  label: string;
+  onClick: () => void;
+  variant: 'outline' | 'primary';
+  icon?: ComponentType<{ className?: string }>;
+}
+
+export interface AttendeeFormState {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  adminNote: string;
+}
+
+export interface AddAtDoorFormState extends AttendeeFormState {
+  autoCheckin: boolean;
+}

frontend/src/app/admin/events/[id]/_utils/format.ts

@@ -0,0 +1,20 @@
+// Pure formatting/IO helpers for the admin event detail page.
+
+export function formatCurrency(amount: number, currency: string): string {
+  if (currency === 'PYG') {
+    return `${amount.toLocaleString('es-PY')} PYG`;
+  }
+  return `$${amount.toFixed(2)} ${currency}`;
+}
+
+/** Trigger a browser download for a blob with the given filename. */
+export function downloadBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}

frontend/src/lib/api/admin.ts

@@ -0,0 +1,45 @@
+import { fetchApi, fetchBlob } from './client';
+import type {
+  DashboardData,
+  AnalyticsData,
+  ExportedTicket,
+  ExportedPayment,
+  FinancialSummary,
+} from './types';
+
+export const adminApi = {
+  getDashboard: () => fetchApi<{ dashboard: DashboardData }>('/api/admin/dashboard'),
+  getAnalytics: () => fetchApi<{ analytics: AnalyticsData }>('/api/admin/analytics'),
+  exportTickets: (eventId?: string) => {
+    const query = eventId ? `?eventId=${eventId}` : '';
+    return fetchApi<{ tickets: ExportedTicket[] }>(`/api/admin/export/tickets${query}`);
+  },
+  exportFinancial: (params?: { startDate?: string; endDate?: string; eventId?: string }) => {
+    const query = new URLSearchParams();
+    if (params?.startDate) query.set('startDate', params.startDate);
+    if (params?.endDate) query.set('endDate', params.endDate);
+    if (params?.eventId) query.set('eventId', params.eventId);
+    return fetchApi<{ payments: ExportedPayment[]; summary: FinancialSummary }>(`/api/admin/export/financial?${query}`);
+  },
+  /** Download attendee export as a file (CSV). Returns a Blob. */
+  exportAttendees: (eventId: string, params?: { status?: string; format?: string; q?: string }) => {
+    const query = new URLSearchParams();
+    if (params?.status) query.set('status', params.status);
+    if (params?.format) query.set('format', params.format);
+    if (params?.q) query.set('q', params.q);
+    return fetchBlob(
+      `/api/admin/events/${eventId}/attendees/export?${query}`,
+      `attendees-${new Date().toISOString().split('T')[0]}.csv`
+    );
+  },
+  /** Download tickets export as CSV. Returns a Blob. */
+  exportTicketsCSV: (eventId: string, params?: { status?: string; q?: string }) => {
+    const query = new URLSearchParams();
+    if (params?.status) query.set('status', params.status);
+    if (params?.q) query.set('q', params.q);
+    return fetchBlob(
+      `/api/admin/events/${eventId}/tickets/export?${query}`,
+      `tickets-${new Date().toISOString().split('T')[0]}.csv`
+    );
+  },
+};

frontend/src/lib/api/auth.ts

@@ -0,0 +1,63 @@
+import { fetchApi } from './client';
+import type { User } from './types';
+
+export const authApi = {
+  // Magic link
+  requestMagicLink: (email: string) =>
+    fetchApi<{ message: string }>('/api/auth/magic-link/request', {
+      method: 'POST',
+      body: JSON.stringify({ email }),
+    }),
+
+  verifyMagicLink: (token: string) =>
+    fetchApi<{ user: User; token: string; refreshToken: string }>('/api/auth/magic-link/verify', {
+      method: 'POST',
+      body: JSON.stringify({ token }),
+    }),
+
+  // Password reset
+  requestPasswordReset: (email: string) =>
+    fetchApi<{ message: string }>('/api/auth/password-reset/request', {
+      method: 'POST',
+      body: JSON.stringify({ email }),
+    }),
+
+  confirmPasswordReset: (token: string, password: string) =>
+    fetchApi<{ message: string }>('/api/auth/password-reset/confirm', {
+      method: 'POST',
+      body: JSON.stringify({ token, password }),
+    }),
+
+  // Account claiming
+  requestClaimAccount: (email: string) =>
+    fetchApi<{ message: string }>('/api/auth/claim-account/request', {
+      method: 'POST',
+      body: JSON.stringify({ email }),
+    }),
+
+  confirmClaimAccount: (token: string, data: { password?: string; googleId?: string }) =>
+    fetchApi<{ user: User; token: string; refreshToken: string; message: string }>(
+      '/api/auth/claim-account/confirm',
+      {
+        method: 'POST',
+        body: JSON.stringify({ token, ...data }),
+      }
+    ),
+
+  // Google OAuth
+  googleAuth: (credential: string) =>
+    fetchApi<{ user: User; token: string; refreshToken: string }>('/api/auth/google', {
+      method: 'POST',
+      body: JSON.stringify({ credential }),
+    }),
+
+  // Change password
+  changePassword: (currentPassword: string, newPassword: string) =>
+    fetchApi<{ message: string }>('/api/auth/change-password', {
+      method: 'POST',
+      body: JSON.stringify({ currentPassword, newPassword }),
+    }),
+
+  // Get current user
+  me: () => fetchApi<{ user: User }>('/api/auth/me'),
+};

frontend/src/lib/api/client.ts

@@ -0,0 +1,66 @@
+export const API_BASE = process.env.NEXT_PUBLIC_API_URL || '';
+
+export interface ApiError {
+  error: string;
+}
+
+/** Read the stored auth token (browser only). */
+export function getToken(): string | null {
+  return typeof window !== 'undefined' ? localStorage.getItem('spanglish-token') : null;
+}
+
+export async function fetchApi<T>(
+  endpoint: string,
+  options: RequestInit = {}
+): Promise<T> {
+  const token = getToken();
+
+  const headers: HeadersInit = {
+    'Content-Type': 'application/json',
+    ...options.headers,
+  };
+
+  if (token) {
+    (headers as Record<string, string>)['Authorization'] = `Bearer ${token}`;
+  }
+
+  const res = await fetch(`${API_BASE}${endpoint}`, {
+    ...options,
+    headers,
+  });
+
+  if (!res.ok) {
+    const errorData = await res.json().catch(() => ({ error: 'Request failed' }));
+    const errorMessage = typeof errorData.error === 'string'
+      ? errorData.error
+      : (errorData.message || JSON.stringify(errorData) || 'Request failed');
+    throw new Error(errorMessage);
+  }
+
+  return res.json();
+}
+
+/**
+ * Fetch a file download (CSV/blob) with auth, returning the blob and the
+ * filename parsed from the Content-Disposition header.
+ */
+export async function fetchBlob(
+  endpoint: string,
+  fallbackFilename: string
+): Promise<{ blob: Blob; filename: string }> {
+  const token = getToken();
+  const headers: Record<string, string> = {};
+  if (token) headers['Authorization'] = `Bearer ${token}`;
+
+  const res = await fetch(`${API_BASE}${endpoint}`, { headers });
+  if (!res.ok) {
+    const errorData = await res.json().catch(() => ({ error: 'Export failed' }));
+    throw new Error(errorData.error || 'Export failed');
+  }
+
+  const disposition = res.headers.get('Content-Disposition') || '';
+  const filenameMatch = disposition.match(/filename="?([^"]+)"?/);
+  const filename = filenameMatch ? filenameMatch[1] : fallbackFilename;
+  const blob = await res.blob();
+  return { blob, filename };
+}

frontend/src/lib/api/contacts.ts

@@ -0,0 +1,27 @@
+import { fetchApi } from './client';
+import type { Contact } from './types';
+
+export const contactsApi = {
+  submit: (data: { name: string; email: string; message: string }) =>
+    fetchApi<{ message: string }>('/api/contacts', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    }),
+
+  subscribe: (email: string, name?: string) =>
+    fetchApi<{ message: string }>('/api/contacts/subscribe', {
+      method: 'POST',
+      body: JSON.stringify({ email, name }),
+    }),
+
+  getAll: (status?: string) => {
+    const query = status ? `?status=${status}` : '';
+    return fetchApi<{ contacts: Contact[] }>(`/api/contacts${query}`);
+  },
+
+  updateStatus: (id: string, status: string) =>
+    fetchApi<{ contact: Contact }>(`/api/contacts/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify({ status }),
+    }),
+};

frontend/src/lib/api/dashboard.ts

@@ -0,0 +1,65 @@
+import { fetchApi } from './client';
+import type {
+  DashboardSummary,
+  UserProfile,
+  UserTicket,
+  UserPayment,
+  UserInvoice,
+  UserSession,
+  NextEventInfo,
+} from './types';
+
+export const dashboardApi = {
+  // Summary
+  getSummary: () =>
+    fetchApi<{ summary: DashboardSummary }>('/api/dashboard/summary'),
+
+  // Profile
+  getProfile: () =>
+    fetchApi<{ profile: UserProfile }>('/api/dashboard/profile'),
+
+  updateProfile: (data: { name?: string; phone?: string; languagePreference?: string; rucNumber?: string }) =>
+    fetchApi<{ profile: UserProfile; message: string }>('/api/dashboard/profile', {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    }),
+
+  // Tickets
+  getTickets: () =>
+    fetchApi<{ tickets: UserTicket[] }>('/api/dashboard/tickets'),
+
+  getTicket: (id: string) =>
+    fetchApi<{ ticket: UserTicket }>(`/api/dashboard/tickets/${id}`),
+
+  // Next event
+  getNextEvent: () =>
+    fetchApi<{ nextEvent: NextEventInfo | null }>('/api/dashboard/next-event'),
+
+  // Payments
+  getPayments: () =>
+    fetchApi<{ payments: UserPayment[] }>('/api/dashboard/payments'),
+
+  // Invoices
+  getInvoices: () =>
+    fetchApi<{ invoices: UserInvoice[] }>('/api/dashboard/invoices'),
+
+  // Sessions
+  getSessions: () =>
+    fetchApi<{ sessions: UserSession[] }>('/api/dashboard/sessions'),
+
+  revokeSession: (id: string) =>
+    fetchApi<{ message: string }>(`/api/dashboard/sessions/${id}`, { method: 'DELETE' }),
+
+  revokeAllSessions: () =>
+    fetchApi<{ message: string }>('/api/dashboard/sessions/revoke-all', { method: 'POST' }),
+
+  // Security
+  setPassword: (password: string) =>
+    fetchApi<{ message: string }>('/api/dashboard/set-password', {
+      method: 'POST',
+      body: JSON.stringify({ password }),
+    }),
+
+  unlinkGoogle: () =>
+    fetchApi<{ message: string }>('/api/dashboard/unlink-google', { method: 'POST' }),
+};

frontend/src/lib/api/emails.ts

@@ -0,0 +1,90 @@
+import { fetchApi } from './client';
+import type { EmailTemplate, EmailVariable, EmailLog, EmailStats, Pagination } from './types';
+
+export const emailsApi = {
+  // Templates
+  getTemplates: () => fetchApi<{ templates: EmailTemplate[] }>('/api/emails/templates'),
+
+  getTemplate: (id: string) => fetchApi<{ template: EmailTemplate }>(`/api/emails/templates/${id}`),
+
+  createTemplate: (data: Partial<EmailTemplate>) =>
+    fetchApi<{ template: EmailTemplate; message: string }>('/api/emails/templates', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    }),
+
+  updateTemplate: (id: string, data: Partial<EmailTemplate>) =>
+    fetchApi<{ template: EmailTemplate; message: string }>(`/api/emails/templates/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    }),
+
+  deleteTemplate: (id: string) =>
+    fetchApi<{ message: string }>(`/api/emails/templates/${id}`, { method: 'DELETE' }),
+
+  getTemplateVariables: (slug: string) =>
+    fetchApi<{ variables: EmailVariable[] }>(`/api/emails/templates/${slug}/variables`),
+
+  // Sending
+  sendToEvent: (eventId: string, data: {
+    templateSlug: string;
+    customVariables?: Record<string, any>;
+    recipientFilter?: 'all' | 'confirmed' | 'pending' | 'checked_in';
+  }) =>
+    fetchApi<{ success: boolean; queuedCount: number; error?: string }>(
+      `/api/emails/send/event/${eventId}`,
+      {
+        method: 'POST',
+        body: JSON.stringify(data),
+      }
+    ),
+
+  sendCustom: (data: {
+    to: string;
+    toName?: string;
+    subject: string;
+    bodyHtml: string;
+    bodyText?: string;
+    eventId?: string;
+  }) =>
+    fetchApi<{ success: boolean; logId?: string; error?: string }>('/api/emails/send/custom', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    }),
+
+  preview: (data: {
+    templateSlug: string;
+    variables?: Record<string, any>;
+    locale?: string;
+  }) =>
+    fetchApi<{ subject: string; bodyHtml: string }>('/api/emails/preview', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    }),
+
+  // Logs
+  getLogs: (params?: { eventId?: string; status?: string; search?: string; limit?: number; offset?: number }) => {
+    const query = new URLSearchParams();
+    if (params?.eventId) query.set('eventId', params.eventId);
+    if (params?.status) query.set('status', params.status);
+    if (params?.search) query.set('search', params.search);
+    if (params?.limit) query.set('limit', params.limit.toString());
+    if (params?.offset) query.set('offset', params.offset.toString());
+    return fetchApi<{ logs: EmailLog[]; pagination: Pagination }>(`/api/emails/logs?${query}`);
+  },
+
+  getLog: (id: string) => fetchApi<{ log: EmailLog }>(`/api/emails/logs/${id}`),
+
+  resendLog: (id: string) =>
+    fetchApi<{ success: boolean; error?: string }>(`/api/emails/logs/${id}/resend`, {
+      method: 'POST',
+    }),
+
+  getStats: (eventId?: string) => {
+    const query = eventId ? `?eventId=${eventId}` : '';
+    return fetchApi<{ stats: EmailStats }>(`/api/emails/stats${query}`);
+  },
+
+  seedTemplates: () =>
+    fetchApi<{ message: string }>('/api/emails/seed-templates', { method: 'POST' }),
+};

frontend/src/lib/api/events.ts

@@ -0,0 +1,39 @@
+import { fetchApi } from './client';
+import type { Event } from './types';
+
+export const eventsApi = {
+  getAll: (params?: { status?: string; upcoming?: boolean }) => {
+    const query = new URLSearchParams();
+    if (params?.status) query.set('status', params.status);
+    if (params?.upcoming) query.set('upcoming', 'true');
+    return fetchApi<{ events: Event[] }>(`/api/events?${query}`);
+  },
+
+  getById: (id: string) => fetchApi<{ event: Event }>(`/api/events/${id}`),
+
+  getNextUpcoming: () => fetchApi<{ event: Event | null }>('/api/events/next/upcoming'),
+
+  create: (data: Partial<Event>) =>
+    fetchApi<{ event: Event }>('/api/events', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    }),
+
+  update: (id: string, data: Partial<Event>) =>
+    fetchApi<{ event: Event }>(`/api/events/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    }),
+
+  delete: (id: string) =>
+    fetchApi<{ message: string }>(`/api/events/${id}`, { method: 'DELETE' }),
+
+  duplicate: (id: string) =>
+    fetchApi<{ event: Event; message: string }>(`/api/events/${id}/duplicate`, { method: 'POST' }),
+
+  getSlugAliases: (id: string) =>
+    fetchApi<{ aliases: { slug: string; createdAt: string }[] }>(`/api/events/${id}/slug-aliases`),
+
+  deleteSlugAlias: (id: string, slug: string) =>
+    fetchApi<{ message: string }>(`/api/events/${id}/slug-aliases/${encodeURIComponent(slug)}`, { method: 'DELETE' }),
+};

frontend/src/lib/api/faq.ts

@@ -0,0 +1,50 @@
+import { fetchApi } from './client';
+import type { FaqItem, FaqItemAdmin } from './types';
+
+export const faqApi = {
+  // Public
+  getList: (homepageOnly?: boolean) =>
+    fetchApi<{ faqs: FaqItem[] }>(`/api/faq${homepageOnly ? '?homepage=true' : ''}`),
+
+  // Admin
+  getAdminList: () =>
+    fetchApi<{ faqs: FaqItemAdmin[] }>('/api/faq/admin/list'),
+
+  getById: (id: string) =>
+    fetchApi<{ faq: FaqItemAdmin }>(`/api/faq/admin/${id}`),
+
+  create: (data: {
+    question: string;
+    questionEs?: string;
+    answer: string;
+    answerEs?: string;
+    enabled?: boolean;
+    showOnHomepage?: boolean;
+  }) =>
+    fetchApi<{ faq: FaqItemAdmin }>('/api/faq/admin', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    }),
+
+  update: (id: string, data: {
+    question?: string;
+    questionEs?: string | null;
+    answer?: string;
+    answerEs?: string | null;
+    enabled?: boolean;
+    showOnHomepage?: boolean;
+  }) =>
+    fetchApi<{ faq: FaqItemAdmin }>(`/api/faq/admin/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    }),
+
+  delete: (id: string) =>
+    fetchApi<{ message: string }>(`/api/faq/admin/${id}`, { method: 'DELETE' }),
+
+  reorder: (ids: string[]) =>
+    fetchApi<{ faqs: FaqItemAdmin[] }>('/api/faq/admin/reorder', {
+      method: 'POST',
+      body: JSON.stringify({ ids }),
+    }),
+};

frontend/src/lib/api/index.ts

@@ -0,0 +1,19 @@
+// Barrel for the frontend API client. Consumers import from `@/lib/api`.
+export type { ApiError } from './client';
+export * from './types';
+
+export { eventsApi } from './events';
+export { ticketsApi } from './tickets';
+export { contactsApi } from './contacts';
+export { usersApi } from './users';
+export { paymentsApi } from './payments';
+export { paymentOptionsApi } from './paymentOptions';
+export { mediaApi } from './media';
+export { adminApi } from './admin';
+export { emailsApi } from './emails';
+export { authApi } from './auth';
+export { dashboardApi } from './dashboard';
+export { siteSettingsApi } from './siteSettings';
+export { legalSettingsApi } from './legalSettings';
+export { legalPagesApi } from './legalPages';
+export { faqApi } from './faq';

frontend/src/lib/api/legalPages.ts

@@ -0,0 +1,34 @@
+import { fetchApi } from './client';
+import type { LegalPage, LegalPagePublic, LegalPageListItem } from './types';
+
+export const legalPagesApi = {
+  // Public endpoints
+  getAll: (locale?: string) =>
+    fetchApi<{ pages: LegalPageListItem[] }>(`/api/legal-pages${locale ? `?locale=${locale}` : ''}`),
+
+  getBySlug: (slug: string, locale?: string) =>
+    fetchApi<{ page: LegalPagePublic }>(`/api/legal-pages/${slug}${locale ? `?locale=${locale}` : ''}`),
+
+  // Admin endpoints
+  getAdminList: () =>
+    fetchApi<{ pages: LegalPage[] }>('/api/legal-pages/admin/list'),
+
+  getAdminPage: (slug: string) =>
+    fetchApi<{ page: LegalPage }>(`/api/legal-pages/admin/${slug}`),
+
+  update: (slug: string, data: {
+    contentMarkdown?: string;
+    contentMarkdownEs?: string;
+    title?: string;
+    titleEs?: string;
+  }) =>
+    fetchApi<{ page: LegalPage; message: string }>(`/api/legal-pages/admin/${slug}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    }),
+
+  seed: () =>
+    fetchApi<{ message: string; seeded: number; pages?: string[] }>('/api/legal-pages/admin/seed', {
+      method: 'POST',
+    }),
+};

frontend/src/lib/api/legalSettings.ts

@@ -0,0 +1,12 @@
+import { fetchApi } from './client';
+import type { LegalSettingsData } from './types';
+
+export const legalSettingsApi = {
+  get: () => fetchApi<{ settings: LegalSettingsData }>('/api/legal-settings'),
+
+  update: (data: Partial<LegalSettingsData>) =>
+    fetchApi<{ settings: LegalSettingsData; message: string }>('/api/legal-settings', {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    }),
+};

frontend/src/lib/api/media.ts

@@ -0,0 +1,37 @@
+import { fetchApi, API_BASE, getToken } from './client';
+import type { Media } from './types';
+
+export const mediaApi = {
+  getAll: (relatedType?: string, relatedId?: string) => {
+    const params = new URLSearchParams();
+    if (relatedType) params.set('relatedType', relatedType);
+    if (relatedId) params.set('relatedId', relatedId);
+    const query = params.toString();
+    return fetchApi<{ media: Media[] }>(`/api/media${query ? `?${query}` : ''}`);
+  },
+
+  upload: async (file: File, relatedId?: string, relatedType?: string) => {
+    const token = getToken();
+
+    const formData = new FormData();
+    formData.append('file', file);
+    if (relatedId) formData.append('relatedId', relatedId);
+    if (relatedType) formData.append('relatedType', relatedType);
+
+    const res = await fetch(`${API_BASE}/api/media/upload`, {
+      method: 'POST',
+      headers: token ? { 'Authorization': `Bearer ${token}` } : {},
+      body: formData,
+    });
+
+    if (!res.ok) {
+      const errorData = await res.json().catch(() => ({ error: 'Upload failed' }));
+      throw new Error(errorData.error || 'Upload failed');
+    }
+
+    return res.json() as Promise<{ media: Media; url: string }>;
+  },
+
+  delete: (id: string) =>
+    fetchApi<{ message: string }>(`/api/media/${id}`, { method: 'DELETE' }),
+};

frontend/src/lib/api/paymentOptions.ts

@@ -0,0 +1,41 @@
+import { fetchApi } from './client';
+import type { PaymentOptionsConfig } from './types';
+
+export const paymentOptionsApi = {
+  // Global payment options
+  getGlobal: () =>
+    fetchApi<{ paymentOptions: PaymentOptionsConfig }>('/api/payment-options'),
+
+  updateGlobal: (data: Partial<PaymentOptionsConfig>) =>
+    fetchApi<{ paymentOptions: PaymentOptionsConfig; message: string }>('/api/payment-options', {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    }),
+
+  // Event-specific options (merged with global). Pass ticketId after booking to
+  // retrieve bank/TPago credentials gated behind the booking capability token.
+  getForEvent: (eventId: string, ticketId?: string) =>
+    fetchApi<{ paymentOptions: PaymentOptionsConfig; hasOverrides: boolean }>(
+      `/api/payment-options/event/${eventId}${ticketId ? `?ticketId=${encodeURIComponent(ticketId)}` : ''}`
+    ),
+
+  // Event overrides (admin only)
+  getEventOverrides: (eventId: string) =>
+    fetchApi<{ overrides: Partial<PaymentOptionsConfig> | null }>(
+      `/api/payment-options/event/${eventId}/overrides`
+    ),
+
+  updateEventOverrides: (eventId: string, data: Partial<PaymentOptionsConfig>) =>
+    fetchApi<{ overrides: Partial<PaymentOptionsConfig>; message: string }>(
+      `/api/payment-options/event/${eventId}/overrides`,
+      {
+        method: 'PUT',
+        body: JSON.stringify(data),
+      }
+    ),
+
+  deleteEventOverrides: (eventId: string) =>
+    fetchApi<{ message: string }>(`/api/payment-options/event/${eventId}/overrides`, {
+      method: 'DELETE',
+    }),
+};

frontend/src/lib/api/payments.ts

@@ -0,0 +1,49 @@
+import { fetchApi } from './client';
+import type { Payment, PaymentWithDetails } from './types';
+
+export const paymentsApi = {
+  getAll: (params?: { status?: string; provider?: string; pendingApproval?: boolean; eventId?: string; eventIds?: string[] }) => {
+    const query = new URLSearchParams();
+    if (params?.status) query.set('status', params.status);
+    if (params?.provider) query.set('provider', params.provider);
+    if (params?.pendingApproval) query.set('pendingApproval', 'true');
+    if (params?.eventId) query.set('eventId', params.eventId);
+    if (params?.eventIds && params.eventIds.length > 0) query.set('eventIds', params.eventIds.join(','));
+    return fetchApi<{ payments: PaymentWithDetails[] }>(`/api/payments?${query}`);
+  },
+
+  getPendingApproval: () =>
+    fetchApi<{ payments: PaymentWithDetails[] }>('/api/payments/pending-approval'),
+
+  update: (id: string, data: { status: string; reference?: string; adminNote?: string }) =>
+    fetchApi<{ payment: Payment }>(`/api/payments/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    }),
+
+  approve: (id: string, adminNote?: string, sendEmail: boolean = true) =>
+    fetchApi<{ payment: Payment; message: string }>(`/api/payments/${id}/approve`, {
+      method: 'POST',
+      body: JSON.stringify({ adminNote, sendEmail }),
+    }),
+
+  reject: (id: string, adminNote?: string, sendEmail: boolean = true) =>
+    fetchApi<{ payment: Payment; message: string }>(`/api/payments/${id}/reject`, {
+      method: 'POST',
+      body: JSON.stringify({ adminNote, sendEmail }),
+    }),
+
+  sendReminder: (id: string) =>
+    fetchApi<{ message: string; reminderSentAt?: string }>(`/api/payments/${id}/send-reminder`, {
+      method: 'POST',
+    }),
+
+  updateNote: (id: string, adminNote: string) =>
+    fetchApi<{ payment: Payment; message: string }>(`/api/payments/${id}/note`, {
+      method: 'POST',
+      body: JSON.stringify({ adminNote }),
+    }),
+
+  refund: (id: string) =>
+    fetchApi<{ message: string }>(`/api/payments/${id}/refund`, { method: 'POST' }),
+};

frontend/src/lib/api/siteSettings.ts

@@ -0,0 +1,21 @@
+import { fetchApi } from './client';
+import type { SiteSettings, TimezoneOption } from './types';
+
+export const siteSettingsApi = {
+  get: () => fetchApi<{ settings: SiteSettings }>('/api/site-settings'),
+
+  update: (data: Partial<SiteSettings>) =>
+    fetchApi<{ settings: SiteSettings; message: string }>('/api/site-settings', {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    }),
+
+  getTimezones: () =>
+    fetchApi<{ timezones: TimezoneOption[] }>('/api/site-settings/timezones'),
+
+  setFeaturedEvent: (eventId: string | null) =>
+    fetchApi<{ featuredEventId: string | null; message: string }>('/api/site-settings/featured-event', {
+      method: 'PUT',
+      body: JSON.stringify({ eventId }),
+    }),
+};

frontend/src/lib/api/tickets.ts

@@ -0,0 +1,142 @@
+import { fetchApi, API_BASE } from './client';
+import type {
+  Ticket,
+  Payment,
+  BookingData,
+  TicketValidationResult,
+  TicketSearchResult,
+  LiveSearchResult,
+} from './types';
+
+export const ticketsApi = {
+  book: (data: BookingData) =>
+    fetchApi<{ ticket: Ticket; payment: Payment; message: string }>('/api/tickets', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    }),
+
+  getById: (id: string) => fetchApi<{ ticket: Ticket }>(`/api/tickets/${id}`),
+
+  getAll: (params?: { eventId?: string; status?: string }) => {
+    const query = new URLSearchParams();
+    if (params?.eventId) query.set('eventId', params.eventId);
+    if (params?.status) query.set('status', params.status);
+    return fetchApi<{ tickets: Ticket[] }>(`/api/tickets?${query}`);
+  },
+
+  // Validate ticket by QR code (for scanner)
+  validate: (code: string, eventId?: string) =>
+    fetchApi<TicketValidationResult>('/api/tickets/validate', {
+      method: 'POST',
+      body: JSON.stringify({ code, eventId }),
+    }),
+
+  // Search tickets by name/email (for scanner manual search)
+  search: (query: string, eventId?: string) =>
+    fetchApi<{ tickets: TicketSearchResult[] }>('/api/tickets/search', {
+      method: 'POST',
+      body: JSON.stringify({ query, eventId }),
+    }),
+
+  // Get event check-in stats (for scanner header counter)
+  getCheckinStats: (eventId: string) =>
+    fetchApi<{ eventId: string; capacity: number; checkedIn: number; totalActive: number }>(
+      `/api/tickets/stats/checkin?eventId=${eventId}`
+    ),
+
+  // Live search tickets (GET - for scanner live search with debounce)
+  searchLive: (q: string, eventId?: string) => {
+    const params = new URLSearchParams();
+    params.set('q', q);
+    if (eventId) params.set('eventId', eventId);
+    return fetchApi<{ tickets: LiveSearchResult[] }>(`/api/tickets/search?${params}`);
+  },
+
+  checkin: (id: string) =>
+    fetchApi<{ ticket: Ticket & { attendeeName?: string }; event?: { id: string; title: string }; message: string }>(`/api/tickets/${id}/checkin`, {
+      method: 'POST',
+    }),
+
+  removeCheckin: (id: string) =>
+    fetchApi<{ ticket: Ticket; message: string }>(`/api/tickets/${id}/remove-checkin`, {
+      method: 'POST',
+    }),
+
+  cancel: (id: string) =>
+    fetchApi<{ message: string }>(`/api/tickets/${id}/cancel`, { method: 'POST' }),
+
+  updateStatus: (id: string, status: string) =>
+    fetchApi<{ ticket: Ticket }>(`/api/tickets/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify({ status }),
+    }),
+
+  updateNote: (id: string, note: string) =>
+    fetchApi<{ ticket: Ticket; message: string }>(`/api/tickets/${id}/note`, {
+      method: 'POST',
+      body: JSON.stringify({ note }),
+    }),
+
+  markPaid: (id: string) =>
+    fetchApi<{ ticket: Ticket; message: string }>(`/api/tickets/${id}/mark-paid`, {
+      method: 'POST',
+    }),
+
+  // For manual payment methods (bank_transfer, tpago) - user marks payment as sent
+  markPaymentSent: (id: string, payerName?: string) =>
+    fetchApi<{ payment: Payment; message: string }>(`/api/tickets/${id}/mark-payment-sent`, {
+      method: 'POST',
+      body: JSON.stringify({ payerName }),
+    }),
+
+  adminCreate: (data: {
+    eventId: string;
+    firstName: string;
+    lastName?: string;
+    email?: string;
+    phone?: string;
+    preferredLanguage?: 'en' | 'es';
+    autoCheckin?: boolean;
+    adminNote?: string;
+  }) =>
+    fetchApi<{ ticket: Ticket; payment: Payment; message: string }>('/api/tickets/admin/create', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    }),
+
+  manualCreate: (data: {
+    eventId: string;
+    firstName: string;
+    lastName?: string;
+    email: string;
+    phone?: string;
+    preferredLanguage?: 'en' | 'es';
+    adminNote?: string;
+  }) =>
+    fetchApi<{ ticket: Ticket; payment: Payment; message: string }>('/api/tickets/admin/manual', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    }),
+
+  guestCreate: (data: {
+    eventId: string;
+    firstName: string;
+    lastName?: string;
+    email?: string;
+    phone?: string;
+    preferredLanguage?: 'en' | 'es';
+    adminNote?: string;
+  }) =>
+    fetchApi<{ ticket: Ticket; payment: Payment; message: string }>('/api/tickets/admin/guest', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    }),
+
+  checkPaymentStatus: (ticketId: string) =>
+    fetchApi<{ ticketStatus: string; paymentStatus: string; lnbitsStatus?: string; isPaid: boolean }>(
+      `/api/lnbits/status/${ticketId}`
+    ),
+
+  // Get PDF download URL (returns the URL, not the PDF itself)
+  getPdfUrl: (id: string) => `${API_BASE}/api/tickets/${id}/pdf`,
+};

frontend/src/lib/api/types.ts

@@ -0,0 +1,546 @@
+export interface Event {
+  id: string;
+  slug: string;
+  title: string;
+  titleEs?: string;
+  description: string;
+  descriptionEs?: string;
+  shortDescription?: string;
+  shortDescriptionEs?: string;
+  startDatetime: string;
+  endDatetime?: string;
+  location: string;
+  locationUrl?: string;
+  price: number;
+  currency: string;
+  capacity: number;
+  status: 'draft' | 'published' | 'unlisted' | 'cancelled' | 'completed' | 'archived';
+  bannerUrl?: string;
+  externalBookingEnabled?: boolean;
+  externalBookingUrl?: string;
+  bookedCount?: number;
+  availableSeats?: number;
+  isFeatured?: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface Ticket {
+  id: string;
+  bookingId?: string; // Groups multiple tickets from same booking
+  bookingTicketCount?: number; // Total tickets in the booking (for per-quantity payment links)
+  userId: string;
+  eventId: string;
+  attendeeFirstName: string;
+  attendeeLastName?: string;
+  attendeeEmail?: string;
+  attendeePhone?: string;
+  attendeeRuc?: string;
+  preferredLanguage?: string;
+  status: 'pending' | 'confirmed' | 'cancelled' | 'checked_in';
+  checkinAt?: string;
+  checkedInByAdminId?: string;
+  qrCode: string;
+  adminNote?: string;
+  isGuest?: boolean;
+  createdAt: string;
+  event?: Event;
+  payment?: Payment;
+  user?: User;
+}
+
+export interface TicketValidationResult {
+  valid: boolean;
+  status: 'valid' | 'already_checked_in' | 'pending_payment' | 'cancelled' | 'invalid' | 'wrong_event';
+  canCheckIn: boolean;
+  ticket?: {
+    id: string;
+    qrCode: string;
+    attendeeName: string;
+    attendeeEmail?: string;
+    attendeePhone?: string;
+    status: string;
+    checkinAt?: string;
+    checkedInBy?: string;
+  };
+  event?: {
+    id: string;
+    title: string;
+    startDatetime: string;
+    location: string;
+  };
+  error?: string;
+}
+
+export interface TicketSearchResult {
+  id: string;
+  qrCode: string;
+  attendeeName: string;
+  attendeeEmail?: string;
+  attendeePhone?: string;
+  status: string;
+  checkinAt?: string;
+  event?: {
+    id: string;
+    title: string;
+    startDatetime: string;
+    location: string;
+  } | null;
+}
+
+export interface LiveSearchResult {
+  ticket_id: string;
+  name: string;
+  email?: string;
+  status: string;
+  checked_in: boolean;
+  checkinAt?: string;
+  event_id: string;
+  qrCode: string;
+  event?: {
+    id: string;
+    title: string;
+    startDatetime: string;
+    location: string;
+  } | null;
+}
+
+export interface Payment {
+  id: string;
+  ticketId: string;
+  provider: 'bancard' | 'lightning' | 'cash' | 'bank_transfer' | 'tpago';
+  amount: number;
+  currency: string;
+  status: 'pending' | 'pending_approval' | 'paid' | 'refunded' | 'failed';
+  reference?: string;
+  userMarkedPaidAt?: string;
+  payerName?: string; // Name of payer if different from attendee
+  paidAt?: string;
+  paidByAdminId?: string;
+  adminNote?: string;
+  reminderSentAt?: string; // When payment reminder email was sent
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface PaymentWithDetails extends Payment {
+  ticket: {
+    id: string;
+    bookingId?: string;
+    attendeeFirstName: string;
+    attendeeLastName?: string;
+    attendeeEmail?: string;
+    attendeePhone?: string;
+    status: string;
+  } | null;
+  event: {
+    id: string;
+    title: string;
+    startDatetime: string;
+  } | null;
+}
+
+export interface PaymentOptionsConfig {
+  tpagoEnabled: boolean;
+  tpagoLink?: string | null;
+  tpagoLink2?: string | null;
+  tpagoLink3?: string | null;
+  tpagoLink4?: string | null;
+  tpagoLink5?: string | null;
+  tpagoInstructions?: string | null;
+  tpagoInstructionsEs?: string | null;
+  bankTransferEnabled: boolean;
+  bankName?: string | null;
+  bankAccountHolder?: string | null;
+  bankAccountNumber?: string | null;
+  bankAlias?: string | null;
+  bankPhone?: string | null;
+  bankNotes?: string | null;
+  bankNotesEs?: string | null;
+  lightningEnabled: boolean;
+  cashEnabled: boolean;
+  cashInstructions?: string | null;
+  cashInstructionsEs?: string | null;
+  // Booking settings
+  allowDuplicateBookings?: boolean;
+}
+
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  phone?: string;
+  role: 'admin' | 'organizer' | 'staff' | 'marketing' | 'user';
+  languagePreference?: string;
+  isClaimed?: boolean;
+  rucNumber?: string;
+  accountStatus?: string;
+  createdAt: string;
+}
+
+export interface Contact {
+  id: string;
+  name: string;
+  email: string;
+  message: string;
+  status: 'new' | 'read' | 'replied';
+  createdAt: string;
+}
+
+export interface AttendeeData {
+  firstName: string;
+  lastName?: string;
+}
+
+export interface BookingData {
+  eventId: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  preferredLanguage?: 'en' | 'es';
+  paymentMethod: 'bancard' | 'lightning' | 'cash' | 'bank_transfer' | 'tpago';
+  ruc?: string;
+  // For multi-ticket bookings
+  attendees?: AttendeeData[];
+}
+
+export interface DashboardData {
+  stats: {
+    totalUsers: number;
+    totalEvents: number;
+    totalTickets: number;
+    confirmedTickets: number;
+    pendingPayments: number;
+    totalRevenue: number;
+    newContacts: number;
+    totalSubscribers: number;
+  };
+  upcomingEvents: Event[];
+  recentTickets: Ticket[];
+}
+
+export interface AnalyticsData {
+  events: {
+    id: string;
+    title: string;
+    date: string;
+    capacity: number;
+    totalBookings: number;
+    confirmedBookings: number;
+    checkedIn: number;
+    revenue: number;
+  }[];
+}
+
+export interface Media {
+  id: string;
+  fileUrl: string;
+  type: 'image' | 'video' | 'document';
+  relatedId?: string;
+  relatedType?: string;
+  createdAt: string;
+}
+
+export interface ExportedTicket {
+  ticketId: string;
+  ticketStatus: string;
+  qrCode: string;
+  checkinAt?: string;
+  userName: string;
+  userEmail: string;
+  userPhone?: string;
+  eventTitle: string;
+  eventDate: string;
+  paymentStatus: string;
+  paymentAmount: number;
+  createdAt: string;
+}
+
+export interface EmailTemplate {
+  id: string;
+  name: string;
+  slug: string;
+  subject: string;
+  subjectEs?: string;
+  bodyHtml: string;
+  bodyHtmlEs?: string;
+  bodyText?: string;
+  bodyTextEs?: string;
+  description?: string;
+  variables: EmailVariable[];
+  isSystem: boolean;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface EmailVariable {
+  name: string;
+  description: string;
+  example: string;
+}
+
+export interface EmailLog {
+  id: string;
+  templateId?: string;
+  eventId?: string;
+  recipientEmail: string;
+  recipientName?: string;
+  subject: string;
+  bodyHtml?: string;
+  status: 'pending' | 'sent' | 'failed' | 'bounced';
+  errorMessage?: string;
+  sentAt?: string;
+  sentBy?: string;
+  createdAt: string;
+  resendAttempts?: number;
+  lastResentAt?: string;
+}
+
+export interface EmailStats {
+  total: number;
+  sent: number;
+  failed: number;
+  pending: number;
+}
+
+export interface Pagination {
+  total: number;
+  limit: number;
+  offset: number;
+  hasMore: boolean;
+}
+
+export interface ExportedPayment {
+  paymentId: string;
+  amount: number;
+  currency: string;
+  provider: string;
+  status: string;
+  reference?: string;
+  paidAt?: string;
+  createdAt: string;
+  ticketId: string;
+  attendeeFirstName: string;
+  attendeeLastName?: string;
+  attendeeEmail?: string;
+  eventId: string;
+  eventTitle: string;
+  eventDate: string;
+}
+
+export interface FinancialSummary {
+  totalPayments: number;
+  totalPaid: number;
+  totalPending: number;
+  totalRefunded: number;
+  byProvider: {
+    bancard: number;
+    lightning: number;
+    cash: number;
+    bank_transfer: number;
+    tpago: number;
+  };
+  paidCount: number;
+  pendingCount: number;
+  pendingApprovalCount: number;
+  refundedCount: number;
+  failedCount: number;
+}
+
+// ==================== User Dashboard Types ====================
+
+export interface UserProfile {
+  id: string;
+  email: string;
+  name: string;
+  phone?: string;
+  languagePreference?: string;
+  rucNumber?: string;
+  isClaimed: boolean;
+  accountStatus: string;
+  hasPassword: boolean;
+  hasGoogleLinked: boolean;
+  memberSince: string;
+  membershipDays: number;
+  createdAt: string;
+}
+
+export interface UserTicket extends Ticket {
+  invoice?: {
+    id: string;
+    invoiceNumber: string;
+    pdfUrl?: string;
+    createdAt: string;
+  } | null;
+}
+
+export interface UserPayment extends Payment {
+  ticket: {
+    id: string;
+    attendeeFirstName: string;
+    attendeeLastName?: string;
+    status: string;
+  } | null;
+  event: {
+    id: string;
+    title: string;
+    titleEs?: string;
+    startDatetime: string;
+  } | null;
+  invoice?: {
+    id: string;
+    invoiceNumber: string;
+    pdfUrl?: string;
+  } | null;
+}
+
+export interface UserInvoice {
+  id: string;
+  paymentId: string;
+  invoiceNumber: string;
+  rucNumber?: string;
+  legalName?: string;
+  amount: number;
+  currency: string;
+  pdfUrl?: string;
+  status: string;
+  createdAt: string;
+  event?: {
+    id: string;
+    title: string;
+    titleEs?: string;
+    startDatetime: string;
+  } | null;
+}
+
+export interface UserSession {
+  id: string;
+  userAgent?: string;
+  ipAddress?: string;
+  lastActiveAt: string;
+  createdAt: string;
+}
+
+export interface DashboardSummary {
+  user: {
+    name: string;
+    email: string;
+    accountStatus: string;
+    memberSince: string;
+    membershipDays: number;
+  };
+  stats: {
+    totalTickets: number;
+    confirmedTickets: number;
+    upcomingEvents: number;
+    pendingPayments: number;
+  };
+}
+
+export interface NextEventInfo {
+  event: Event;
+  ticket: Ticket;
+  payment: Payment | null;
+}
+
+// ==================== Site Settings Types ====================
+
+export interface SiteSettings {
+  id?: string;
+  timezone: string;
+  siteName: string;
+  siteDescription?: string | null;
+  siteDescriptionEs?: string | null;
+  contactEmail?: string | null;
+  contactPhone?: string | null;
+  facebookUrl?: string | null;
+  instagramUrl?: string | null;
+  twitterUrl?: string | null;
+  linkedinUrl?: string | null;
+  featuredEventId?: string | null;
+  maintenanceMode: boolean;
+  maintenanceMessage?: string | null;
+  maintenanceMessageEs?: string | null;
+  updatedAt?: string;
+  updatedBy?: string;
+}
+
+export interface TimezoneOption {
+  value: string;
+  label: string;
+}
+
+// ==================== Legal Settings Types ====================
+
+export interface LegalSettingsData {
+  id?: string;
+  companyName?: string | null;
+  legalEntityName?: string | null;
+  rucNumber?: string | null;
+  companyAddress?: string | null;
+  companyCity?: string | null;
+  companyCountry?: string | null;
+  supportEmail?: string | null;
+  legalEmail?: string | null;
+  governingLaw?: string | null;
+  jurisdictionCity?: string | null;
+  updatedAt?: string;
+  updatedBy?: string;
+}
+
+// ==================== Legal Pages Types ====================
+
+export interface LegalPage {
+  id: string;
+  slug: string;
+  title: string;
+  titleEs?: string | null;
+  contentText: string;
+  contentTextEs?: string | null;
+  contentMarkdown: string;
+  contentMarkdownEs?: string | null;
+  updatedAt: string;
+  updatedBy?: string | null;
+  createdAt: string;
+  source?: 'database' | 'filesystem';
+  hasEnglish?: boolean;
+  hasSpanish?: boolean;
+}
+
+export interface LegalPagePublic {
+  id?: string;
+  slug: string;
+  title: string;
+  contentMarkdown: string;
+  updatedAt?: string;
+  source?: 'database' | 'filesystem';
+}
+
+export interface LegalPageListItem {
+  id: string;
+  slug: string;
+  title: string;
+  updatedAt: string;
+  hasEnglish?: boolean;
+  hasSpanish?: boolean;
+}
+
+// ==================== FAQ Types ====================
+
+export interface FaqItem {
+  id: string;
+  question: string;
+  questionEs?: string | null;
+  answer: string;
+  answerEs?: string | null;
+  rank?: number;
+}
+
+export interface FaqItemAdmin extends FaqItem {
+  enabled: boolean;
+  showOnHomepage: boolean;
+  createdAt: string;
+  updatedAt: string;
+}

frontend/src/lib/api/users.ts

@@ -0,0 +1,20 @@
+import { fetchApi } from './client';
+import type { User } from './types';
+
+export const usersApi = {
+  getAll: (role?: string) => {
+    const query = role ? `?role=${role}` : '';
+    return fetchApi<{ users: User[] }>(`/api/users${query}`);
+  },
+
+  getById: (id: string) => fetchApi<{ user: User }>(`/api/users/${id}`),
+
+  update: (id: string, data: Partial<User>) =>
+    fetchApi<{ user: User }>(`/api/users/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    }),
+
+  delete: (id: string) =>
+    fetchApi<{ message: string }>(`/api/users/${id}`, { method: 'DELETE' }),
+};