Normalize RUC formatting to base-checkdigit across booking and admin views.

Accept dashed or digits-only RUC input on the backend, store a canonical dashed form, and display it consistently in booking and admin UIs.

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,23 @@ 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
+
+# Auto-Hold Sweep
+# Bookings awaiting admin payment approval are put on hold (seat released) after
+# this many hours with no confirmation (default: 72)
+HOLD_THRESHOLD_HOURS=72
+# How often the hold sweep job runs, in milliseconds (default: 900000 = 15 min)
+HOLD_SWEEP_INTERVAL_MS=900000
+
+# Ended-Event Payment Sweep
+# Once an event is over, any unconfirmed payment (pending / pending_approval /
+# on_hold) is auto-rejected and its ticket cancelled. No email is sent.
+# How often this sweep runs, in milliseconds (default: 900000 = 15 min)
+EVENT_END_SWEEP_INTERVAL_MS=900000
+

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,7 +23,9 @@
     "dotenv": "^17.2.3",
     "drizzle-orm": "^0.31.2",
     "hono": "^4.4.7",
+    "ioredis": "^5.11.1",
     "jose": "^5.4.0",
+    "moment-timezone": "^0.6.2",
     "nanoid": "^5.0.7",
     "nodemailer": "^7.0.13",
     "pdfkit": "^0.17.2",

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

@@ -5,7 +5,7 @@ import { uniqueSlug } from '../lib/slugify.js';
 
 const dbType = process.env.DB_TYPE || 'sqlite';
 console.log(`Database type: ${dbType}`);
-console.log(`Database URL: ${process.env.DATABASE_URL?.substring(0, 30)}...`);
+// Do not log DATABASE_URL: it may contain credentials.
 
 async function migrate() {
   console.log('Running migrations...');
@@ -43,6 +43,9 @@ async function migrate() {
     try {
       await (db as any).run(sql`ALTER TABLE users ADD COLUMN account_status TEXT NOT NULL DEFAULT 'active'`);
     } catch (e) { /* column may already exist */ }
+    try {
+      await (db as any).run(sql`ALTER TABLE users ADD COLUMN token_version INTEGER NOT NULL DEFAULT 0`);
+    } catch (e) { /* column may already exist */ }
 
     // Magic link tokens table
     await (db as any).run(sql`
@@ -235,6 +238,15 @@ async function migrate() {
     try {
       await (db as any).run(sql`ALTER TABLE payments ADD COLUMN reminder_sent_at TEXT`);
     } catch (e) { /* column may already exist */ }
+    try {
+      await (db as any).run(sql`ALTER TABLE payments ADD COLUMN lnbits_invoice TEXT`);
+    } catch (e) { /* column may already exist */ }
+    try {
+      await (db as any).run(sql`ALTER TABLE payments ADD COLUMN lnbits_expires_at TEXT`);
+    } catch (e) { /* column may already exist */ }
+    try {
+      await (db as any).run(sql`ALTER TABLE payments ADD COLUMN lnbits_amount_sats INTEGER`);
+    } catch (e) { /* column may already exist */ }
 
     // Invoices table
     await (db as any).run(sql`
@@ -429,6 +441,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 (
@@ -541,6 +565,9 @@ async function migrate() {
     try {
       await (db as any).execute(sql`ALTER TABLE users ADD COLUMN account_status VARCHAR(20) NOT NULL DEFAULT 'active'`);
     } catch (e) { /* column may already exist */ }
+    try {
+      await (db as any).execute(sql`ALTER TABLE users ADD COLUMN token_version INTEGER NOT NULL DEFAULT 0`);
+    } catch (e) { /* column may already exist */ }
 
     // Magic link tokens table
     await (db as any).execute(sql`
@@ -701,6 +728,15 @@ async function migrate() {
     try {
       await (db as any).execute(sql`ALTER TABLE payments ADD COLUMN reminder_sent_at TIMESTAMP`);
     } catch (e) { /* column may already exist */ }
+    try {
+      await (db as any).execute(sql`ALTER TABLE payments ADD COLUMN lnbits_invoice TEXT`);
+    } catch (e) { /* column may already exist */ }
+    try {
+      await (db as any).execute(sql`ALTER TABLE payments ADD COLUMN lnbits_expires_at TIMESTAMP`);
+    } catch (e) { /* column may already exist */ }
+    try {
+      await (db as any).execute(sql`ALTER TABLE payments ADD COLUMN lnbits_amount_sats INTEGER`);
+    } catch (e) { /* column may already exist */ }
 
     // Invoices table
     await (db as any).execute(sql`
@@ -893,6 +929,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 (
@@ -974,6 +1022,27 @@ async function migrate() {
     `);
   }
 
+  // Indexes on foreign-key / hot-filter columns (CREATE INDEX IF NOT EXISTS works on both engines)
+  const indexStatements = [
+    `CREATE INDEX IF NOT EXISTS tickets_event_id_idx ON tickets(event_id)`,
+    `CREATE INDEX IF NOT EXISTS tickets_user_id_idx ON tickets(user_id)`,
+    `CREATE INDEX IF NOT EXISTS tickets_booking_id_idx ON tickets(booking_id)`,
+    `CREATE INDEX IF NOT EXISTS tickets_status_idx ON tickets(status)`,
+    `CREATE INDEX IF NOT EXISTS payments_ticket_id_idx ON payments(ticket_id)`,
+    `CREATE INDEX IF NOT EXISTS payments_status_idx ON payments(status)`,
+    `CREATE INDEX IF NOT EXISTS email_logs_event_id_idx ON email_logs(event_id)`,
+    `CREATE INDEX IF NOT EXISTS magic_link_tokens_token_idx ON magic_link_tokens(token)`,
+  ];
+  for (const stmt of indexStatements) {
+    try {
+      if (dbType === 'sqlite') {
+        await (db as any).run(sql.raw(stmt));
+      } else {
+        await (db as any).execute(sql.raw(stmt));
+      }
+    } catch (e) { /* index may already exist */ }
+  }
+
   // Backfill slugs for any events that don't have one yet (shared across DB types).
   // Ordered by creation so duplicate titles get deterministic -2, -3 suffixes.
   const allEvents = await dbAll<{ id: string; title: string; slug: string | null }>(

backend/src/db/schema.ts

@@ -18,6 +18,8 @@ export const sqliteUsers = sqliteTable('users', {
   googleId: text('google_id'),
   rucNumber: text('ruc_number'),
   accountStatus: text('account_status', { enum: ['active', 'unclaimed', 'suspended'] }).notNull().default('active'),
+  // Incremented to invalidate previously issued JWTs (logout-everywhere, password change/reset)
+  tokenVersion: integer('token_version').notNull().default(0),
   createdAt: text('created_at').notNull(),
   updatedAt: text('updated_at').notNull(),
 });
@@ -102,7 +104,7 @@ export const sqliteTickets = sqliteTable('tickets', {
   attendeePhone: text('attendee_phone'),
   attendeeRuc: text('attendee_ruc'), // Paraguayan tax ID for invoicing
   preferredLanguage: text('preferred_language'),
-  status: text('status', { enum: ['pending', 'confirmed', 'cancelled', 'checked_in'] }).notNull().default('pending'),
+  status: text('status', { enum: ['pending', 'confirmed', 'cancelled', 'checked_in', 'on_hold'] }).notNull().default('pending'),
   checkinAt: text('checkin_at'),
   checkedInByAdminId: text('checked_in_by_admin_id').references(() => sqliteUsers.id), // Who performed the check-in
   qrCode: text('qr_code'),
@@ -117,8 +119,11 @@ export const sqlitePayments = sqliteTable('payments', {
   provider: text('provider', { enum: ['bancard', 'lightning', 'cash', 'bank_transfer', 'tpago'] }).notNull(),
   amount: real('amount').notNull(),
   currency: text('currency').notNull().default('PYG'),
-  status: text('status', { enum: ['pending', 'pending_approval', 'paid', 'refunded', 'failed', 'cancelled'] }).notNull().default('pending'),
+  status: text('status', { enum: ['pending', 'pending_approval', 'paid', 'refunded', 'failed', 'cancelled', 'on_hold'] }).notNull().default('pending'),
   reference: text('reference'),
+  lnbitsInvoice: text('lnbits_invoice'), // BOLT11 string, stored so an unpaid invoice can be redisplayed without a new LNbits call
+  lnbitsExpiresAt: text('lnbits_expires_at'), // When lnbitsInvoice expires
+  lnbitsAmountSats: integer('lnbits_amount_sats'), // Sats amount for display (from LNbits' fiat conversion)
   userMarkedPaidAt: text('user_marked_paid_at'), // When user clicked "I Have Paid"
   payerName: text('payer_name'), // Name of payer if different from attendee
   paidAt: text('paid_at'),
@@ -271,6 +276,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(),
@@ -359,6 +376,8 @@ export const pgUsers = pgTable('users', {
   googleId: varchar('google_id', { length: 255 }),
   rucNumber: varchar('ruc_number', { length: 15 }),
   accountStatus: varchar('account_status', { length: 20 }).notNull().default('active'),
+  // Incremented to invalidate previously issued JWTs (logout-everywhere, password change/reset)
+  tokenVersion: pgInteger('token_version').notNull().default(0),
   createdAt: timestamp('created_at').notNull(),
   updatedAt: timestamp('updated_at').notNull(),
 });
@@ -460,6 +479,9 @@ export const pgPayments = pgTable('payments', {
   currency: varchar('currency', { length: 10 }).notNull().default('PYG'),
   status: varchar('status', { length: 20 }).notNull().default('pending'),
   reference: varchar('reference', { length: 255 }),
+  lnbitsInvoice: pgText('lnbits_invoice'), // BOLT11 string, stored so an unpaid invoice can be redisplayed without a new LNbits call
+  lnbitsExpiresAt: timestamp('lnbits_expires_at'), // When lnbitsInvoice expires
+  lnbitsAmountSats: pgInteger('lnbits_amount_sats'), // Sats amount for display (from LNbits' fiat conversion)
   userMarkedPaidAt: timestamp('user_marked_paid_at'),
   payerName: varchar('payer_name', { length: 255 }), // Name of payer if different from attendee
   paidAt: timestamp('paid_at'),
@@ -604,6 +626,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(),
@@ -691,6 +725,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,11 @@ 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 { startHoldSweep } from './lib/holdSweep.js';
+import { startEventEndSweep } from './lib/eventEndSweep.js';
+import { getLock } from './lib/stores/lock.js';
+import { describeBackends, describeRedis, logSelectedBackends } from './lib/backends.js';
 
 const app = new Hono();
 
@@ -56,6 +61,19 @@ app.use(
   })
 );
 
+// Baseline security headers on every response.
+const isProduction = process.env.NODE_ENV === 'production';
+app.use('*', async (c, next) => {
+  await next();
+  c.header('X-Content-Type-Options', 'nosniff');
+  c.header('X-Frame-Options', 'DENY');
+  c.header('Referrer-Policy', 'strict-origin-when-cross-origin');
+  c.header('X-XSS-Protection', '0');
+  if (isProduction) {
+    c.header('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');
+  }
+});
+
 // OpenAPI specification
 const openApiSpec = {
   openapi: '3.0.0',
@@ -657,11 +675,21 @@ const openApiSpec = {
         },
       },
     },
+    '/api/events/next': {
+      get: {
+        tags: ['Events'],
+        summary: 'Get next upcoming event (chronological)',
+        description: 'Get the single earliest upcoming published event, ignoring featured promotion.',
+        responses: {
+          200: { description: 'Next event or null' },
+        },
+      },
+    },
     '/api/events/next/upcoming': {
       get: {
         tags: ['Events'],
         summary: 'Get next upcoming event',
-        description: 'Get the single next upcoming published event.',
+        description: 'Get the featured event if valid, otherwise the single next upcoming published event.',
         responses: {
           200: { description: 'Next event or null' },
         },
@@ -1827,20 +1855,46 @@ const openApiSpec = {
   },
 };
 
-// OpenAPI JSON endpoint
-app.get('/openapi.json', (c) => {
-  return c.json(openApiSpec);
+// API documentation is disabled in production to avoid exposing the full API
+// surface (and schema) to anonymous users. Enable locally / in non-prod only.
+if (!isProduction) {
+  // OpenAPI JSON endpoint
+  app.get('/openapi.json', (c) => {
+    return c.json(openApiSpec);
+  });
+
+  // Swagger UI
+  app.get('/api-docs', swaggerUI({ url: '/openapi.json' }));
+} else {
+  app.get('/openapi.json', (c) => c.json({ error: 'Not Found' }, 404));
+  app.get('/api-docs', (c) => c.json({ error: 'Not Found' }, 404));
+}
+
+// Static file serving for uploads.
+// Uploads are validated as images at write time, but as defense-in-depth we force
+// any non-image path to download as an opaque attachment so a stray/legacy
+// .html/.svg can never be rendered (and therefore never execute script) in-origin.
+app.use('/uploads/*', async (c, next) => {
+  await next();
+  const path = c.req.path.toLowerCase();
+  const isInlineImage = /\.(jpg|jpeg|png|gif|webp|avif)$/.test(path);
+  if (!isInlineImage) {
+    c.header('Content-Disposition', 'attachment');
+    c.header('Content-Type', 'application/octet-stream');
+  }
 });
-
-// Swagger UI
-app.get('/api-docs', swaggerUI({ url: '/openapi.json' }));
-
-// Static file serving for uploads
 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
@@ -1877,15 +1931,36 @@ const port = parseInt(process.env.PORT || '3001');
 // Initialize email queue with the email service reference
 initEmailQueue(emailService);
 
-// Initialize email templates on startup
-emailService.seedDefaultTemplates().catch(err => {
-  console.error('[Email] Failed to seed templates:', err);
-});
+// Periodically expire abandoned pending bookings so they stop holding seats.
+startBookingCleanup();
+
+// Periodically put stale pending-approval payments on hold, releasing their seats.
+startHoldSweep();
+
+// Periodically auto-reject unconfirmed payments once their event is over (no email).
+startEventEndSweep();
+
+// 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

@@ -4,10 +4,21 @@ import bcrypt from 'bcryptjs';
 import crypto from 'crypto';
 import { Context } from 'hono';
 import { db, dbGet, dbAll, users, magicLinkTokens, userSessions } from '../db/index.js';
-import { eq, and, gt } from 'drizzle-orm';
+import { eq, and, gt, sql, isNull } from 'drizzle-orm';
 import { generateId, getNow, toDbDate } from './utils.js';
 
-const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET || 'your-super-secret-key-change-in-production');
+const DEFAULT_DEV_JWT_SECRET = 'your-super-secret-key-change-in-production';
+const rawJwtSecret = process.env.JWT_SECRET;
+
+// Never allow the insecure default in production: forgeable tokens = full account takeover.
+if (process.env.NODE_ENV === 'production' && (!rawJwtSecret || rawJwtSecret === DEFAULT_DEV_JWT_SECRET)) {
+  throw new Error('JWT_SECRET must be set to a strong, unique value in production. Refusing to start with the default secret.');
+}
+if (!rawJwtSecret) {
+  console.warn('[auth] JWT_SECRET is not set; using an insecure development default. Set JWT_SECRET in production.');
+}
+
+const JWT_SECRET = new TextEncoder().encode(rawJwtSecret || DEFAULT_DEV_JWT_SECRET);
 const JWT_ISSUER = 'spanglish';
 const JWT_AUDIENCE = 'spanglish-app';
 
@@ -15,6 +26,7 @@ export interface JWTPayload {
   sub: string;
   email: string;
   role: string;
+  tokenVersion?: number;
   iat: number;
   exp: number;
 }
@@ -84,23 +96,36 @@ export async function verifyMagicLinkToken(
       )
   );
 
+  // Use a single generic error for all invalid states to avoid leaking token state
+  const genericError = 'Invalid or expired token';
+
   if (!tokenRecord) {
-    return { valid: false, error: 'Invalid token' };
+    return { valid: false, error: genericError };
   }
 
   if (tokenRecord.usedAt) {
-    return { valid: false, error: 'Token already used' };
+    return { valid: false, error: genericError };
   }
 
   if (new Date(tokenRecord.expiresAt) < new Date()) {
-    return { valid: false, error: 'Token expired' };
+    return { valid: false, error: genericError };
   }
 
-  // Mark token as used
-  await (db as any)
+  // Atomically consume the token: only the request that flips used_at from NULL wins.
+  // This prevents a double-spend race where two concurrent requests both pass the
+  // read-time "not used" check above.
+  const result: any = await (db as any)
     .update(magicLinkTokens)
     .set({ usedAt: now })
-    .where(eq((magicLinkTokens as any).id, tokenRecord.id));
+    .where(and(
+      eq((magicLinkTokens as any).id, tokenRecord.id),
+      isNull((magicLinkTokens as any).usedAt)
+    ));
+
+  const affected = result?.changes ?? result?.rowCount ?? 0;
+  if (affected === 0) {
+    return { valid: false, error: genericError };
+  }
 
   return { valid: true, userId: tokenRecord.userId };
 }
@@ -167,26 +192,67 @@ 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 };
 }
 
-export async function createToken(userId: string, email: string, role: string): Promise<string> {
-  const token = await new jose.SignJWT({ sub: userId, email, role })
+export async function createToken(userId: string, email: string, role: string, tokenVersion: number = 0): Promise<string> {
+  const token = await new jose.SignJWT({ sub: userId, email, role, tokenVersion })
     .setProtectedHeader({ alg: 'HS256' })
     .setIssuedAt()
     .setIssuer(JWT_ISSUER)
     .setAudience(JWT_AUDIENCE)
-    .setExpirationTime('7d')
+    .setExpirationTime('1d')
     .sign(JWT_SECRET);
   
   return token;
 }
 
+// Invalidate all previously issued JWTs for a user (logout-everywhere, password change/reset).
+export async function bumpTokenVersion(userId: string): Promise<void> {
+  await (db as any)
+    .update(users)
+    .set({ tokenVersion: sql`${(users as any).tokenVersion} + 1` })
+    .where(eq((users as any).id, userId));
+}
+
 export async function createRefreshToken(userId: string): Promise<string> {
   const token = await new jose.SignJWT({ sub: userId, type: 'refresh' })
     .setProtectedHeader({ alg: 'HS256' })
@@ -223,10 +289,44 @@ export async function getAuthUser(c: Context): Promise<any | null> {
     return null;
   }
   
+  // Never load the password hash into request context — it is only needed for
+  // explicit password-verification routes that query it separately.
   const user = await dbGet<any>(
-    (db as any).select().from(users).where(eq((users as any).id, payload.sub))
+    (db as any)
+      .select({
+        id: (users as any).id,
+        email: (users as any).email,
+        name: (users as any).name,
+        phone: (users as any).phone,
+        role: (users as any).role,
+        languagePreference: (users as any).languagePreference,
+        isClaimed: (users as any).isClaimed,
+        googleId: (users as any).googleId,
+        rucNumber: (users as any).rucNumber,
+        accountStatus: (users as any).accountStatus,
+        tokenVersion: (users as any).tokenVersion,
+        createdAt: (users as any).createdAt,
+        updatedAt: (users as any).updatedAt,
+      })
+      .from(users)
+      .where(eq((users as any).id, payload.sub))
   );
-  return user || null;
+
+  if (!user) {
+    return null;
+  }
+
+  // Reject tokens issued before a logout-everywhere / password change
+  if ((payload.tokenVersion ?? 0) !== (user.tokenVersion ?? 0)) {
+    return null;
+  }
+
+  // Suspended/unclaimed accounts must not retain API access via an old JWT
+  if (user.accountStatus && user.accountStatus !== 'active') {
+    return null;
+  }
+
+  return user;
 }
 
 export function requireAuth(roles?: string[]) {
@@ -252,3 +352,15 @@ export async function isFirstUser(): Promise<boolean> {
   );
   return !result || result.length === 0;
 }
+
+/** Fetch only the password hash column (never expose via getAuthUser). */
+export async function getUserPasswordHash(userId: string): Promise<string | null> {
+  const row = await dbGet<any>(
+    (db as any)
+      .select({ password: (users as any).password })
+      .from(users)
+      .where(eq((users as any).id, userId))
+  );
+  const hash = row?.password;
+  return hash && String(hash).length > 0 ? String(hash) : null;
+}

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
-// Processes emails asynchronously in the background without blocking the request thread
+// Durable email queue with rate limiting.
+// 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({
-    id,
-    type: 'template',
-    params,
-    addedAt: Date.now(),
-  });
-  scheduleProcessing();
+  insertJob(id, params)
+    .then(() => scheduleProcessing())
+    .catch((err) => console.error('[EmailQueue] Failed to enqueue email:', err?.message || err));
   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[] = [];
-  for (const params of paramsList) {
-    const id = generateId();
-    queue.push({
-      id,
-      type: 'template',
-      params,
-      addedAt: Date.now(),
-    });
-    ids.push(id);
-  }
-  if (ids.length > 0) {
-    console.log(`[EmailQueue] Queued ${ids.length} emails for background processing`);
-    scheduleProcessing();
-  }
+  const ids = paramsList.map(() => generateId());
+  if (ids.length === 0) return ids;
+
+  Promise.all(paramsList.map((params, i) => insertJob(ids[i], params)))
+    .then(() => {
+      console.log(`[EmailQueue] Queued ${ids.length} emails for background processing`);
+      scheduleProcessing();
+    })
+    .catch((err) => console.error('[EmailQueue] Failed to enqueue bulk emails:', err?.message || err));
+
   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,
-    // so we don't need to retry here. The error is logged and we move on.
+    // The sendTemplateEmail method already logs the failure in the email_logs
+    // 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/emailTemplates.ts

@@ -1216,8 +1216,26 @@ Spanglish`,
   },
 ];
 
-// Helper function to replace template variables
-export function replaceTemplateVariables(template: string, variables: Record<string, any>): string {
+// Escape HTML-significant characters so substituted variable values can't inject markup.
+function escapeHtmlValue(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#x27;');
+}
+
+// Helper function to replace template variables.
+// When `escapeHtml` is true (HTML rendering contexts), substituted *values* are
+// HTML-escaped to prevent stored-XSS via attacker-influenced variables (e.g. event
+// location, attendee name). The template markup itself is never escaped. Subjects and
+// plain-text bodies pass `escapeHtml=false` so they don't show literal entities.
+export function replaceTemplateVariables(
+  template: string,
+  variables: Record<string, any>,
+  escapeHtml: boolean = false
+): string {
   let result = template;
   
   // Handle conditional blocks {{#if variable}}...{{/if}}
@@ -1229,16 +1247,20 @@ export function replaceTemplateVariables(template: string, variables: Record<str
   // Replace simple variables {{variable}}
   const variableRegex = /\{\{(\w+)\}\}/g;
   result = result.replace(variableRegex, (match, varName) => {
-    return variables[varName] !== undefined ? String(variables[varName]) : match;
+    if (variables[varName] === undefined) return match;
+    const raw = String(variables[varName]);
+    return escapeHtml ? escapeHtmlValue(raw) : raw;
   });
   
   return result;
 }
 
-// Helper to wrap content in the base template
+// Helper to wrap content in the base template.
+// `content` is treated as trusted HTML (it is the already-rendered body). The wrapper's
+// own variables (subject, year, etc.) are HTML-escaped on substitution.
 export function wrapInBaseTemplate(content: string, variables: Record<string, any>): string {
-  const wrappedContent = baseEmailWrapper.replace('{{content}}', content);
-  return replaceTemplateVariables(wrappedContent, variables);
+  const wrappedContent = baseEmailWrapper.replace('{{content}}', () => content);
+  return replaceTemplateVariables(wrappedContent, variables, true);
 }
 
 // Get all available variables for a template by slug

backend/src/lib/eventEndSweep.ts

@@ -0,0 +1,124 @@
+// Auto-reject unconfirmed payments once their event is over.
+//
+// After an event ends, any booking whose payment was never confirmed
+// (still 'pending', 'pending_approval', or 'on_hold') can no longer be honored.
+// This job silently fails those payments and cancels their tickets so they stop
+// lingering as "pending" forever. It deliberately sends NO email — unlike the
+// admin reject route, this is a housekeeping sweep and users are not notified.
+//
+// An event is considered over when COALESCE(end_datetime, start_datetime) is in
+// the past. Updates are guarded by the current status so re-running is a no-op.
+
+import { and, eq, inArray } from 'drizzle-orm';
+import { db, dbAll, tickets, payments, events } from '../db/index.js';
+import { getNow } from './utils.js';
+import { getLock } from './stores/lock.js';
+
+// Payment statuses that represent an unconfirmed booking.
+const UNCONFIRMED_PAYMENT_STATUSES = ['pending', 'pending_approval', 'on_hold'];
+// Ticket statuses that are still "live" (not already confirmed/checked-in/cancelled).
+const ACTIVE_TICKET_STATUSES = ['pending', 'on_hold'];
+
+/**
+ * Fail unconfirmed payments (and cancel their tickets) for events that have
+ * already ended. Returns the number of payments rejected.
+ */
+export async function rejectUnconfirmedPaymentsForEndedEvents(): Promise<number> {
+  // Pull candidate rows first, then decide "ended" in JS so the comparison works
+  // identically for SQLite (ISO text) and Postgres (timestamp) datetime columns.
+  const rows = await dbAll<{
+    paymentId: string;
+    ticketId: string;
+    endDatetime: string | Date | null;
+    startDatetime: string | Date | null;
+  }>(
+    (db as any)
+      .select({
+        paymentId: (payments as any).id,
+        ticketId: (tickets as any).id,
+        endDatetime: (events as any).endDatetime,
+        startDatetime: (events as any).startDatetime,
+      })
+      .from(payments)
+      .innerJoin(tickets, eq((payments as any).ticketId, (tickets as any).id))
+      .innerJoin(events, eq((tickets as any).eventId, (events as any).id))
+      .where(and(
+        inArray((payments as any).status, UNCONFIRMED_PAYMENT_STATUSES),
+        inArray((tickets as any).status, ACTIVE_TICKET_STATUSES),
+      ))
+  );
+
+  const nowMs = Date.now();
+  const ended = rows.filter((r) => {
+    const ref = r.endDatetime || r.startDatetime;
+    if (!ref) return false;
+    return new Date(ref as any).getTime() < nowMs;
+  });
+
+  if (ended.length === 0) return 0;
+
+  const paymentIds = Array.from(new Set(ended.map((r) => r.paymentId)));
+  const ticketIds = Array.from(new Set(ended.map((r) => r.ticketId).filter((id): id is string => !!id)));
+  const now = getNow();
+
+  // Fail the payments. The status guard keeps this idempotent and avoids
+  // clobbering anything that changed since we read the candidates.
+  await (db as any)
+    .update(payments)
+    .set({ status: 'failed', adminNote: 'Auto-rejected: event ended', updatedAt: now })
+    .where(and(
+      inArray((payments as any).id, paymentIds),
+      inArray((payments as any).status, UNCONFIRMED_PAYMENT_STATUSES),
+    ));
+
+  // Cancel the associated tickets, freeing any seats they still hold.
+  if (ticketIds.length > 0) {
+    await (db as any)
+      .update(tickets)
+      .set({ status: 'cancelled' })
+      .where(and(
+        inArray((tickets as any).id, ticketIds),
+        inArray((tickets as any).status, ACTIVE_TICKET_STATUSES),
+      ));
+  }
+
+  console.log(
+    `[EventEndSweep] Auto-rejected ${paymentIds.length} unconfirmed payment(s) for ended event(s); ` +
+    `cancelled ${ticketIds.length} ticket(s).`
+  );
+  return paymentIds.length;
+}
+
+let sweepTimer: ReturnType<typeof setInterval> | null = null;
+
+/**
+ * Start a periodic sweep that auto-rejects unconfirmed payments for ended
+ * events. Each run is guarded by a distributed lock so that, across multiple
+ * replicas, only one instance does the work per interval.
+ */
+export function startEventEndSweep(): void {
+  const intervalMs = parseInt(process.env.EVENT_END_SWEEP_INTERVAL_MS || '900000', 10); // 15 min
+
+  const run = () => {
+    getLock()
+      .withLock('sweep-ended-event-payments', Math.min(intervalMs, 60_000), () =>
+        rejectUnconfirmedPaymentsForEndedEvents()
+      )
+      .catch((err) =>
+        console.error('[EventEndSweep] Run failed:', err?.message || err)
+      );
+  };
+
+  // Run shortly after startup, then on the interval.
+  setTimeout(run, 60_000).unref?.();
+  sweepTimer = setInterval(run, intervalMs);
+  sweepTimer.unref?.();
+  console.log(`[EventEndSweep] Scheduled every ${Math.round(intervalMs / 1000)}s`);
+}
+
+export function stopEventEndSweep(): void {
+  if (sweepTimer) {
+    clearInterval(sweepTimer);
+    sweepTimer = null;
+  }
+}

backend/src/lib/holdRecovery.ts

@@ -0,0 +1,116 @@
+// Shared capacity-checked recovery for on-hold bookings.
+//
+// When a booking is put on hold, its ticket(s) drop out of the capacity-counting
+// statuses ('pending', 'confirmed', 'checked_in'), releasing the seat. Recovering
+// an on-hold booking (user "I've paid" again, or an admin reactivating / marking it
+// paid) must atomically re-check that the event still has room before re-reserving
+// the seat, exactly like the original booking-creation flow in routes/tickets.ts.
+
+import { eq, and, inArray, sql } from 'drizzle-orm';
+import { db, dbGet, tickets, payments, events, isSqlite } from '../db/index.js';
+import { getNow, calculateAvailableSeats, isEventSoldOut } from './utils.js';
+
+export class HoldCapacityError extends Error {
+  constructor(public available: number) {
+    super('EVENT_FULL');
+  }
+}
+
+interface ReserveOptions {
+  paidByAdminId?: string;
+  extraPaymentFields?: Record<string, any>;
+}
+
+/**
+ * Re-reserve seats for a group of on-hold tickets (e.g. all tickets sharing a
+ * bookingId), atomically re-checking capacity before flipping their status.
+ * Throws HoldCapacityError if the event no longer has room for ticketIds.length seats.
+ */
+export async function reserveOnHoldBooking(
+  eventId: string,
+  ticketIds: string[],
+  targetTicketStatus: 'pending' | 'confirmed',
+  targetPaymentStatus: 'pending_approval' | 'paid',
+  options: ReserveOptions = {}
+): Promise<void> {
+  if (ticketIds.length === 0) return;
+
+  const event = await dbGet<any>(
+    (db as any).select().from(events).where(eq((events as any).id, eventId))
+  );
+  if (!event) {
+    throw new Error('Event not found');
+  }
+
+  const now = getNow();
+  const paymentUpdate: Record<string, any> = {
+    status: targetPaymentStatus,
+    updatedAt: now,
+    ...options.extraPaymentFields,
+  };
+  if (targetPaymentStatus === 'paid') {
+    paymentUpdate.paidAt = now;
+    if (options.paidByAdminId) paymentUpdate.paidByAdminId = options.paidByAdminId;
+  }
+
+  const assertCapacity = (reserved: number) => {
+    if (isEventSoldOut(event.capacity, reserved)) {
+      throw new HoldCapacityError(0);
+    }
+    const seatsLeft = calculateAvailableSeats(event.capacity, reserved);
+    if (ticketIds.length > seatsLeft) {
+      throw new HoldCapacityError(seatsLeft);
+    }
+  };
+
+  if (isSqlite()) {
+    (db as any).transaction((tx: any) => {
+      const countRow = tx
+        .select({ count: sql<number>`count(*)` })
+        .from(tickets)
+        .where(and(
+          eq((tickets as any).eventId, eventId),
+          sql`${(tickets as any).status} IN ('pending', 'confirmed', 'checked_in')`
+        ))
+        .get();
+      assertCapacity(Number(countRow?.count || 0));
+
+      tx.update(tickets)
+        .set({ status: targetTicketStatus })
+        .where(and(
+          inArray((tickets as any).id, ticketIds),
+          eq((tickets as any).status, 'on_hold')
+        ))
+        .run();
+
+      tx.update(payments)
+        .set(paymentUpdate)
+        .where(inArray((payments as any).ticketId, ticketIds))
+        .run();
+    });
+  } else {
+    await (db as any).transaction(async (tx: any) => {
+      const countRow = await dbGet<any>(
+        tx
+          .select({ count: sql<number>`count(*)` })
+          .from(tickets)
+          .where(and(
+            eq((tickets as any).eventId, eventId),
+            sql`${(tickets as any).status} IN ('pending', 'confirmed', 'checked_in')`
+          ))
+      );
+      assertCapacity(Number(countRow?.count || 0));
+
+      await tx.update(tickets)
+        .set({ status: targetTicketStatus })
+        .where(and(
+          inArray((tickets as any).id, ticketIds),
+          eq((tickets as any).status, 'on_hold')
+        ));
+
+      await tx.update(payments)
+        .set(paymentUpdate)
+        .where(inArray((payments as any).ticketId, ticketIds));
+    });
+  }
+}

backend/src/lib/holdSweep.ts

@@ -0,0 +1,98 @@
+// Auto-hold stale pending-approval bookings.
+//
+// A payment enters 'pending_approval' when a user clicks "I've paid" on a manual
+// payment method (bank transfer / TPago) and is waiting for an admin to review it.
+// If no admin acts within HOLD_THRESHOLD_HOURS, this job silently moves the payment
+// (and its ticket) to 'on_hold', which drops it out of the capacity-counting statuses
+// ('pending', 'confirmed', 'checked_in') and so releases the seat back to the event.
+// The user receives no notification — they can recover via "I've paid" again, and an
+// admin can reactivate or mark it paid directly, both re-checking capacity.
+
+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 getThresholdMs(): number {
+  const hours = parseInt(process.env.HOLD_THRESHOLD_HOURS || '72', 10);
+  return (Number.isFinite(hours) && hours > 0 ? hours : 72) * 60 * 60 * 1000;
+}
+
+/**
+ * Move stale pending-approval payments (and their tickets) to 'on_hold'.
+ * Returns the number of payments put on hold.
+ */
+export async function sweepStaleApprovals(): Promise<number> {
+  const cutoff = toDbDate(new Date(Date.now() - getThresholdMs()));
+
+  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_approval'),
+        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();
+
+  await (db as any)
+    .update(payments)
+    .set({ status: 'on_hold', updatedAt: now })
+    .where(inArray((payments as any).id, paymentIds));
+
+  if (ticketIds.length > 0) {
+    await (db as any)
+      .update(tickets)
+      .set({ status: 'on_hold' })
+      .where(and(
+        inArray((tickets as any).id, ticketIds),
+        eq((tickets as any).status, 'pending')
+      ));
+  }
+
+  console.log(`[HoldSweep] Put ${stale.length} stale pending-approval payment(s) on hold.`);
+  return stale.length;
+}
+
+let sweepTimer: ReturnType<typeof setInterval> | null = null;
+
+/**
+ * Start a periodic sweep of stale pending-approval payments. Each run is guarded by
+ * a distributed lock so that, across multiple replicas, only one instance does the
+ * work per interval.
+ */
+export function startHoldSweep(): void {
+  const intervalMs = parseInt(process.env.HOLD_SWEEP_INTERVAL_MS || '900000', 10); // 15 min
+
+  const run = () => {
+    getLock()
+      .withLock('sweep-hold-stale-approvals', Math.min(intervalMs, 60_000), () =>
+        sweepStaleApprovals()
+      )
+      .catch((err) =>
+        console.error('[HoldSweep] Run failed:', err?.message || err)
+      );
+  };
+
+  // Run shortly after startup, then on the interval.
+  setTimeout(run, 45_000).unref?.();
+  sweepTimer = setInterval(run, intervalMs);
+  sweepTimer.unref?.();
+  console.log(`[HoldSweep] Scheduled every ${Math.round(intervalMs / 1000)}s`);
+}
+
+export function stopHoldSweep(): void {
+  if (sweepTimer) {
+    clearInterval(sweepTimer);
+    sweepTimer = null;
+  }
+}

backend/src/lib/lnbits.ts

@@ -36,6 +36,11 @@ export interface CreateInvoiceParams {
   extra?: Record<string, any>; // Additional metadata
 }
 
+// How long a booking's Lightning invoice is valid for, in seconds. Shared
+// between initial booking creation and invoice regeneration so both produce
+// invoices with the same lifetime.
+export const LNBITS_INVOICE_EXPIRY_SECONDS = 900; // 15 minutes
+
 /**
  * Check if LNbits is configured
  */
@@ -80,11 +85,8 @@ export async function createInvoice(params: CreateInvoiceParams): Promise<LNbits
   }
 
   console.log('Creating LNbits invoice:', {
-    url: `${config.url}${apiEndpoint}`,
     amount: params.amount,
     unit: payload.unit,
-    memo: params.memo,
-    webhook: params.webhookUrl,
   });
 
   const response = await fetch(`${config.url}${apiEndpoint}`, {

backend/src/lib/rateLimit.ts

@@ -0,0 +1,48 @@
+import { Context } from 'hono';
+import { getRateLimiter } from './stores/rateLimiter.js';
+
+/**
+ * Rate limiting helpers.
+ *
+ * The actual counting is delegated to a pluggable rate limiter (in-memory by
+ * default, Redis-backed when REDIS_URL is set) so limits are enforced either
+ * per instance (single-instance deployments) or across all instances
+ * (horizontal scaling). See lib/stores/rateLimiter.ts.
+ */
+
+/** Best-effort client IP extraction (honours common reverse-proxy headers). */
+export function getClientIp(c: Context): string {
+  const forwarded = c.req.header('x-forwarded-for');
+  if (forwarded) return forwarded.split(',')[0].trim();
+  return c.req.header('x-real-ip') || 'unknown';
+}
+
+/**
+ * Consume one unit against a key. Returns whether the request is allowed and,
+ * when blocked, how many seconds until the window resets.
+ */
+export function consumeRateLimit(
+  key: string,
+  max: number,
+  windowMs: number
+): Promise<{ allowed: boolean; retryAfter?: number }> {
+  return getRateLimiter().consume(key, max, windowMs);
+}
+
+/**
+ * Hono middleware factory that rate-limits by client IP.
+ * Use a distinct `prefix` per endpoint group so unrelated routes don't share a bucket.
+ */
+export function rateLimitMiddleware(opts: { max: number; windowMs: number; prefix: string }) {
+  return async (c: Context, next: () => Promise<void>) => {
+    const ip = getClientIp(c);
+    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 },
+        429
+      );
+    }
+    await next();
+  };
+}

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/lib/utils.ts

@@ -1,5 +1,6 @@
 import { nanoid } from 'nanoid';
 import { randomUUID } from 'crypto';
+import moment from 'moment-timezone';
 
 /**
  * Get database type (reads env var each time to handle module loading order)
@@ -59,17 +60,10 @@ export function parseEventDatetime(
     return new Date(datetime);
   }
 
-  // Treat the digits as UTC so we have a stable reference instant.
-  const fakeUTC = new Date(datetime + 'Z');
-
-  // Ask Intl what that UTC instant looks like in both UTC and the target tz.
-  const utcStr = fakeUTC.toLocaleString('en-US', { timeZone: 'UTC' });
-  const tzStr  = fakeUTC.toLocaleString('en-US', { timeZone: timezone });
-
-  // The gap between the two tells us the tz offset at this point in time.
-  const offsetMs = new Date(utcStr).getTime() - new Date(tzStr).getTime();
-
-  return new Date(fakeUTC.getTime() + offsetMs);
+  // Interpret the wall-clock digits as local time in `timezone` using
+  // moment-timezone's bundled IANA data. This keeps the conversion correct
+  // regardless of the host Node runtime's (possibly stale) tz database.
+  return moment.tz(datetime, timezone).toDate();
 }
 
 /**

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();
@@ -66,15 +76,22 @@ adminRouter.get('/dashboard', requireAuth(['admin', 'organizer']), async (c) =>
       .from(payments)
       .where(eq((payments as any).status, 'pending'))
   );
-  
-  const paidPayments = await dbAll<any>(
+
+  const onHoldPayments = await dbGet<any>(
     (db as any)
-      .select()
+      .select({ count: sql<number>`count(*)` })
+      .from(payments)
+      .where(eq((payments as any).status, 'on_hold'))
+  );
+
+  const revenueRow = await dbGet<any>(
+    (db as any)
+      .select({ total: sql<number>`COALESCE(SUM(${(payments as any).amount}), 0)` })
       .from(payments)
       .where(eq((payments as any).status, 'paid'))
   );
   
-  const totalRevenue = paidPayments.reduce((sum: number, p: any) => sum + Number(p.amount || 0), 0);
+  const totalRevenue = Number(revenueRow?.total || 0);
   
   const newContacts = await dbGet<any>(
     (db as any)
@@ -98,6 +115,7 @@ adminRouter.get('/dashboard', requireAuth(['admin', 'organizer']), async (c) =>
         totalTickets: totalTickets?.count || 0,
         confirmedTickets: confirmedTickets?.count || 0,
         pendingPayments: pendingPayments?.count || 0,
+        onHoldPayments: onHoldPayments?.count || 0,
         totalRevenue,
         newContacts: newContacts?.count || 0,
         totalSubscribers: totalSubscribers?.count || 0,
@@ -110,56 +128,52 @@ adminRouter.get('/dashboard', requireAuth(['admin', 'organizer']), async (c) =>
 
 // Get analytics data (admin)
 adminRouter.get('/analytics', requireAuth(['admin']), async (c) => {
-  // Get events with ticket counts
+  // Get events with ticket counts using grouped aggregates (avoids 3 queries per event).
   const allEvents = await dbAll<any>((db as any).select().from(events));
-  
-  const eventStats = await Promise.all(
-    allEvents.map(async (event: any) => {
-      const ticketCount = await dbGet<any>(
-        (db as any)
-          .select({ count: sql<number>`count(*)` })
-          .from(tickets)
-          .where(eq((tickets as any).eventId, event.id))
-      );
-      
-      const confirmedCount = await dbGet<any>(
-        (db as any)
-          .select({ count: sql<number>`count(*)` })
-          .from(tickets)
-          .where(
-            and(
-              eq((tickets as any).eventId, event.id),
-              eq((tickets as any).status, 'confirmed'),
-              ne((tickets as any).isGuest, 1)
-            )
-          )
-      );
-      
-      const checkedInCount = await dbGet<any>(
-        (db as any)
-          .select({ count: sql<number>`count(*)` })
-          .from(tickets)
-          .where(
-            and(
-              eq((tickets as any).eventId, event.id),
-              eq((tickets as any).status, 'checked_in'),
-              ne((tickets as any).isGuest, 1)
-            )
-          )
-      );
-      
-      return {
-        id: event.id,
-        title: event.title,
-        date: event.startDatetime,
-        capacity: event.capacity,
-        totalBookings: ticketCount?.count || 0,
-        confirmedBookings: confirmedCount?.count || 0,
-        checkedIn: checkedInCount?.count || 0,
-        revenue: (confirmedCount?.count || 0) * event.price,
-      };
-    })
+
+  const totalRows = await dbAll<any>(
+    (db as any)
+      .select({ eventId: (tickets as any).eventId, count: sql<number>`count(*)` })
+      .from(tickets)
+      .groupBy((tickets as any).eventId)
   );
+  const confirmedRows = await dbAll<any>(
+    (db as any)
+      .select({ eventId: (tickets as any).eventId, count: sql<number>`count(*)` })
+      .from(tickets)
+      .where(and(eq((tickets as any).status, 'confirmed'), ne((tickets as any).isGuest, 1)))
+      .groupBy((tickets as any).eventId)
+  );
+  const checkedInRows = await dbAll<any>(
+    (db as any)
+      .select({ eventId: (tickets as any).eventId, count: sql<number>`count(*)` })
+      .from(tickets)
+      .where(and(eq((tickets as any).status, 'checked_in'), ne((tickets as any).isGuest, 1)))
+      .groupBy((tickets as any).eventId)
+  );
+
+  const toMap = (rows: any[]) => {
+    const m = new Map<string, number>();
+    for (const r of rows) m.set(r.eventId, Number(r.count) || 0);
+    return m;
+  };
+  const totalMap = toMap(totalRows);
+  const confirmedMap = toMap(confirmedRows);
+  const checkedInMap = toMap(checkedInRows);
+
+  const eventStats = allEvents.map((event: any) => {
+    const confirmedBookings = confirmedMap.get(event.id) || 0;
+    return {
+      id: event.id,
+      title: event.title,
+      date: event.startDatetime,
+      capacity: event.capacity,
+      totalBookings: totalMap.get(event.id) || 0,
+      confirmedBookings,
+      checkedIn: checkedInMap.get(event.id) || 0,
+      revenue: confirmedBookings * event.price,
+    };
+  });
   
   return c.json({
     analytics: {
@@ -179,30 +193,25 @@ adminRouter.get('/export/tickets', requireAuth(['admin']), async (c) => {
   }
   
   const ticketList = await dbAll<any>(query);
+
+  const userIds = [...new Set(ticketList.map((t: any) => t.userId).filter(Boolean))];
+  const eventIds = [...new Set(ticketList.map((t: any) => t.eventId).filter(Boolean))];
+  const ticketIds = ticketList.map((t: any) => t.id);
+
+  const [userRows, eventRows, paymentRows] = await Promise.all([
+    userIds.length ? dbAll<any>((db as any).select().from(users).where(inArray((users as any).id, userIds))) : Promise.resolve([]),
+    eventIds.length ? dbAll<any>((db as any).select().from(events).where(inArray((events as any).id, eventIds))) : Promise.resolve([]),
+    ticketIds.length ? dbAll<any>((db as any).select().from(payments).where(inArray((payments as any).ticketId, ticketIds))) : Promise.resolve([]),
+  ]);
+
+  const usersById = new Map(userRows.map((u: any) => [u.id, u]));
+  const eventsById = new Map(eventRows.map((e: any) => [e.id, e]));
+  const paymentsByTicketId = new Map(paymentRows.map((p: any) => [p.ticketId, p]));
   
-  // Get user and event details for each ticket
-  const enrichedTickets = await Promise.all(
-    ticketList.map(async (ticket: any) => {
-      const user = await dbGet<any>(
-        (db as any)
-          .select()
-          .from(users)
-          .where(eq((users as any).id, ticket.userId))
-      );
-      
-      const event = await dbGet<any>(
-        (db as any)
-          .select()
-          .from(events)
-          .where(eq((events as any).id, ticket.eventId))
-      );
-      
-      const payment = await dbGet<any>(
-        (db as any)
-          .select()
-          .from(payments)
-          .where(eq((payments as any).ticketId, ticket.id))
-      );
+  const enrichedTickets = ticketList.map((ticket: any) => {
+      const user = usersById.get(ticket.userId);
+      const event = eventsById.get(ticket.eventId);
+      const payment = paymentsByTicketId.get(ticket.id);
       
       return {
         ticketId: ticket.id,
@@ -212,14 +221,14 @@ adminRouter.get('/export/tickets', requireAuth(['admin']), async (c) => {
         userName: user?.name,
         userEmail: user?.email,
         userPhone: user?.phone,
+        attendeeRuc: ticket.attendeeRuc || user?.rucNumber || null,
         eventTitle: event?.title,
         eventDate: event?.startDatetime,
         paymentStatus: payment?.status,
         paymentAmount: payment?.amount,
         createdAt: ticket.createdAt,
       };
-    })
-  );
+    });
   
   return c.json({ tickets: enrichedTickets });
 });
@@ -291,6 +300,7 @@ adminRouter.get('/events/:eventId/attendees/export', requireAuth(['admin']), asy
         'Full Name': fullName,
         'Email': ticket.attendeeEmail || '',
         'Phone': ticket.attendeePhone || '',
+        'RUC': ticket.attendeeRuc || '',
         'Status': ticket.status,
         'Checked In': isCheckedIn ? 'true' : 'false',
         'Check-in Time': ticket.checkinAt || '',
@@ -301,18 +311,8 @@ 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',
+    'Ticket ID', 'Full Name', 'Email', 'Phone', 'RUC',
     'Status', 'Checked In', 'Check-in Time', 'Payment Status',
     'Booked At', 'Notes',
   ];
@@ -390,21 +390,13 @@ 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 columns = ['Ticket ID', 'Booking ID', 'Attendee Name', 'RUC', 'Status', 'Check-in Time', 'Booked At'];
 
   const rows = ticketList.map((ticket: any) => ({
     'Ticket ID': ticket.id,
     'Booking ID': ticket.bookingId || '',
     'Attendee Name': [ticket.attendeeFirstName, ticket.attendeeLastName].filter(Boolean).join(' '),
+    'RUC': ticket.attendeeRuc || '',
     'Status': ticket.status,
     'Check-in Time': ticket.checkinAt || '',
     'Booked At': ticket.createdAt || '',
@@ -477,6 +469,7 @@ adminRouter.get('/export/financial', requireAuth(['admin']), async (c) => {
         attendeeFirstName: ticket.attendeeFirstName,
         attendeeLastName: ticket.attendeeLastName,
         attendeeEmail: ticket.attendeeEmail,
+        attendeeRuc: ticket.attendeeRuc || null,
         eventId: event?.id,
         eventTitle: event?.title,
         eventDate: event?.startDatetime,

backend/src/routes/auth.ts

@@ -14,10 +14,17 @@ import {
   createMagicLinkToken,
   verifyMagicLinkToken,
   invalidateAllUserSessions,
+  bumpTokenVersion,
   requireAuth,
+  getUserPasswordHash,
 } from '../lib/auth.js';
 import { generateId, getNow, toDbBool } from '../lib/utils.js';
 import { sendEmail } from '../lib/email.js';
+import { rateLimitMiddleware } from '../lib/rateLimit.js';
+
+// Per-IP rate limit for sensitive auth endpoints (registration, login, and all
+// email-dispatching flows) to curb credential stuffing and email flooding.
+const authRateLimit = rateLimitMiddleware({ max: 20, windowMs: 15 * 60 * 1000, prefix: 'auth' });
 
 // User type that includes all fields (some added in schema updates)
 type AuthUser = User & {
@@ -97,8 +104,7 @@ const passwordResetSchema = z.object({
 
 const claimAccountSchema = z.object({
   token: z.string(),
-  password: z.string().min(10, 'Password must be at least 10 characters').optional(),
-  googleId: z.string().optional(),
+  password: z.string().min(10, 'Password must be at least 10 characters'),
 });
 
 const changePasswordSchema = z.object({
@@ -111,7 +117,7 @@ const googleAuthSchema = z.object({
 });
 
 // Register
-auth.post('/register', zValidator('json', registerSchema), async (c) => {
+auth.post('/register', authRateLimit, zValidator('json', registerSchema), async (c) => {
   const data = c.req.valid('json');
   
   // Validate password strength
@@ -161,7 +167,7 @@ auth.post('/register', zValidator('json', registerSchema), async (c) => {
   
   await (db as any).insert(users).values(newUser);
   
-  const token = await createToken(id, data.email, newUser.role);
+  const token = await createToken(id, data.email, newUser.role, 0);
   const refreshToken = await createRefreshToken(id);
   
   return c.json({
@@ -179,7 +185,7 @@ auth.post('/register', zValidator('json', registerSchema), async (c) => {
 });
 
 // Login with email/password
-auth.post('/login', zValidator('json', loginSchema), async (c) => {
+auth.post('/login', authRateLimit, zValidator('json', loginSchema), async (c) => {
   const data = c.req.valid('json');
   
   // Check rate limit
@@ -223,8 +229,23 @@ auth.post('/login', 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);
+  const token = await createToken(user.id, user.email, user.role, user.tokenVersion ?? 0);
   const refreshToken = await createRefreshToken(user.id);
   
   return c.json({
@@ -244,7 +265,7 @@ auth.post('/login', zValidator('json', loginSchema), async (c) => {
 });
 
 // Request magic link login
-auth.post('/magic-link/request', zValidator('json', magicLinkRequestSchema), async (c) => {
+auth.post('/magic-link/request', authRateLimit, zValidator('json', magicLinkRequestSchema), async (c) => {
   const { email } = c.req.valid('json');
   
   const user = await dbGet<any>(
@@ -285,7 +306,7 @@ auth.post('/magic-link/request', zValidator('json', magicLinkRequestSchema), asy
 });
 
 // Verify magic link and login
-auth.post('/magic-link/verify', zValidator('json', magicLinkVerifySchema), async (c) => {
+auth.post('/magic-link/verify', authRateLimit, zValidator('json', magicLinkVerifySchema), async (c) => {
   const { token } = c.req.valid('json');
   
   const verification = await verifyMagicLinkToken(token, 'login');
@@ -302,7 +323,7 @@ auth.post('/magic-link/verify', zValidator('json', magicLinkVerifySchema), async
     return c.json({ error: 'Invalid token' }, 400);
   }
   
-  const authToken = await createToken(user.id, user.email, user.role);
+  const authToken = await createToken(user.id, user.email, user.role, user.tokenVersion ?? 0);
   const refreshToken = await createRefreshToken(user.id);
   
   return c.json({
@@ -322,7 +343,7 @@ auth.post('/magic-link/verify', zValidator('json', magicLinkVerifySchema), async
 });
 
 // Request password reset
-auth.post('/password-reset/request', zValidator('json', passwordResetRequestSchema), async (c) => {
+auth.post('/password-reset/request', authRateLimit, zValidator('json', passwordResetRequestSchema), async (c) => {
   const { email } = c.req.valid('json');
   
   const user = await dbGet<any>(
@@ -363,7 +384,7 @@ auth.post('/password-reset/request', zValidator('json', passwordResetRequestSche
 });
 
 // Reset password
-auth.post('/password-reset/confirm', zValidator('json', passwordResetSchema), async (c) => {
+auth.post('/password-reset/confirm', authRateLimit, zValidator('json', passwordResetSchema), async (c) => {
   const { token, password } = c.req.valid('json');
   
   // Validate password strength
@@ -389,14 +410,15 @@ auth.post('/password-reset/confirm', zValidator('json', passwordResetSchema), as
     })
     .where(eq((users as any).id, verification.userId));
   
-  // Invalidate all existing sessions for security
+  // Invalidate all existing sessions/JWTs for security
   await invalidateAllUserSessions(verification.userId!);
+  await bumpTokenVersion(verification.userId!);
   
   return c.json({ message: 'Password reset successfully. Please log in with your new password.' });
 });
 
 // Claim unclaimed account
-auth.post('/claim-account/request', zValidator('json', magicLinkRequestSchema), async (c) => {
+auth.post('/claim-account/request', authRateLimit, zValidator('json', magicLinkRequestSchema), async (c) => {
   const { email } = c.req.valid('json');
   
   const user = await dbGet<any>(
@@ -411,8 +433,8 @@ auth.post('/claim-account/request', zValidator('json', magicLinkRequestSchema),
     return c.json({ error: 'Account is already claimed' }, 400);
   }
   
-  // Create claim token (expires in 24 hours)
-  const token = await createMagicLinkToken(user.id, 'claim_account', 24 * 60);
+  // Create claim token (expires in 1 hour)
+  const token = await createMagicLinkToken(user.id, 'claim_account', 60);
   const claimLink = `${process.env.FRONTEND_URL || 'http://localhost:3000'}/auth/claim-account?token=${token}`;
   
   // Send email
@@ -425,7 +447,7 @@ auth.post('/claim-account/request', zValidator('json', magicLinkRequestSchema),
         <p>An account was created for you during booking. Click below to set up your login credentials.</p>
         <p><a href="${claimLink}" style="background-color: #3B82F6; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; display: inline-block;">Claim Account</a></p>
         <p>Or copy this link: ${claimLink}</p>
-        <p>This link expires in 24 hours.</p>
+        <p>This link expires in 1 hour.</p>
       `,
     });
   } catch (error) {
@@ -436,12 +458,8 @@ auth.post('/claim-account/request', zValidator('json', magicLinkRequestSchema),
 });
 
 // Complete account claim
-auth.post('/claim-account/confirm', zValidator('json', claimAccountSchema), async (c) => {
-  const { token, password, googleId } = c.req.valid('json');
-  
-  if (!password && !googleId) {
-    return c.json({ error: 'Please provide either a password or link a Google account' }, 400);
-  }
+auth.post('/claim-account/confirm', authRateLimit, zValidator('json', claimAccountSchema), async (c) => {
+  const { token, password } = c.req.valid('json');
   
   const verification = await verifyMagicLinkToken(token, 'claim_account');
   
@@ -449,25 +467,21 @@ auth.post('/claim-account/confirm', zValidator('json', claimAccountSchema), asyn
     return c.json({ error: verification.error }, 400);
   }
   
+  const passwordValidation = validatePassword(password);
+  if (!passwordValidation.valid) {
+    return c.json({ error: passwordValidation.error }, 400);
+  }
+
   const now = getNow();
+  // Only set a password here. Linking a Google account requires a verified Google
+  // ID token via /google; we never trust a client-supplied googleId.
   const updates: Record<string, any> = {
     isClaimed: toDbBool(true),
     accountStatus: 'active',
+    password: await hashPassword(password),
     updatedAt: now,
   };
   
-  if (password) {
-    const passwordValidation = validatePassword(password);
-    if (!passwordValidation.valid) {
-      return c.json({ error: passwordValidation.error }, 400);
-    }
-    updates.password = await hashPassword(password);
-  }
-  
-  if (googleId) {
-    updates.googleId = googleId;
-  }
-  
   await (db as any)
     .update(users)
     .set(updates)
@@ -477,7 +491,7 @@ auth.post('/claim-account/confirm', zValidator('json', claimAccountSchema), asyn
     (db as any).select().from(users).where(eq((users as any).id, verification.userId))
   );
   
-  const authToken = await createToken(user.id, user.email, user.role);
+  const authToken = await createToken(user.id, user.email, user.role, user.tokenVersion ?? 0);
   const refreshToken = await createRefreshToken(user.id);
   
   return c.json({
@@ -498,13 +512,14 @@ auth.post('/claim-account/confirm', zValidator('json', claimAccountSchema), asyn
 });
 
 // Google OAuth login/register
-auth.post('/google', zValidator('json', googleAuthSchema), async (c) => {
+auth.post('/google', authRateLimit, zValidator('json', googleAuthSchema), async (c) => {
   const { credential } = c.req.valid('json');
   
   try {
-    // Verify Google token
-    // In production, use Google's library to verify: https://developers.google.com/identity/gsi/web/guides/verify-google-id-token
-    const response = await fetch(`https://oauth2.googleapis.com/tokeninfo?id_token=${credential}`);
+    // Verify the Google ID token. Google's tokeninfo endpoint validates the
+    // signature and expiry server-side; we additionally enforce the audience so a
+    // token minted for a different OAuth client cannot be replayed against us.
+    const response = await fetch(`https://oauth2.googleapis.com/tokeninfo?id_token=${encodeURIComponent(credential)}`);
     
     if (!response.ok) {
       return c.json({ error: 'Invalid Google token' }, 400);
@@ -515,11 +530,29 @@ auth.post('/google', zValidator('json', googleAuthSchema), async (c) => {
       email: string;
       name: string;
       email_verified: string;
+      aud?: string;
+      exp?: string;
     };
-    
-    if (googleData.email_verified !== 'true') {
+
+    // email_verified can be returned as boolean true or string "true"
+    if (String(googleData.email_verified) !== 'true') {
       return c.json({ error: 'Google email not verified' }, 400);
     }
+
+    // Enforce audience when a client ID is configured (closes token-confusion attacks)
+    const expectedAud = process.env.GOOGLE_CLIENT_ID;
+    if (expectedAud) {
+      if (googleData.aud !== expectedAud) {
+        return c.json({ error: 'Invalid Google token audience' }, 400);
+      }
+    } else {
+      console.warn('[auth] GOOGLE_CLIENT_ID is not set; skipping audience verification for Google login.');
+    }
+
+    // Reject expired tokens (defense-in-depth; tokeninfo also rejects them)
+    if (googleData.exp && Number(googleData.exp) * 1000 < Date.now()) {
+      return c.json({ error: 'Google token expired' }, 400);
+    }
     
     const { sub: googleId, email, name } = googleData;
     
@@ -584,7 +617,7 @@ auth.post('/google', zValidator('json', googleAuthSchema), async (c) => {
       user = newUser;
     }
     
-    const authToken = await createToken(user.id, user.email, user.role);
+    const authToken = await createToken(user.id, user.email, user.role, user.tokenVersion ?? 0);
     const refreshToken = await createRefreshToken(user.id);
     
     return c.json({
@@ -643,8 +676,9 @@ auth.post('/change-password', requireAuth(), zValidator('json', changePasswordSc
   }
   
   // Verify current password if user has one
-  if (user.password) {
-    const validPassword = await verifyPassword(currentPassword, user.password);
+  const existingHash = await getUserPasswordHash(user.id);
+  if (existingHash) {
+    const validPassword = await verifyPassword(currentPassword, existingHash);
     if (!validPassword) {
       return c.json({ error: 'Current password is incorrect' }, 400);
     }
@@ -660,12 +694,25 @@ auth.post('/change-password', requireAuth(), zValidator('json', changePasswordSc
       updatedAt: now,
     })
     .where(eq((users as any).id, user.id));
+
+  // Invalidate all previously issued JWTs so a stolen old token can't outlive the change,
+  // then hand the current client a fresh token so it stays logged in on this device.
+  await bumpTokenVersion(user.id);
+  const refreshedUser = await dbGet<any>(
+    (db as any).select().from(users).where(eq((users as any).id, user.id))
+  );
+  const newToken = await createToken(user.id, user.email, user.role, refreshedUser?.tokenVersion ?? 0);
   
-  return c.json({ message: 'Password changed successfully' });
+  return c.json({ message: 'Password changed successfully', token: newToken });
 });
 
-// Logout (client-side token removal, but we can log the action)
+// Logout - invalidate all previously issued JWTs for this user (logout everywhere)
 auth.post('/logout', async (c) => {
+  const user = await getAuthUser(c);
+  if (user) {
+    await invalidateAllUserSessions(user.id);
+    await bumpTokenVersion(user.id);
+  }
   return c.json({ message: 'Logged out successfully' });
 });
 

backend/src/routes/contacts.ts

@@ -4,25 +4,17 @@ 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';
 
 const contactsRouter = new Hono();
 
-// ==================== Sanitization Helpers ====================
+// Per-IP rate limit for public, unauthenticated write endpoints (contact form,
+// newsletter subscribe/unsubscribe) to prevent spam and email flooding.
+const publicFormLimit = rateLimitMiddleware({ max: 5, windowMs: 10 * 60 * 1000, prefix: 'contacts' });
 
-/**
- * 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;');
-}
+// ==================== Sanitization Helpers ====================
 
 /**
  * Sanitize email header values to prevent email header injection
@@ -33,14 +25,14 @@ function sanitizeHeaderValue(str: string): string {
 }
 
 const createContactSchema = z.object({
-  name: z.string().min(2),
-  email: z.string().email(),
-  message: z.string().min(10),
+  name: z.string().min(2).max(200),
+  email: z.string().email().max(254),
+  message: z.string().min(10).max(5000),
 });
 
 const subscribeSchema = z.object({
-  email: z.string().email(),
-  name: z.string().optional(),
+  email: z.string().email().max(254),
+  name: z.string().max(200).optional(),
 });
 
 const updateContactSchema = z.object({
@@ -48,7 +40,7 @@ const updateContactSchema = z.object({
 });
 
 // Submit contact form (public)
-contactsRouter.post('/', zValidator('json', createContactSchema), async (c) => {
+contactsRouter.post('/', publicFormLimit, zValidator('json', createContactSchema), async (c) => {
   const data = c.req.valid('json');
   const now = getNow();
   const id = generateId();
@@ -125,7 +117,7 @@ contactsRouter.post('/', zValidator('json', createContactSchema), async (c) => {
 });
 
 // Subscribe to newsletter (public)
-contactsRouter.post('/subscribe', zValidator('json', subscribeSchema), async (c) => {
+contactsRouter.post('/subscribe', publicFormLimit, zValidator('json', subscribeSchema), async (c) => {
   const data = c.req.valid('json');
   
   // Check if already subscribed
@@ -166,28 +158,30 @@ contactsRouter.post('/subscribe', zValidator('json', subscribeSchema), async (c)
 });
 
 // Unsubscribe from newsletter (public)
-contactsRouter.post('/unsubscribe', zValidator('json', z.object({ email: z.string().email() })), async (c) => {
+contactsRouter.post('/unsubscribe', publicFormLimit, zValidator('json', z.object({ email: z.string().email().max(254) })), async (c) => {
   const { email } = c.req.valid('json');
   
   const existing = await dbGet<any>(
     (db as any).select().from(emailSubscribers).where(eq((emailSubscribers as any).email, email))
   );
   
-  if (!existing) {
-    return c.json({ error: 'Email not found' }, 404);
+  // Always return the same response whether or not the address exists, to avoid
+  // leaking which emails are subscribed (enumeration).
+  if (existing && existing.status !== 'unsubscribed') {
+    await (db as any)
+      .update(emailSubscribers)
+      .set({ status: 'unsubscribed' })
+      .where(eq((emailSubscribers as any).id, existing.id));
   }
   
-  await (db as any)
-    .update(emailSubscribers)
-    .set({ status: 'unsubscribed' })
-    .where(eq((emailSubscribers as any).id, existing.id));
-  
-  return c.json({ message: 'Successfully unsubscribed' });
+  return c.json({ message: 'If this email was subscribed, it has been unsubscribed.' });
 });
 
 // Get all contacts (admin)
 contactsRouter.get('/', requireAuth(['admin', 'organizer']), async (c) => {
   const status = c.req.query('status');
+  const limit = Math.min(Math.max(parseInt(c.req.query('limit') || '100', 10) || 100, 1), 500);
+  const offset = Math.max(parseInt(c.req.query('offset') || '0', 10) || 0, 0);
   
   let query = (db as any).select().from(contacts);
   
@@ -195,7 +189,9 @@ contactsRouter.get('/', requireAuth(['admin', 'organizer']), async (c) => {
     query = query.where(eq((contacts as any).status, status));
   }
   
-  const result = await dbAll(query.orderBy(desc((contacts as any).createdAt)));
+  const result = await dbAll(
+    query.orderBy(desc((contacts as any).createdAt)).limit(limit).offset(offset)
+  );
   
   return c.json({ contacts: result });
 });
@@ -255,6 +251,8 @@ contactsRouter.delete('/:id', requireAuth(['admin']), async (c) => {
 // Get all subscribers (admin)
 contactsRouter.get('/subscribers/list', requireAuth(['admin', 'marketing']), async (c) => {
   const status = c.req.query('status');
+  const limit = Math.min(Math.max(parseInt(c.req.query('limit') || '100', 10) || 100, 1), 1000);
+  const offset = Math.max(parseInt(c.req.query('offset') || '0', 10) || 0, 0);
   
   let query = (db as any).select().from(emailSubscribers);
   
@@ -262,7 +260,9 @@ contactsRouter.get('/subscribers/list', requireAuth(['admin', 'marketing']), asy
     query = query.where(eq((emailSubscribers as any).status, status));
   }
   
-  const result = await dbAll(query.orderBy(desc((emailSubscribers as any).createdAt)));
+  const result = await dbAll(
+    query.orderBy(desc((emailSubscribers as any).createdAt)).limit(limit).offset(offset)
+  );
   
   return c.json({ subscribers: result });
 });

backend/src/routes/dashboard.ts

@@ -2,8 +2,8 @@ import { Hono } from 'hono';
 import { zValidator } from '@hono/zod-validator';
 import { z } from 'zod';
 import { db, dbGet, dbAll, users, tickets, payments, events, invoices, User } from '../db/index.js';
-import { eq, desc, and, gt, sql } from 'drizzle-orm';
-import { requireAuth, getUserSessions, invalidateSession, invalidateAllUserSessions, hashPassword, validatePassword } from '../lib/auth.js';
+import { eq, desc, and, gt, sql, inArray } from 'drizzle-orm';
+import { requireAuth, getUserSessions, invalidateSession, invalidateAllUserSessions, bumpTokenVersion, createToken, hashPassword, validatePassword, getUserPasswordHash } from '../lib/auth.js';
 import { generateId, getNow } from '../lib/utils.js';
 
 // User type that includes all fields (some added in schema updates)
@@ -37,6 +37,8 @@ dashboard.get('/profile', async (c) => {
   const now = new Date();
   const membershipDays = Math.floor((now.getTime() - createdDate.getTime()) / (1000 * 60 * 60 * 24));
   
+  const hasPassword = !!(await getUserPasswordHash(user.id));
+
   return c.json({
     profile: {
       id: user.id,
@@ -47,7 +49,7 @@ dashboard.get('/profile', async (c) => {
       rucNumber: user.rucNumber,
       isClaimed: user.isClaimed,
       accountStatus: user.accountStatus,
-      hasPassword: !!user.password,
+      hasPassword,
       hasGoogleLinked: !!user.googleId,
       memberSince: user.createdAt,
       membershipDays,
@@ -103,34 +105,31 @@ dashboard.get('/tickets', async (c) => {
       .where(eq((tickets as any).userId, user.id))
       .orderBy(desc((tickets as any).createdAt))
   );
+
+  // Batch-fetch related events, payments, and invoices (avoids N+1 per ticket).
+  const eventIds = [...new Set(userTickets.map((t: any) => t.eventId).filter(Boolean))];
+  const ticketIds = userTickets.map((t: any) => t.id);
+
+  const eventRows = eventIds.length
+    ? await dbAll<any>((db as any).select().from(events).where(inArray((events as any).id, eventIds)))
+    : [];
+  const paymentRows = ticketIds.length
+    ? await dbAll<any>((db as any).select().from(payments).where(inArray((payments as any).ticketId, ticketIds)))
+    : [];
+
+  const eventsById = new Map(eventRows.map((e: any) => [e.id, e]));
+  const paymentsByTicketId = new Map(paymentRows.map((p: any) => [p.ticketId, p]));
+
+  const paidPaymentIds = paymentRows.filter((p: any) => p.status === 'paid').map((p: any) => p.id);
+  const invoiceRows = paidPaymentIds.length
+    ? await dbAll<any>((db as any).select().from(invoices).where(inArray((invoices as any).paymentId, paidPaymentIds)))
+    : [];
+  const invoicesByPaymentId = new Map(invoiceRows.map((inv: any) => [inv.paymentId, inv]));
   
-  // Get event details for each ticket
-  const ticketsWithEvents = await Promise.all(
-    userTickets.map(async (ticket: any) => {
-      const event = await dbGet<any>(
-        (db as any)
-          .select()
-          .from(events)
-          .where(eq((events as any).id, ticket.eventId))
-      );
-      
-      const payment = await dbGet<any>(
-        (db as any)
-          .select()
-          .from(payments)
-          .where(eq((payments as any).ticketId, ticket.id))
-      );
-      
-      // Check for invoice
-      let invoice: any = null;
-      if (payment && payment.status === 'paid') {
-        invoice = await dbGet<any>(
-          (db as any)
-            .select()
-            .from(invoices)
-            .where(eq((invoices as any).paymentId, payment.id))
-        );
-      }
+  const ticketsWithEvents = userTickets.map((ticket: any) => {
+      const event = eventsById.get(ticket.eventId);
+      const payment = paymentsByTicketId.get(ticket.id);
+      const invoice = payment && payment.status === 'paid' ? invoicesByPaymentId.get(payment.id) : null;
       
       return {
         ...ticket,
@@ -162,8 +161,7 @@ dashboard.get('/tickets', async (c) => {
           createdAt: invoice.createdAt,
         } : null,
       };
-    })
-  );
+    });
   
   return c.json({ tickets: ticketsWithEvents });
 });
@@ -452,13 +450,22 @@ dashboard.delete('/sessions/:id', async (c) => {
   return c.json({ message: 'Session revoked' });
 });
 
-// Revoke all sessions (logout everywhere)
+// Revoke all sessions (logout everywhere). Bumping the token version invalidates
+// every previously issued JWT for this user, which is the actual enforcement
+// mechanism (auth is stateless JWT, not DB-session based).
 dashboard.post('/sessions/revoke-all', async (c) => {
   const user = (c as any).get('user') as AuthUser;
   
   await invalidateAllUserSessions(user.id);
+  await bumpTokenVersion(user.id);
+
+  // Issue a fresh token so the current device stays signed in
+  const refreshed = await dbGet<any>(
+    (db as any).select().from(users).where(eq((users as any).id, user.id))
+  );
+  const token = await createToken(user.id, user.email, user.role, refreshed?.tokenVersion ?? 0);
   
-  return c.json({ message: 'All sessions revoked. Please log in again.' });
+  return c.json({ message: 'All other sessions revoked.', token });
 });
 
 // Set password (for users without one)
@@ -471,7 +478,7 @@ dashboard.post('/set-password', zValidator('json', setPasswordSchema), async (c)
   const { password } = c.req.valid('json');
   
   // Check if user already has a password
-  if (user.password) {
+  if (await getUserPasswordHash(user.id)) {
     return c.json({ error: 'Password already set. Use change password instead.' }, 400);
   }
   
@@ -502,7 +509,7 @@ dashboard.post('/unlink-google', async (c) => {
     return c.json({ error: 'Google account not linked' }, 400);
   }
   
-  if (!user.password) {
+  if (!(await getUserPasswordHash(user.id))) {
     return c.json({ error: 'Cannot unlink Google without a password set' }, 400);
   }
   

backend/src/routes/emails.ts

@@ -1,4 +1,6 @@
 import { Hono } from 'hono';
+import { zValidator } from '@hono/zod-validator';
+import { z } from 'zod';
 import { db, dbGet, dbAll, emailTemplates, emailLogs, events, tickets } from '../db/index.js';
 import { eq, desc, and, or, sql } from 'drizzle-orm';
 import { requireAuth } from '../lib/auth.js';
@@ -9,6 +11,50 @@ import { getQueueStatus } from '../lib/emailQueue.js';
 
 const emailsRouter = new Hono();
 
+const slugPattern = /^[a-z0-9-]+$/;
+
+const createTemplateSchema = z.object({
+  name: z.string().min(1).max(255),
+  slug: z.string().min(1).max(100).regex(slugPattern),
+  subject: z.string().min(1).max(500),
+  subjectEs: z.string().max(500).optional().nullable(),
+  bodyHtml: z.string().min(1).max(200_000),
+  bodyHtmlEs: z.string().max(200_000).optional().nullable(),
+  bodyText: z.string().max(200_000).optional().nullable(),
+  bodyTextEs: z.string().max(200_000).optional().nullable(),
+  description: z.string().max(2000).optional().nullable(),
+  variables: z.array(z.any()).max(100).optional(),
+});
+
+const updateTemplateSchema = createTemplateSchema.partial().extend({
+  isActive: z.boolean().optional(),
+});
+
+const sendCustomEmailSchema = z.object({
+  to: z.string().email().max(254),
+  toName: z.string().max(200).optional(),
+  subject: z.string().min(1).max(500),
+  bodyHtml: z.string().min(1).max(200_000),
+  bodyText: z.string().max(200_000).optional(),
+  eventId: z.string().optional(),
+});
+
+const emailLogsQuerySchema = z.object({
+  limit: z.coerce.number().int().min(1).max(100).optional().default(50),
+  offset: z.coerce.number().int().min(0).optional().default(0),
+});
+
+// Safely parse a stored JSON variables column; a corrupt row must not 500 the route.
+function safeParseVariables(raw: any): any[] {
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
 // ==================== Template Routes ====================
 
 // Get all email templates
@@ -20,7 +66,7 @@ emailsRouter.get('/templates', requireAuth(['admin', 'organizer']), async (c) =>
   // Parse variables JSON for each template
   const parsedTemplates = templates.map((t: any) => ({
     ...t,
-    variables: t.variables ? JSON.parse(t.variables) : [],
+    variables: safeParseVariables(t.variables),
     isSystem: Boolean(t.isSystem),
     isActive: Boolean(t.isActive),
   }));
@@ -46,7 +92,7 @@ emailsRouter.get('/templates/:id', requireAuth(['admin', 'organizer']), async (c
   return c.json({ 
     template: {
       ...template,
-      variables: template.variables ? JSON.parse(template.variables) : [],
+      variables: safeParseVariables(template.variables),
       isSystem: Boolean(template.isSystem),
       isActive: Boolean(template.isActive),
     }
@@ -54,14 +100,10 @@ emailsRouter.get('/templates/:id', requireAuth(['admin', 'organizer']), async (c
 });
 
 // Create new email template
-emailsRouter.post('/templates', requireAuth(['admin']), async (c) => {
-  const body = await c.req.json();
+emailsRouter.post('/templates', requireAuth(['admin']), zValidator('json', createTemplateSchema), async (c) => {
+  const body = c.req.valid('json');
   const { name, slug, subject, subjectEs, bodyHtml, bodyHtmlEs, bodyText, bodyTextEs, description, variables } = body;
   
-  if (!name || !slug || !subject || !bodyHtml) {
-    return c.json({ error: 'Name, slug, subject, and bodyHtml are required' }, 400);
-  }
-  
   // Check if slug already exists
   const existing = await dbGet<any>(
     (db as any).select().from(emailTemplates).where(eq((emailTemplates as any).slug, slug))
@@ -104,9 +146,9 @@ emailsRouter.post('/templates', requireAuth(['admin']), async (c) => {
 });
 
 // Update email template
-emailsRouter.put('/templates/:id', requireAuth(['admin']), async (c) => {
+emailsRouter.put('/templates/:id', requireAuth(['admin']), zValidator('json', updateTemplateSchema), async (c) => {
   const { id } = c.req.param();
-  const body = await c.req.json();
+  const body = c.req.valid('json');
   
   const existing = await dbGet<any>(
     (db as any)
@@ -121,22 +163,22 @@ emailsRouter.put('/templates/:id', requireAuth(['admin']), async (c) => {
   
   const updateData: any = { updatedAt: getNow() };
   
-  // Only allow updating certain fields for system templates
-  const systemProtectedFields = ['slug', 'isSystem'];
-  
+  // System templates cannot have their slug or isSystem flag changed; only the
+  // editable fields below are applied.
   const allowedFields = ['name', 'subject', 'subjectEs', 'bodyHtml', 'bodyHtmlEs', 'bodyText', 'bodyTextEs', 'description', 'variables', 'isActive'];
   if (!existing.isSystem) {
     allowedFields.push('slug');
   }
   
   for (const field of allowedFields) {
-    if (body[field] !== undefined) {
+    const value = (body as Record<string, unknown>)[field];
+    if (value !== undefined) {
       if (field === 'variables') {
-        updateData[field] = JSON.stringify(body[field]);
+        updateData[field] = JSON.stringify(value);
       } else if (field === 'isActive') {
-        updateData[field] = body[field] ? 1 : 0;
+        updateData[field] = value ? 1 : 0;
       } else {
-        updateData[field] = body[field];
+        updateData[field] = value;
       }
     }
   }
@@ -156,7 +198,7 @@ emailsRouter.put('/templates/:id', requireAuth(['admin']), async (c) => {
   return c.json({ 
     template: {
       ...updated,
-      variables: updated.variables ? JSON.parse(updated.variables) : [],
+      variables: safeParseVariables(updated.variables),
       isSystem: Boolean(updated.isSystem),
       isActive: Boolean(updated.isActive),
     },
@@ -203,16 +245,22 @@ emailsRouter.post('/send/event/:eventId', requireAuth(['admin', 'organizer']), a
   const body = await c.req.json();
   const { templateSlug, customVariables, recipientFilter } = body;
   
-  if (!templateSlug) {
+  if (!templateSlug || typeof templateSlug !== 'string') {
     return c.json({ error: 'Template slug is required' }, 400);
   }
+
+  const allowedFilters = ['confirmed', 'pending', 'all', 'checked_in'];
+  const filter = recipientFilter || 'confirmed';
+  if (!allowedFilters.includes(filter)) {
+    return c.json({ error: `Invalid recipientFilter. Allowed: ${allowedFilters.join(', ')}` }, 400);
+  }
   
   // Queue emails for background processing instead of sending synchronously
   const result = await emailService.queueEventEmails({
     eventId,
     templateSlug,
     customVariables,
-    recipientFilter: recipientFilter || 'confirmed',
+    recipientFilter: filter,
     sentBy: user?.id,
   });
   
@@ -220,14 +268,9 @@ emailsRouter.post('/send/event/:eventId', requireAuth(['admin', 'organizer']), a
 });
 
 // Send custom email to specific recipients
-emailsRouter.post('/send/custom', requireAuth(['admin', 'organizer']), async (c) => {
+emailsRouter.post('/send/custom', requireAuth(['admin', 'organizer']), zValidator('json', sendCustomEmailSchema), async (c) => {
   const user = (c as any).get('user');
-  const body = await c.req.json();
-  const { to, toName, subject, bodyHtml, bodyText, eventId } = body;
-  
-  if (!to || !subject || !bodyHtml) {
-    return c.json({ error: 'Recipient (to), subject, and bodyHtml are required' }, 400);
-  }
+  const { to, toName, subject, bodyHtml, bodyText, eventId } = c.req.valid('json');
   
   const result = await emailService.sendCustomEmail({
     to,
@@ -272,7 +315,7 @@ emailsRouter.post('/preview', requireAuth(['admin', 'organizer']), async (c) =>
     : template.bodyHtml;
   
   const finalSubject = replaceTemplateVariables(subject, allVariables);
-  const finalBodyContent = replaceTemplateVariables(bodyHtml, allVariables);
+  const finalBodyContent = replaceTemplateVariables(bodyHtml, allVariables, true);
   const finalBodyHtml = wrapInBaseTemplate(finalBodyContent, { ...allVariables, subject: finalSubject });
   
   return c.json({
@@ -288,8 +331,9 @@ emailsRouter.get('/logs', requireAuth(['admin', 'organizer']), async (c) => {
   const eventId = c.req.query('eventId');
   const status = c.req.query('status');
   const search = c.req.query('search');
-  const limit = parseInt(c.req.query('limit') || '50');
-  const offset = parseInt(c.req.query('offset') || '0');
+  // Clamp pagination so a NaN / out-of-range value can't produce undefined query behaviour.
+  const limit = Math.min(Math.max(parseInt(c.req.query('limit') || '50', 10) || 50, 1), 200);
+  const offset = Math.max(parseInt(c.req.query('offset') || '0', 10) || 0, 0);
   
   let query = (db as any).select().from(emailLogs);
   
@@ -441,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/events.ts

@@ -127,8 +127,13 @@ const baseEventSchema = z.object({
   currency: z.string().default('PYG'),
   capacity: z.union([z.number(), z.string()]).transform((val) => typeof val === 'string' ? parseInt(val, 10) || 50 : val).pipe(z.number().min(1)).default(50),
   status: z.enum(['draft', 'published', 'unlisted', 'cancelled', 'completed', 'archived']).default('draft'),
-  // Accept relative paths (/uploads/...) or full URLs
-  bannerUrl: z.string().optional().nullable().or(z.literal('')),
+  // Accept relative paths (/uploads/...) or http(s) URLs only — reject schemes like
+  // javascript:/data: that could be reflected into an href/src on the frontend.
+  bannerUrl: z.string()
+    .refine((v) => v === '' || v.startsWith('/') || /^https?:\/\//i.test(v), {
+      message: 'Banner URL must be a relative path or an http(s) URL',
+    })
+    .optional().nullable().or(z.literal('')),
   // External booking support - accept boolean or number (0/1 from DB)
   externalBookingEnabled: z.union([z.boolean(), z.number()]).transform(normalizeBoolean).default(false),
   externalBookingUrl: z.string().url().optional().nullable().or(z.literal('')),
@@ -166,51 +171,59 @@ const updateEventSchema = baseEventSchema.partial().refine(
 eventsRouter.get('/', async (c) => {
   const status = c.req.query('status');
   const upcoming = c.req.query('upcoming');
-  
-  let query = (db as any).select().from(events);
-  
-  if (status) {
-    query = query.where(eq((events as any).status, status));
-  }
-  
+
+  // Only privileged users may see non-public events (drafts, archived, etc.).
+  // Anonymous/regular callers are restricted to published events regardless of
+  // any client-supplied status filter, so drafts cannot leak.
+  const authUser: any = await getAuthUser(c);
+  const isPrivileged = !!authUser && ['admin', 'organizer', 'staff', 'marketing'].includes(authUser.role);
+
+  const conditions: any[] = [];
+
   if (upcoming === 'true') {
-    const now = getNow();
-    query = query.where(
-      and(
-        eq((events as any).status, 'published'),
-        gte((events as any).startDatetime, now)
-      )
-    );
+    // Upcoming feed is always published + future-dated, for everyone.
+    conditions.push(eq((events as any).status, 'published'));
+    conditions.push(gte((events as any).startDatetime, getNow()));
+  } else if (isPrivileged) {
+    // Admins/staff may filter by any status (or list everything when unset).
+    if (status) {
+      conditions.push(eq((events as any).status, status));
+    }
+  } else {
+    // Public listing: published events only, regardless of any status param.
+    conditions.push(eq((events as any).status, 'published'));
+  }
+
+  let query = (db as any).select().from(events);
+  if (conditions.length > 0) {
+    query = query.where(conditions.length === 1 ? conditions[0] : and(...conditions));
   }
   
-  const result = await dbAll(query.orderBy(desc((events as any).startDatetime)));
-  
-  // Get ticket counts for each event
-  const eventsWithCounts = await Promise.all(
-    result.map(async (event: any) => {
-      // Count confirmed AND checked_in tickets (checked_in were previously confirmed)
-      // This ensures check-in doesn't affect capacity/spots_left
-      const ticketCount = await dbGet<any>(
-        (db as any)
-          .select({ count: sql<number>`count(*)` })
-          .from(tickets)
-          .where(
-            and(
-              eq((tickets as any).eventId, event.id),
-              sql`${(tickets as any).status} IN ('confirmed', 'checked_in')`
-            )
-          )
-      );
-      
-      const normalized = normalizeEvent(event);
-      const bookedCount = ticketCount?.count || 0;
-      return {
-        ...normalized,
-        bookedCount,
-        availableSeats: calculateAvailableSeats(normalized.capacity, bookedCount),
-      };
-    })
+  const result = await dbAll<any>(query.orderBy(desc((events as any).startDatetime)));
+
+  // Single grouped query for booked counts across all events (avoids N+1: previously
+  // this ran one COUNT query per event).
+  const countRows = await dbAll<any>(
+    (db as any)
+      .select({ eventId: (tickets as any).eventId, count: sql<number>`count(*)` })
+      .from(tickets)
+      .where(sql`${(tickets as any).status} IN ('confirmed', 'checked_in')`)
+      .groupBy((tickets as any).eventId)
   );
+  const countByEvent = new Map<string, number>();
+  for (const row of countRows) {
+    countByEvent.set(row.eventId, Number(row.count) || 0);
+  }
+
+  const eventsWithCounts = result.map((event: any) => {
+    const normalized = normalizeEvent(event);
+    const bookedCount = countByEvent.get(event.id) || 0;
+    return {
+      ...normalized,
+      bookedCount,
+      availableSeats: calculateAvailableSeats(normalized.capacity, bookedCount),
+    };
+  });
   
   return c.json({ events: eventsWithCounts });
 });
@@ -223,6 +236,15 @@ eventsRouter.get('/:id', async (c) => {
   if (!event) {
     return c.json({ error: 'Event not found' }, 404);
   }
+
+  // Draft events are only visible to privileged users (admin preview); hide from public.
+  if ((event as any).status === 'draft') {
+    const authUser: any = await getAuthUser(c);
+    const isPrivileged = !!authUser && ['admin', 'organizer', 'staff', 'marketing'].includes(authUser.role);
+    if (!isPrivileged) {
+      return c.json({ error: 'Event not found' }, 404);
+    }
+  }
   
   // Count confirmed AND checked_in tickets (checked_in were previously confirmed)
   // This ensures check-in doesn't affect capacity/spots_left
@@ -272,6 +294,45 @@ async function getEventTicketCount(eventId: string): Promise<number> {
   return ticketCount?.count || 0;
 }
 
+// Get the earliest upcoming published event with ticket counts (ignores featured promotion)
+async function getNextChronologicalUpcoming(): Promise<any | null> {
+  const now = getNow();
+  const event = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(events)
+      .where(
+        and(
+          eq((events as any).status, 'published'),
+          gte((events as any).startDatetime, now)
+        )
+      )
+      .orderBy((events as any).startDatetime)
+      .limit(1)
+  );
+
+  if (!event) {
+    return null;
+  }
+
+  const bookedCount = await getEventTicketCount(event.id);
+  const normalized = normalizeEvent(event);
+  return {
+    ...normalized,
+    bookedCount,
+    availableSeats: calculateAvailableSeats(normalized.capacity, bookedCount),
+  };
+}
+
+// Get next upcoming event (public) - earliest upcoming published event, ignores featured promotion
+eventsRouter.get('/next', async (c) => {
+  const event = await getNextChronologicalUpcoming();
+  if (!event) {
+    return c.json({ event: null });
+  }
+  return c.json({ event: { ...event, isFeatured: false } });
+});
+
 // Get next upcoming event (public) - returns featured event if valid, otherwise next upcoming
 eventsRouter.get('/next/upcoming', async (c) => {
   const now = getNow();
@@ -335,34 +396,13 @@ eventsRouter.get('/next/upcoming', async (c) => {
   }
   
   // Fallback: get the next upcoming published event
-  const event = await dbGet<any>(
-    (db as any)
-      .select()
-      .from(events)
-      .where(
-        and(
-          eq((events as any).status, 'published'),
-          gte((events as any).startDatetime, now)
-        )
-      )
-      .orderBy((events as any).startDatetime)
-      .limit(1)
-  );
-  
+  const event = await getNextChronologicalUpcoming();
+
   if (!event) {
     return c.json({ event: null });
   }
-  
-  const bookedCount = await getEventTicketCount(event.id);
-  const normalized = normalizeEvent(event);
-  return c.json({
-    event: {
-      ...normalized,
-      bookedCount,
-      availableSeats: calculateAvailableSeats(normalized.capacity, bookedCount),
-      isFeatured: false,
-    },
-  });
+
+  return c.json({ event: { ...event, isFeatured: false } });
 });
 
 // Create event (admin/organizer only)

backend/src/routes/faq.ts

@@ -6,6 +6,22 @@ import { getNow, generateId } from '../lib/utils.js';
 
 const faqRouter = new Hono();
 
+// Upper bounds for admin-supplied FAQ content (guards against accidental/abusive huge payloads)
+const MAX_QUESTION_LEN = 1000;
+const MAX_ANSWER_LEN = 20000;
+
+// Returns an error message if any provided field exceeds its limit, else null.
+function faqLengthError(fields: { question?: any; questionEs?: any; answer?: any; answerEs?: any }): string | null {
+  const check = (v: any, max: number, label: string) =>
+    typeof v === 'string' && v.length > max ? `${label} must be at most ${max} characters` : null;
+  return (
+    check(fields.question, MAX_QUESTION_LEN, 'Question') ||
+    check(fields.questionEs, MAX_QUESTION_LEN, 'Question (ES)') ||
+    check(fields.answer, MAX_ANSWER_LEN, 'Answer') ||
+    check(fields.answerEs, MAX_ANSWER_LEN, 'Answer (ES)')
+  );
+}
+
 // ==================== Public Routes ====================
 
 // Get FAQ list for public (only enabled; optional filter for homepage)
@@ -98,6 +114,11 @@ faqRouter.post('/admin', requireAuth(['admin']), async (c) => {
     return c.json({ error: 'Question and answer (EN) are required' }, 400);
   }
 
+  const lengthError = faqLengthError({ question, questionEs, answer, answerEs });
+  if (lengthError) {
+    return c.json({ error: lengthError }, 400);
+  }
+
   const now = getNow();
   const id = generateId();
 
@@ -157,6 +178,11 @@ faqRouter.put('/admin/:id', requireAuth(['admin']), async (c) => {
     return c.json({ error: 'FAQ not found' }, 404);
   }
 
+  const lengthError = faqLengthError({ question, questionEs, answer, answerEs });
+  if (lengthError) {
+    return c.json({ error: lengthError }, 400);
+  }
+
   const updateData: Record<string, unknown> = {
     updatedAt: getNow(),
   };
@@ -209,6 +235,15 @@ faqRouter.post('/admin/reorder', requireAuth(['admin']), async (c) => {
     return c.json({ error: 'ids array is required' }, 400);
   }
 
+  // Verify every id exists before applying ranks (prevents silent no-ops on bad input).
+  const existingRows = await dbAll<any>(
+    (db as any).select({ id: (faqQuestions as any).id }).from(faqQuestions)
+  );
+  const existingIds = new Set(existingRows.map((r: any) => r.id));
+  if (ids.some((id: string) => !existingIds.has(id))) {
+    return c.json({ error: 'One or more FAQ ids are invalid' }, 400);
+  }
+
   const now = getNow();
   for (let i = 0; i < ids.length; i++) {
     await (db as any)

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 '';
@@ -162,6 +144,13 @@ legalPagesRouter.get('/', async (c) => {
 legalPagesRouter.get('/:slug', async (c) => {
   const { slug } = c.req.param();
   const locale = c.req.query('locale') || 'en';
+
+  // Reject anything that isn't a simple slug. The filesystem fallback below builds a
+  // path from this value, so an unconstrained slug (e.g. "../../etc/passwd") would
+  // allow path traversal / arbitrary file reads.
+  if (!/^[a-z0-9-]+$/.test(slug)) {
+    return c.json({ error: 'Legal page not found' }, 404);
+  }
   
   // First try to get from database
   const page = await dbGet<any>(
@@ -275,6 +264,17 @@ legalPagesRouter.put('/admin/:slug', requireAuth(['admin']), async (c) => {
   if (!enContent && !esContent) {
     return c.json({ error: 'At least one language content is required' }, 400);
   }
+
+  // Bound the sizes of admin-supplied content to avoid unbounded payloads.
+  const MAX_CONTENT_LEN = 200000; // ~200 KB of markdown per language
+  const MAX_TITLE_LEN = 255;
+  const tooLong = (v: any, max: number) => typeof v === 'string' && v.length > max;
+  if (tooLong(enContent, MAX_CONTENT_LEN) || tooLong(esContent, MAX_CONTENT_LEN)) {
+    return c.json({ error: `Content must be at most ${MAX_CONTENT_LEN} characters` }, 400);
+  }
+  if (tooLong(title, MAX_TITLE_LEN) || tooLong(titleEs, MAX_TITLE_LEN)) {
+    return c.json({ error: `Title must be at most ${MAX_TITLE_LEN} characters` }, 400);
+  }
   
   const existing = await dbGet(
     (db as any)

backend/src/routes/lnbits.ts

@@ -1,19 +1,36 @@
 import { Hono } from 'hono';
 import { streamSSE } from 'hono/streaming';
-import { db, dbGet, dbAll, tickets, payments } from '../db/index.js';
-import { eq } from 'drizzle-orm';
-import { getNow } from '../lib/utils.js';
-import { verifyWebhookPayment, getPaymentStatus } from '../lib/lnbits.js';
+import { db, dbGet, dbAll, tickets, payments, events } from '../db/index.js';
+import { eq, and, inArray } from 'drizzle-orm';
+import { getNow, toDbDate } from '../lib/utils.js';
+import {
+  verifyWebhookPayment,
+  getPaymentStatus,
+  createInvoice,
+  isLNbitsConfigured,
+  LNBITS_INVOICE_EXPIRY_SECONDS,
+} 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)
-const activeConnections = new Map<string, Set<(data: any) => void>>();
+// 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,32 +49,71 @@ 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.
  */
-function notifyClients(ticketId: string, data: any) {
+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) {
-    connections.forEach(send => {
-      try {
-        send(data);
-      } catch (e) {
-        // Connection might be closed
-      }
-    });
+    await Promise.all(
+      Array.from(connections).map(async (send) => {
+        try {
+          await send(data);
+        } catch (e) {
+          // Connection might be closed
+        }
+      })
+    );
+  }
+}
+
+// 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) {
-  // Don't start if already checking
+async function startBackgroundChecker(ticketId: string, paymentHash: string, expirySeconds: number = 900) {
+  // 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`);
@@ -71,7 +127,8 @@ function startBackgroundChecker(ticketId: string, paymentHash: string, expirySec
       console.log(`Invoice expired for ticket ${ticketId}`);
       clearInterval(checkInterval);
       activeCheckers.delete(ticketId);
-      notifyClients(ticketId, { type: 'expired', ticketId });
+      releaseCheckerLock(ticketId);
+      await notifyClients(ticketId, { type: 'expired', ticketId });
       return;
     }
 
@@ -82,9 +139,10 @@ 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);
-        notifyClients(ticketId, { type: 'paid', ticketId, paymentHash });
+        await notifyClients(ticketId, { type: 'paid', ticketId, paymentHash });
       }
     } catch (error) {
       console.error(`Error checking payment for ticket ${ticketId}:`, error);
@@ -102,6 +160,7 @@ function stopBackgroundChecker(ticketId: string) {
   if (interval) {
     clearInterval(interval);
     activeCheckers.delete(ticketId);
+    releaseCheckerLock(ticketId);
   }
 }
 
@@ -111,13 +170,23 @@ function stopBackgroundChecker(ticketId: string) {
  */
 lnbitsRouter.post('/webhook', async (c) => {
   try {
+    // Optional shared-secret gate: if LNBITS_WEBHOOK_SECRET is configured, the
+    // webhook URL must carry a matching ?token=... (set when the invoice is created).
+    const webhookSecret = process.env.LNBITS_WEBHOOK_SECRET || '';
+    if (webhookSecret) {
+      const provided = c.req.query('token') || c.req.header('x-webhook-secret') || '';
+      if (provided !== webhookSecret) {
+        console.warn('LNbits webhook rejected: invalid or missing secret');
+        return c.json({ received: true, processed: false }, 401);
+      }
+    }
+
     const payload: LNbitsWebhookPayload = await c.req.json();
     
+    // Log identifiers only (no full payload / PII)
     console.log('LNbits webhook received:', {
       paymentHash: payload.payment_hash,
       status: payload.status,
-      amount: payload.amount,
-      extra: payload.extra,
     });
 
     // Verify the payment is actually complete by checking with LNbits
@@ -135,13 +204,27 @@ lnbitsRouter.post('/webhook', async (c) => {
       return c.json({ received: true, processed: false }, 200);
     }
 
+    // CRITICAL: bind the paid hash to this ticket's own invoice. Without this, a
+    // valid paid hash from any other invoice could be replayed with an arbitrary
+    // ticketId to confirm tickets for free.
+    const ticketPayment = await dbGet<any>(
+      (db as any).select().from(payments).where(eq((payments as any).ticketId, ticketId))
+    );
+    if (!ticketPayment || ticketPayment.reference !== payload.payment_hash) {
+      console.warn('LNbits webhook rejected: payment hash does not match the ticket invoice', {
+        ticketId,
+        paymentHash: payload.payment_hash,
+      });
+      return c.json({ received: true, processed: false }, 200);
+    }
+
     // Stop background checker since webhook confirmed payment
     stopBackgroundChecker(ticketId);
 
     await handlePaymentComplete(ticketId, payload.payment_hash);
     
     // Notify connected clients via SSE
-    notifyClients(ticketId, { type: 'paid', ticketId, paymentHash: payload.payment_hash });
+    await notifyClients(ticketId, { type: 'paid', ticketId, paymentHash: payload.payment_hash });
     
     return c.json({ received: true, processed: true }, 200);
   } catch (error) {
@@ -186,15 +269,13 @@ async function handlePaymentComplete(ticketId: string, paymentHash: string) {
     console.log(`Multi-ticket booking detected: ${ticketsToConfirm.length} tickets to confirm`);
   }
   
-  // Confirm all tickets in the booking
+  // Confirm all tickets in the booking (idempotent: only flip pending -> confirmed)
   for (const ticket of ticketsToConfirm) {
-    // Update ticket status to confirmed
     await (db as any)
       .update(tickets)
       .set({ status: 'confirmed' })
-      .where(eq((tickets as any).id, ticket.id));
+      .where(and(eq((tickets as any).id, ticket.id), eq((tickets as any).status, 'pending')));
     
-    // Update payment status to paid
     await (db as any)
       .update(payments)
       .set({ 
@@ -203,7 +284,7 @@ async function handlePaymentComplete(ticketId: string, paymentHash: string) {
         paidAt: now,
         updatedAt: now,
       })
-      .where(eq((payments as any).ticketId, ticket.id));
+      .where(and(eq((payments as any).ticketId, ticket.id), eq((payments as any).status, 'pending')));
     
     console.log(`Ticket ${ticket.id} confirmed via Lightning payment (hash: ${paymentHash})`);
   }
@@ -242,38 +323,45 @@ lnbitsRouter.get('/stream/:ticketId', async (c) => {
     return c.json({ error: 'Ticket not found' }, 404);
   }
   
-  // If already paid, return immediately
-  if (ticket.status === 'confirmed') {
-    return c.json({ type: 'already_paid', ticketId }, 200);
-  }
-  
   // Get payment to start background checker
   const payment = await dbGet<any>(
     (db as any).select().from(payments).where(eq((payments as any).ticketId, ticketId))
   );
   
-  // Start background checker if not already running
-  if (payment?.reference && !activeCheckers.has(ticketId)) {
-    startBackgroundChecker(ticketId, payment.reference, 900); // 15 min expiry
+  // Start background checker if not already running (only while still pending)
+  if (ticket.status !== 'confirmed' && payment?.reference && !activeCheckers.has(ticketId)) {
+    await startBackgroundChecker(ticketId, payment.reference, 900); // 15 min expiry
   }
   
+  // Prevent proxies/CDNs from buffering the event stream so events flush immediately.
+  c.header('Cache-Control', 'no-cache, no-transform');
+  c.header('X-Accel-Buffering', 'no');
+  
   return streamSSE(c, async (stream) => {
-    // Register this connection
-    if (!activeConnections.has(ticketId)) {
-      activeConnections.set(ticketId, new Set());
-    }
-    
-    const sendEvent = (data: any) => {
-      stream.writeSSE({ data: JSON.stringify(data), event: 'payment' });
+    const sendEvent = async (data: any) => {
+      await stream.writeSSE({ data: JSON.stringify(data), event: 'payment' });
     };
     
+    // If already paid, notify over SSE and close (EventSource can parse this).
+    if (ticket.status === 'confirmed') {
+      await sendEvent({ type: 'already_paid', ticketId });
+      return;
+    }
+    
+    // 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);
     
     // Send initial status
-    await stream.writeSSE({ 
-      data: JSON.stringify({ type: 'connected', ticketId }), 
-      event: 'payment' 
-    });
+    await sendEvent({ type: 'connected', ticketId });
     
     // Keep connection alive with heartbeat
     const heartbeat = setInterval(async () => {
@@ -292,6 +380,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);
+          }
         }
       }
     });
@@ -303,6 +397,145 @@ lnbitsRouter.get('/stream/:ticketId', async (c) => {
   });
 });
 
+/**
+ * Get a Lightning invoice for a ticket to pay or re-pay.
+ *
+ * Reuses the stored invoice if it still has more than 5 minutes of validity
+ * left; otherwise generates a fresh one from LNbits. This is what lets a user
+ * come back to an unpaid Lightning booking later (e.g. from "Pay now" on the
+ * dashboard) instead of hitting a dead end.
+ */
+lnbitsRouter.post('/invoice/:ticketId', async (c) => {
+  const ticketId = c.req.param('ticketId');
+
+  const ticket = await dbGet<any>(
+    (db as any).select().from(tickets).where(eq((tickets as any).id, ticketId))
+  );
+  if (!ticket) {
+    return c.json({ error: 'Ticket not found' }, 404);
+  }
+
+  const payment = await dbGet<any>(
+    (db as any).select().from(payments).where(eq((payments as any).ticketId, ticketId))
+  );
+  if (!payment) {
+    return c.json({ error: 'Payment not found' }, 404);
+  }
+
+  if (payment.provider !== 'lightning') {
+    return c.json({ error: 'This booking is not a Lightning payment' }, 400);
+  }
+
+  if (ticket.status === 'confirmed' || payment.status === 'paid') {
+    return c.json({ alreadyPaid: true });
+  }
+
+  if (ticket.status !== 'pending' || payment.status !== 'pending') {
+    return c.json({
+      error: 'This booking is no longer active. Please make a new booking.',
+    }, 400);
+  }
+
+  // Gather every ticket/payment in the booking group - a multi-ticket booking
+  // shares a single Lightning invoice for the combined total.
+  let groupTickets: any[] = [ticket];
+  if (ticket.bookingId) {
+    groupTickets = await dbAll<any>(
+      (db as any).select().from(tickets).where(eq((tickets as any).bookingId, ticket.bookingId))
+    );
+  }
+  const groupPayments = await dbAll<any>(
+    (db as any).select().from(payments).where(inArray((payments as any).ticketId, groupTickets.map((t: any) => t.id)))
+  );
+  const invoiceHolder = groupPayments.find((p: any) => p.reference) || payment;
+  const totalAmount = groupPayments.reduce((sum: number, p: any) => sum + Number(p.amount), 0);
+  const currency = invoiceHolder.currency;
+
+  const now = Date.now();
+  const FIVE_MIN_MS = 5 * 60 * 1000;
+  const expiresAtMs = invoiceHolder.lnbitsExpiresAt ? new Date(invoiceHolder.lnbitsExpiresAt).getTime() : 0;
+
+  if (invoiceHolder.reference && invoiceHolder.lnbitsInvoice && expiresAtMs - now > FIVE_MIN_MS) {
+    return c.json({
+      invoice: {
+        paymentHash: invoiceHolder.reference,
+        paymentRequest: invoiceHolder.lnbitsInvoice,
+        amount: invoiceHolder.lnbitsAmountSats || 0,
+        fiatAmount: totalAmount,
+        fiatCurrency: currency,
+        expiresAt: invoiceHolder.lnbitsExpiresAt,
+      },
+      reused: true,
+    });
+  }
+
+  // No usable stored invoice (never created, expired, or expiring soon) - get a fresh one.
+  if (!isLNbitsConfigured()) {
+    return c.json({ error: 'Bitcoin Lightning payments are not available at this time' }, 400);
+  }
+
+  const event = await dbGet<any>(
+    (db as any).select().from(events).where(eq((events as any).id, ticket.eventId))
+  );
+
+  const apiUrl = process.env.API_URL || 'http://localhost:3001';
+  const webhookSecret = process.env.LNBITS_WEBHOOK_SECRET || '';
+  const webhookUrl = webhookSecret
+    ? `${apiUrl}/api/lnbits/webhook?token=${encodeURIComponent(webhookSecret)}`
+    : `${apiUrl}/api/lnbits/webhook`;
+  const attendeeName = `${ticket.attendeeFirstName} ${ticket.attendeeLastName || ''}`.trim();
+
+  try {
+    const lnbitsInvoice = await createInvoice({
+      amount: totalAmount,
+      unit: currency,
+      memo: `Spanglish: ${event?.title || 'Event'} - ${attendeeName}${groupTickets.length > 1 ? ` (${groupTickets.length} tickets)` : ''}`,
+      webhookUrl,
+      expiry: LNBITS_INVOICE_EXPIRY_SECONDS,
+      extra: {
+        ticketId: invoiceHolder.ticketId,
+        bookingId: ticket.bookingId || null,
+        ticketIds: groupTickets.map((t: any) => t.id),
+        eventId: ticket.eventId,
+        eventTitle: event?.title,
+        attendeeName,
+        attendeeEmail: ticket.attendeeEmail,
+        ticketCount: groupTickets.length,
+      },
+    });
+
+    const lnbitsExpiresAt = toDbDate(new Date(now + LNBITS_INVOICE_EXPIRY_SECONDS * 1000));
+
+    await (db as any)
+      .update(payments)
+      .set({
+        reference: lnbitsInvoice.paymentHash,
+        lnbitsInvoice: lnbitsInvoice.paymentRequest,
+        lnbitsExpiresAt,
+        lnbitsAmountSats: lnbitsInvoice.amount,
+        updatedAt: getNow(),
+      })
+      .where(eq((payments as any).id, invoiceHolder.id));
+
+    return c.json({
+      invoice: {
+        paymentHash: lnbitsInvoice.paymentHash,
+        paymentRequest: lnbitsInvoice.paymentRequest,
+        amount: lnbitsInvoice.amount,
+        fiatAmount: lnbitsInvoice.fiatAmount ?? totalAmount,
+        fiatCurrency: lnbitsInvoice.fiatCurrency ?? currency,
+        expiresAt: lnbitsExpiresAt,
+      },
+      reused: false,
+    });
+  } catch (error: any) {
+    console.error('Failed to create Lightning invoice:', error);
+    return c.json({
+      error: `Failed to create Lightning invoice: ${error.message || 'Unknown error'}`,
+    }, 500);
+  }
+});
+
 /**
  * Get payment status for a ticket (fallback polling endpoint)
  */

backend/src/routes/media.ts

@@ -1,24 +1,51 @@
 import { Hono } from 'hono';
 import { db, dbGet, dbAll, media } from '../db/index.js';
-import { eq } from 'drizzle-orm';
+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 { existsSync } from 'fs';
-import { join, extname } from 'path';
+import { getStorage, keyFromUrl } from '../lib/storage.js';
 
 const mediaRouter = new Hono();
 
-const UPLOAD_DIR = './uploads';
-const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/avif'];
 const MAX_FILE_SIZE =
   (Number(process.env.MEDIA_MAX_UPLOAD_MB || '10') || 10) * 1024 * 1024; // default 10MB
 
-// Ensure upload directory exists
-async function ensureUploadDir() {
-  if (!existsSync(UPLOAD_DIR)) {
-    await mkdir(UPLOAD_DIR, { recursive: true });
+/**
+ * Detect a real image type from the file's magic bytes (content sniffing).
+ * Returns the canonical mime + extension, or null if the content is not an
+ * allowed image. We deliberately ignore the client-supplied filename and
+ * Content-Type so an attacker cannot store e.g. an .html/.svg payload.
+ */
+function detectImageType(buf: Buffer): { mime: string; ext: string } | null {
+  if (buf.length < 12) return null;
+
+  // JPEG: FF D8 FF
+  if (buf[0] === 0xff && buf[1] === 0xd8 && buf[2] === 0xff) {
+    return { mime: 'image/jpeg', ext: '.jpg' };
   }
+  // PNG: 89 50 4E 47 0D 0A 1A 0A
+  if (
+    buf[0] === 0x89 && buf[1] === 0x50 && buf[2] === 0x4e && buf[3] === 0x47 &&
+    buf[4] === 0x0d && buf[5] === 0x0a && buf[6] === 0x1a && buf[7] === 0x0a
+  ) {
+    return { mime: 'image/png', ext: '.png' };
+  }
+  // GIF: "GIF87a" / "GIF89a"
+  if (buf.toString('ascii', 0, 6) === 'GIF87a' || buf.toString('ascii', 0, 6) === 'GIF89a') {
+    return { mime: 'image/gif', ext: '.gif' };
+  }
+  // WEBP: "RIFF"...."WEBP"
+  if (buf.toString('ascii', 0, 4) === 'RIFF' && buf.toString('ascii', 8, 12) === 'WEBP') {
+    return { mime: 'image/webp', ext: '.webp' };
+  }
+  // AVIF / HEIF: "....ftyp" with an avif/heic brand
+  if (buf.toString('ascii', 4, 8) === 'ftyp') {
+    const brand = buf.toString('ascii', 8, 12);
+    if (brand === 'avif' || brand === 'avis') {
+      return { mime: 'image/avif', ext: '.avif' };
+    }
+  }
+  return null;
 }
 
 // Upload image
@@ -31,28 +58,28 @@ mediaRouter.post('/upload', requireAuth(['admin', 'organizer']), async (c) => {
       return c.json({ error: 'No file provided' }, 400);
     }
     
-    // Validate file type
-    if (!ALLOWED_TYPES.includes(file.type)) {
-      return c.json({ error: 'Invalid file type. Allowed: JPEG, PNG, GIF, WebP, AVIF' }, 400);
-    }
-    
-    // Validate file size
+    // Validate file size (cheap check before reading the whole buffer)
     if (file.size > MAX_FILE_SIZE) {
       const mb = Math.round((MAX_FILE_SIZE / (1024 * 1024)) * 10) / 10;
       return c.json({ error: `File too large. Maximum size: ${mb}MB` }, 400);
     }
     
-    await ensureUploadDir();
-    
-    // Generate unique filename
-    const id = generateId();
-    const ext = extname(file.name) || '.jpg';
-    const filename = `${id}${ext}`;
-    const filepath = join(UPLOAD_DIR, filename);
-    
-    // Write file
+    // Read the bytes and validate the *content* (not the client-provided type/name)
     const arrayBuffer = await file.arrayBuffer();
-    await writeFile(filepath, Buffer.from(arrayBuffer));
+    const buffer = Buffer.from(arrayBuffer);
+
+    const detected = detectImageType(buffer);
+    if (!detected) {
+      return c.json({ error: 'Invalid file. Allowed: JPEG, PNG, GIF, WebP, AVIF' }, 400);
+    }
+    
+    // Generate unique filename using the *detected* extension (ignore client filename)
+    const id = generateId();
+    const filename = `${id}${detected.ext}`;
+
+    // Persist via the storage backend (local disk or S3-compatible object store).
+    const storage = getStorage();
+    await storage.put(filename, buffer, detected.mime);
     
     // Get related info from form data
     const relatedId = body['relatedId'] as string | undefined;
@@ -62,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,
@@ -108,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);
-    if (existsSync(filepath)) {
-      await unlink(filepath);
-    }
+    await getStorage().delete(keyFromUrl(mediaRecord.fileUrl));
   } catch (error) {
     console.error('Failed to delete file:', error);
   }
@@ -128,17 +152,20 @@ mediaRouter.delete('/:id', requireAuth(['admin', 'organizer']), async (c) => {
 mediaRouter.get('/', requireAuth(['admin', 'organizer']), async (c) => {
   const relatedType = c.req.query('relatedType');
   const relatedId = c.req.query('relatedId');
+  const limit = Math.min(Math.max(parseInt(c.req.query('limit') || '200', 10) || 200, 1), 500);
+  const offset = Math.max(parseInt(c.req.query('offset') || '0', 10) || 0, 0);
   
+  // Combine filters into a single where() — chaining .where() replaces the prior condition in Drizzle.
+  const conditions: any[] = [];
+  if (relatedType) conditions.push(eq((media as any).relatedType, relatedType));
+  if (relatedId) conditions.push(eq((media as any).relatedId, relatedId));
+
   let query = (db as any).select().from(media);
-  
-  if (relatedType) {
-    query = query.where(eq((media as any).relatedType, relatedType));
-  }
-  if (relatedId) {
-    query = query.where(eq((media as any).relatedId, relatedId));
+  if (conditions.length > 0) {
+    query = query.where(conditions.length === 1 ? conditions[0] : and(...conditions));
   }
   
-  const result = await dbAll(query);
+  const result = await dbAll(query.limit(limit).offset(offset));
   
   return c.json({ media: result });
 });

backend/src/routes/payment-options.ts

@@ -1,9 +1,9 @@
 import { Hono } from 'hono';
 import { zValidator } from '@hono/zod-validator';
 import { z } from 'zod';
-import { db, dbGet, paymentOptions, eventPaymentOverrides, events } from '../db/index.js';
+import { db, dbGet, paymentOptions, eventPaymentOverrides, events, tickets } from '../db/index.js';
 import { eq } from 'drizzle-orm';
-import { requireAuth } from '../lib/auth.js';
+import { requireAuth, getAuthUser } from '../lib/auth.js';
 import { generateId, getNow, convertBooleansForDb } from '../lib/utils.js';
 
 const paymentOptionsRouter = new Hono();
@@ -40,6 +40,23 @@ const updatePaymentOptionsSchema = z.object({
   allowDuplicateBookings: booleanOrNumber.optional(),
 });
 
+/** Strip bank account numbers from payment options for anonymous callers. */
+function publicPaymentOptions(merged: Record<string, any>) {
+  return {
+    ...merged,
+    bankName: null,
+    bankAccountHolder: null,
+    bankAccountNumber: null,
+    bankAlias: null,
+    bankPhone: null,
+    tpagoLink: null,
+    tpagoLink2: null,
+    tpagoLink3: null,
+    tpagoLink4: null,
+    tpagoLink5: null,
+  };
+}
+
 // Schema for event-level overrides
 const updateEventOverridesSchema = z.object({
   tpagoEnabled: booleanOrNumber.optional().nullable(),
@@ -151,6 +168,7 @@ paymentOptionsRouter.put('/', requireAuth(['admin']), zValidator('json', updateP
 // Get payment options for a specific event (merged with global)
 paymentOptionsRouter.get('/event/:eventId', async (c) => {
   const eventId = c.req.param('eventId');
+  const ticketId = c.req.query('ticketId');
 
   // Get the event first to verify it exists
   const event = await dbGet(
@@ -229,8 +247,24 @@ paymentOptionsRouter.get('/event/:eventId', async (c) => {
     cashInstructionsEs: overrides?.cashInstructionsEs ?? global.cashInstructionsEs,
   };
 
+  // Full bank/TPago credentials are only returned when the caller proves they hold
+  // a valid ticket for this event (the ticket UUID is the booking capability token),
+  // or when an authenticated admin/organizer requests them.
+  let revealSensitive = false;
+  const authUser: any = await getAuthUser(c);
+  if (authUser && ['admin', 'organizer'].includes(authUser.role)) {
+    revealSensitive = true;
+  } else if (ticketId) {
+    const ticket = await dbGet<any>(
+      (db as any).select().from(tickets).where(eq((tickets as any).id, ticketId))
+    );
+    if (ticket && ticket.eventId === eventId && ticket.status !== 'cancelled') {
+      revealSensitive = true;
+    }
+  }
+
   return c.json({
-    paymentOptions: merged,
+    paymentOptions: revealSensitive ? merged : publicPaymentOptions(merged),
     hasOverrides: !!overrides,
   });
 });

backend/src/routes/payments.ts

@@ -2,15 +2,16 @@ import { Hono } from 'hono';
 import { zValidator } from '@hono/zod-validator';
 import { z } from 'zod';
 import { db, dbGet, dbAll, payments, tickets, events } from '../db/index.js';
-import { eq, desc, and, or, sql } from 'drizzle-orm';
+import { eq, desc, and, or, sql, inArray } from 'drizzle-orm';
 import { requireAuth } from '../lib/auth.js';
 import { getNow } from '../lib/utils.js';
 import emailService from '../lib/email.js';
+import { reserveOnHoldBooking, HoldCapacityError } from '../lib/holdRecovery.js';
 
 const paymentsRouter = new Hono();
 
 const updatePaymentSchema = z.object({
-  status: z.enum(['pending', 'pending_approval', 'paid', 'refunded', 'failed']),
+  status: z.enum(['pending', 'pending_approval', 'paid', 'refunded', 'failed', 'on_hold']),
   reference: z.string().optional(),
   adminNote: z.string().optional(),
 });
@@ -85,6 +86,7 @@ paymentsRouter.get('/', requireAuth(['admin']), async (c) => {
           attendeeLastName: ticket.attendeeLastName,
           attendeeEmail: ticket.attendeeEmail,
           attendeePhone: ticket.attendeePhone,
+          attendeeRuc: ticket.attendeeRuc,
           status: ticket.status,
         } : null,
         event: event ? {
@@ -95,7 +97,7 @@ paymentsRouter.get('/', requireAuth(['admin']), async (c) => {
       };
     })
   );
-  
+
   // Filter by event(s)
   if (eventId) {
     enrichedPayments = enrichedPayments.filter((p: any) => p.event?.id === eventId);
@@ -162,6 +164,31 @@ paymentsRouter.get('/pending-approval', requireAuth(['admin', 'organizer']), asy
   return c.json({ payments: enrichedPayments });
 });
 
+// Get payment statistics (admin) — registered before /:id so "stats" is not parsed as an id
+paymentsRouter.get('/stats/overview', requireAuth(['admin']), async (c) => {
+  const [totalRow, pendingRow, paidRow, refundedRow, failedRow, onHoldRow, revenueRow] = await Promise.all([
+    dbGet<any>((db as any).select({ count: sql<number>`count(*)` }).from(payments)),
+    dbGet<any>((db as any).select({ count: sql<number>`count(*)` }).from(payments).where(eq((payments as any).status, 'pending'))),
+    dbGet<any>((db as any).select({ count: sql<number>`count(*)` }).from(payments).where(eq((payments as any).status, 'paid'))),
+    dbGet<any>((db as any).select({ count: sql<number>`count(*)` }).from(payments).where(eq((payments as any).status, 'refunded'))),
+    dbGet<any>((db as any).select({ count: sql<number>`count(*)` }).from(payments).where(eq((payments as any).status, 'failed'))),
+    dbGet<any>((db as any).select({ count: sql<number>`count(*)` }).from(payments).where(eq((payments as any).status, 'on_hold'))),
+    dbGet<any>((db as any).select({ total: sql<number>`COALESCE(SUM(${(payments as any).amount}), 0)` }).from(payments).where(eq((payments as any).status, 'paid'))),
+  ]);
+
+  return c.json({
+    stats: {
+      total: Number(totalRow?.count || 0),
+      pending: Number(pendingRow?.count || 0),
+      paid: Number(paidRow?.count || 0),
+      refunded: Number(refundedRow?.count || 0),
+      failed: Number(failedRow?.count || 0),
+      onHold: Number(onHoldRow?.count || 0),
+      totalRevenue: Number(revenueRow?.total || 0),
+    },
+  });
+});
+
 // Get payment by ID (admin)
 paymentsRouter.get('/:id', requireAuth(['admin', 'organizer']), async (c) => {
   const id = c.req.param('id');
@@ -294,13 +321,13 @@ paymentsRouter.post('/:id/approve', requireAuth(['admin', 'organizer']), zValida
     return c.json({ error: 'Payment not found' }, 404);
   }
   
-  // Can approve pending or pending_approval payments
-  if (!['pending', 'pending_approval'].includes(payment.status)) {
+  // Can approve pending, pending_approval, or on_hold payments
+  if (!['pending', 'pending_approval', 'on_hold'].includes(payment.status)) {
     return c.json({ error: 'Payment cannot be approved in its current state' }, 400);
   }
-  
+
   const now = getNow();
-  
+
   // Get the ticket associated with this payment
   const ticket = await dbGet<any>(
     (db as any)
@@ -308,10 +335,10 @@ paymentsRouter.post('/:id/approve', requireAuth(['admin', 'organizer']), zValida
       .from(tickets)
       .where(eq((tickets as any).id, payment.ticketId))
   );
-  
+
   // Check if this is part of a multi-ticket booking
   let ticketsToConfirm: any[] = [ticket];
-  
+
   if (ticket?.bookingId) {
     // Get all tickets in this booking
     ticketsToConfirm = await dbAll(
@@ -322,27 +349,54 @@ paymentsRouter.post('/:id/approve', requireAuth(['admin', 'organizer']), zValida
     );
     console.log(`[Payment] Approving multi-ticket booking: ${ticket.bookingId}, ${ticketsToConfirm.length} tickets`);
   }
-  
-  // Update all payments in the booking to paid
-  for (const t of ticketsToConfirm) {
-    await (db as any)
-      .update(payments)
-      .set({ 
-        status: 'paid',
-        paidAt: now,
-        paidByAdminId: user.id,
-        adminNote: adminNote || payment.adminNote,
-        updatedAt: now,
-      })
-      .where(eq((payments as any).ticketId, (t as any).id));
-    
-    // Update ticket status to confirmed
-    await (db as any)
-      .update(tickets)
-      .set({ status: 'confirmed' })
-      .where(eq((tickets as any).id, (t as any).id));
+
+  if (payment.status === 'on_hold') {
+    // The seat was released when this booking went on hold - re-check capacity
+    // before confirming it directly.
+    try {
+      await reserveOnHoldBooking(
+        ticket.eventId,
+        ticketsToConfirm.map((t: any) => t.id),
+        'confirmed',
+        'paid',
+        { paidByAdminId: user.id }
+      );
+    } catch (err) {
+      if (err instanceof HoldCapacityError) {
+        return c.json({
+          error: 'This event is now full. Your spot was released after the payment deadline passed.',
+        }, 400);
+      }
+      throw err;
+    }
+    if (adminNote) {
+      await (db as any)
+        .update(payments)
+        .set({ adminNote })
+        .where(inArray((payments as any).ticketId, ticketsToConfirm.map((t: any) => t.id)));
+    }
+  } else {
+    // Update all payments in the booking to paid
+    for (const t of ticketsToConfirm) {
+      await (db as any)
+        .update(payments)
+        .set({
+          status: 'paid',
+          paidAt: now,
+          paidByAdminId: user.id,
+          adminNote: adminNote || payment.adminNote,
+          updatedAt: now,
+        })
+        .where(eq((payments as any).ticketId, (t as any).id));
+
+      // Update ticket status to confirmed
+      await (db as any)
+        .update(tickets)
+        .set({ status: 'confirmed' })
+        .where(eq((tickets as any).id, (t as any).id));
+    }
   }
-  
+
   // Send confirmation emails asynchronously (if sendEmail is true, which is the default)
   if (sendEmail !== false) {
     Promise.all([
@@ -382,31 +436,45 @@ paymentsRouter.post('/:id/reject', requireAuth(['admin', 'organizer']), zValidat
     return c.json({ error: 'Payment not found' }, 404);
   }
   
-  if (!['pending', 'pending_approval'].includes(payment.status)) {
+  if (!['pending', 'pending_approval', 'on_hold'].includes(payment.status)) {
     return c.json({ error: 'Payment cannot be rejected in its current state' }, 400);
   }
   
   const now = getNow();
-  
-  // Update payment status to failed
-  await (db as any)
-    .update(payments)
-    .set({ 
-      status: 'failed',
-      paidByAdminId: user.id,
-      adminNote: adminNote || payment.adminNote,
-      updatedAt: now,
-    })
-    .where(eq((payments as any).id, id));
-  
-  // Cancel the ticket - booking is no longer valid after rejection
-  await (db as any)
-    .update(tickets)
-    .set({ 
-      status: 'cancelled',
-      updatedAt: now,
-    })
-    .where(eq((tickets as any).id, payment.ticketId));
+
+  // Determine all tickets in this booking (multi-ticket bookings must be rejected together)
+  const rejectTicket = await dbGet<any>(
+    (db as any).select().from(tickets).where(eq((tickets as any).id, payment.ticketId))
+  );
+  let ticketsToReject: any[] = rejectTicket ? [rejectTicket] : [];
+  if (rejectTicket?.bookingId) {
+    ticketsToReject = await dbAll<any>(
+      (db as any).select().from(tickets).where(eq((tickets as any).bookingId, rejectTicket.bookingId))
+    );
+    console.log(`[Payment] Rejecting multi-ticket booking: ${rejectTicket.bookingId}, ${ticketsToReject.length} tickets`);
+  }
+
+  for (const t of ticketsToReject) {
+    // Fail the payment for each ticket in the booking
+    await (db as any)
+      .update(payments)
+      .set({ 
+        status: 'failed',
+        paidByAdminId: user.id,
+        adminNote: adminNote || payment.adminNote,
+        updatedAt: now,
+      })
+      .where(eq((payments as any).ticketId, (t as any).id));
+
+    // Cancel the ticket - booking is no longer valid after rejection
+    await (db as any)
+      .update(tickets)
+      .set({ 
+        status: 'cancelled',
+        updatedAt: now,
+      })
+      .where(eq((tickets as any).id, (t as any).id));
+  }
   
   // Send rejection email asynchronously (for manual payment methods only, if sendEmail is true)
   if (sendEmail !== false && ['bank_transfer', 'tpago'].includes(payment.provider)) {
@@ -427,6 +495,59 @@ paymentsRouter.post('/:id/reject', requireAuth(['admin', 'organizer']), zValidat
   return c.json({ payment: updated, message: 'Payment rejected and booking cancelled' });
 });
 
+// Reactivate an on-hold payment back to pending_approval (admin) - re-reserves the seat
+paymentsRouter.post('/:id/reactivate', requireAuth(['admin', 'organizer']), async (c) => {
+  const id = c.req.param('id');
+
+  const payment = await dbGet<any>(
+    (db as any).select().from(payments).where(eq((payments as any).id, id))
+  );
+
+  if (!payment) {
+    return c.json({ error: 'Payment not found' }, 404);
+  }
+
+  if (payment.status !== 'on_hold') {
+    return c.json({ error: 'Only on-hold payments can be reactivated' }, 400);
+  }
+
+  const ticket = await dbGet<any>(
+    (db as any).select().from(tickets).where(eq((tickets as any).id, payment.ticketId))
+  );
+  if (!ticket) {
+    return c.json({ error: 'Ticket not found' }, 404);
+  }
+
+  let ticketsToReactivate: any[] = [ticket];
+  if (ticket.bookingId) {
+    ticketsToReactivate = await dbAll<any>(
+      (db as any).select().from(tickets).where(eq((tickets as any).bookingId, ticket.bookingId))
+    );
+  }
+
+  try {
+    await reserveOnHoldBooking(
+      ticket.eventId,
+      ticketsToReactivate.map((t: any) => t.id),
+      'pending',
+      'pending_approval'
+    );
+  } catch (err) {
+    if (err instanceof HoldCapacityError) {
+      return c.json({
+        error: 'This event is now full. Your spot was released after the payment deadline passed.',
+      }, 400);
+    }
+    throw err;
+  }
+
+  const updated = await dbGet(
+    (db as any).select().from(payments).where(eq((payments as any).id, id))
+  );
+
+  return c.json({ payment: updated, message: 'Booking reactivated and pending admin review' });
+});
+
 // Send payment reminder email
 paymentsRouter.post('/:id/send-reminder', requireAuth(['admin', 'organizer']), async (c) => {
   const id = c.req.param('id');
@@ -529,56 +650,42 @@ paymentsRouter.post('/:id/refund', requireAuth(['admin']), async (c) => {
   }
   
   const now = getNow();
-  
-  // Update payment status
-  await (db as any)
-    .update(payments)
-    .set({ status: 'refunded', updatedAt: now })
-    .where(eq((payments as any).id, id));
-  
-  // Cancel associated ticket
-  await (db as any)
-    .update(tickets)
-    .set({ status: 'cancelled' })
-    .where(eq((tickets as any).id, payment.ticketId));
+
+  // Refund all tickets/payments in the booking (multi-ticket bookings refund together)
+  const refundTicket = await dbGet<any>(
+    (db as any).select().from(tickets).where(eq((tickets as any).id, payment.ticketId))
+  );
+  let ticketsToRefund: any[] = refundTicket ? [refundTicket] : [];
+  if (refundTicket?.bookingId) {
+    ticketsToRefund = await dbAll<any>(
+      (db as any).select().from(tickets).where(eq((tickets as any).bookingId, refundTicket.bookingId))
+    );
+    console.log(`[Payment] Refunding multi-ticket booking: ${refundTicket.bookingId}, ${ticketsToRefund.length} tickets`);
+  }
+
+  for (const t of ticketsToRefund) {
+    // Only refund payments that were actually paid; leave others untouched
+    await (db as any)
+      .update(payments)
+      .set({ status: 'refunded', updatedAt: now })
+      .where(and(eq((payments as any).ticketId, (t as any).id), eq((payments as any).status, 'paid')));
+
+    await (db as any)
+      .update(tickets)
+      .set({ status: 'cancelled' })
+      .where(eq((tickets as any).id, (t as any).id));
+  }
   
   return c.json({ message: 'Refund processed successfully' });
 });
 
 // Payment webhook (for Stripe/MercadoPago)
+// Not implemented: there is deliberately NO status mutation here. Until provider
+// signature verification is implemented, accepting webhooks would let anyone forge
+// a "paid" status. Returns 501 and never updates payments/tickets.
 paymentsRouter.post('/webhook', async (c) => {
-  // This would handle webhook notifications from payment providers
-  // Implementation depends on which provider is used
-  
-  const body = await c.req.json();
-  
-  // Log webhook for debugging
-  console.log('Payment webhook received:', body);
-  
-  // TODO: Implement provider-specific webhook handling
-  // - Verify webhook signature
-  // - Update payment status
-  // - Update ticket status
-  
-  return c.json({ received: true });
-});
-
-// Get payment statistics (admin)
-paymentsRouter.get('/stats/overview', requireAuth(['admin']), async (c) => {
-  const allPayments = await dbAll<any>((db as any).select().from(payments));
-  
-  const stats = {
-    total: allPayments.length,
-    pending: allPayments.filter((p: any) => p.status === 'pending').length,
-    paid: allPayments.filter((p: any) => p.status === 'paid').length,
-    refunded: allPayments.filter((p: any) => p.status === 'refunded').length,
-    failed: allPayments.filter((p: any) => p.status === 'failed').length,
-    totalRevenue: allPayments
-      .filter((p: any) => p.status === 'paid')
-      .reduce((sum: number, p: any) => sum + Number(p.amount || 0), 0),
-  };
-  
-  return c.json({ stats });
+  console.warn('Payment webhook received but provider webhooks are not implemented (no signature verification).');
+  return c.json({ error: 'Webhook handling is not implemented' }, 501);
 });
 
 export default paymentsRouter;

backend/src/routes/site-settings.ts

@@ -17,9 +17,20 @@ interface UserContext {
 const siteSettingsRouter = new Hono<{ Variables: { user: UserContext } }>();
 
 // Validation schema for updating site settings
+// Validate against the runtime's IANA timezone database (rejects arbitrary strings
+// that later get fed into Intl.DateTimeFormat on the frontend).
+const isValidTimezone = (tz: string): boolean => {
+  try {
+    Intl.DateTimeFormat('en-US', { timeZone: tz });
+    return true;
+  } catch {
+    return false;
+  }
+};
+
 const updateSiteSettingsSchema = z.object({
-  timezone: z.string().optional(),
-  siteName: z.string().optional(),
+  timezone: z.string().refine(isValidTimezone, { message: 'Invalid timezone' }).optional(),
+  siteName: z.string().max(255).optional(),
   siteDescription: z.string().optional().nullable(),
   siteDescriptionEs: z.string().optional().nullable(),
   contactEmail: z.string().email().optional().nullable().or(z.literal('')),

backend/src/routes/tickets.ts

@@ -1,13 +1,15 @@
 import { Hono } from 'hono';
 import { zValidator } from '@hono/zod-validator';
 import { z } from 'zod';
-import { db, dbGet, dbAll, tickets, events, users, payments, paymentOptions, siteSettings } from '../db/index.js';
+import { db, dbGet, dbAll, tickets, events, users, payments, paymentOptions, eventPaymentOverrides, siteSettings, isSqlite } from '../db/index.js';
 import { eq, and, or, sql, inArray } from 'drizzle-orm';
 import { requireAuth, getAuthUser } from '../lib/auth.js';
-import { generateId, generateTicketCode, getNow, calculateAvailableSeats, isEventSoldOut } from '../lib/utils.js';
-import { createInvoice, isLNbitsConfigured } from '../lib/lnbits.js';
+import { generateId, generateTicketCode, getNow, toDbDate, calculateAvailableSeats, isEventSoldOut } from '../lib/utils.js';
+import { createInvoice, isLNbitsConfigured, LNBITS_INVOICE_EXPIRY_SECONDS } from '../lib/lnbits.js';
+import { rateLimitMiddleware } from '../lib/rateLimit.js';
 import emailService from '../lib/email.js';
 import { generateTicketPDF, generateCombinedTicketsPDF } from '../lib/pdf.js';
+import { reserveOnHoldBooking, HoldCapacityError } from '../lib/holdRecovery.js';
 
 const ticketsRouter = new Hono();
 
@@ -17,6 +19,9 @@ const attendeeSchema = z.object({
   lastName: z.string().min(2).optional().or(z.literal('')),
 });
 
+// Maximum tickets a single buyer can book at once (enforced server-side)
+const MAX_TICKETS_PER_BOOKING = 5;
+
 const createTicketSchema = z.object({
   eventId: z.string(),
   firstName: z.string().min(2),
@@ -24,14 +29,40 @@ const createTicketSchema = z.object({
   email: z.string().email(),
   phone: z.string().min(6).optional().or(z.literal('')),
   preferredLanguage: z.enum(['en', 'es']).optional(),
-  paymentMethod: z.enum(['bancard', 'lightning', 'cash', 'bank_transfer', 'tpago']).default('cash'),
-  ruc: z.string().regex(/^\d{6,10}$/, 'Invalid RUC format').optional().or(z.literal('')),
-  // Optional: array of attendees for multi-ticket booking
-  attendees: z.array(attendeeSchema).optional(),
+  // 'bancard' intentionally excluded: no checkout integration exists for it
+  paymentMethod: z.enum(['lightning', 'cash', 'bank_transfer', 'tpago']).default('cash'),
+  // Base + optional "-" + check digit; digits-only kept for older clients, normalized to dashed form on save
+  ruc: z.string().regex(/^(\d{6,10}|\d{5,8}-\d)$/, 'Invalid RUC format').optional().or(z.literal('')),
+  // Optional: array of attendees for multi-ticket booking (capped at MAX_TICKETS_PER_BOOKING)
+  attendees: z.array(attendeeSchema).min(1).max(MAX_TICKETS_PER_BOOKING).optional(),
 });
 
+// Canonical stored RUC form is "base-checkdigit" (e.g. 1234567-9); older clients send digits only
+function normalizeRuc(ruc: string | undefined): string | null {
+  if (!ruc) return null;
+  if (ruc.includes('-')) return ruc;
+  return `${ruc.slice(0, -1)}-${ruc.slice(-1)}`;
+}
+
+// Maps a payment provider to the merged payment-option flag that enables it
+function isPaymentMethodEnabled(method: string, merged: Record<string, any>): boolean {
+  const truthy = (v: any) => v === true || v === 1;
+  switch (method) {
+    case 'tpago':
+      return truthy(merged.tpagoEnabled);
+    case 'bank_transfer':
+      return truthy(merged.bankTransferEnabled);
+    case 'lightning':
+      return truthy(merged.lightningEnabled);
+    case 'cash':
+      return truthy(merged.cashEnabled);
+    default:
+      return false;
+  }
+}
+
 const updateTicketSchema = z.object({
-  status: z.enum(['pending', 'confirmed', 'cancelled', 'checked_in']).optional(),
+  status: z.enum(['pending', 'confirmed', 'cancelled', 'checked_in', 'on_hold']).optional(),
   adminNote: z.string().optional(),
 });
 
@@ -53,13 +84,19 @@ const adminCreateTicketSchema = z.object({
 // Book a ticket (public) - supports single or multi-ticket bookings
 ticketsRouter.post('/', zValidator('json', createTicketSchema), async (c) => {
   const data = c.req.valid('json');
-  
+  const rucNumber = normalizeRuc(data.ruc);
+
   // Determine attendees list (use attendees array if provided, otherwise single attendee from main fields)
   const attendeesList = data.attendees && data.attendees.length > 0
     ? data.attendees
     : [{ firstName: data.firstName, lastName: data.lastName }];
   
   const ticketCount = attendeesList.length;
+
+  // Enforce the per-booking ticket cap server-side (UI also caps, but the API is authoritative)
+  if (ticketCount < 1 || ticketCount > MAX_TICKETS_PER_BOOKING) {
+    return c.json({ error: `You can book between 1 and ${MAX_TICKETS_PER_BOOKING} tickets per order.` }, 400);
+  }
   
   // Get event
   const event = await dbGet<any>(
@@ -72,9 +109,28 @@ ticketsRouter.post('/', zValidator('json', createTicketSchema), async (c) => {
   if (!['published', 'unlisted'].includes(event.status)) {
     return c.json({ error: 'Event is not available for booking' }, 400);
   }
+
+  // Validate the requested payment method is actually enabled for this event
+  // (merge global options with any event-level overrides; override wins when not null)
+  const globalPaymentOptions = await dbGet<any>(
+    (db as any).select().from(paymentOptions)
+  );
+  const eventOverrides = await dbGet<any>(
+    (db as any).select().from(eventPaymentOverrides).where(eq((eventPaymentOverrides as any).eventId, data.eventId))
+  );
+  const mergedPaymentOptions: Record<string, any> = {
+    tpagoEnabled: eventOverrides?.tpagoEnabled ?? globalPaymentOptions?.tpagoEnabled ?? false,
+    bankTransferEnabled: eventOverrides?.bankTransferEnabled ?? globalPaymentOptions?.bankTransferEnabled ?? false,
+    lightningEnabled: eventOverrides?.lightningEnabled ?? globalPaymentOptions?.lightningEnabled ?? true,
+    cashEnabled: eventOverrides?.cashEnabled ?? globalPaymentOptions?.cashEnabled ?? true,
+  };
+  if (!isPaymentMethodEnabled(data.paymentMethod, mergedPaymentOptions)) {
+    return c.json({ error: 'Selected payment method is not available for this event' }, 400);
+  }
   
-  // Check capacity - count confirmed AND checked_in tickets
-  // (checked_in were previously confirmed, check-in doesn't affect capacity)
+  // Check capacity - count pending, confirmed AND checked_in tickets.
+  // Pending reservations must hold seats to prevent overselling via unpaid bookings
+  // (cancelled/failed tickets are excluded so abandoned/rejected bookings free their seats).
   const existingTicketCount = await dbGet<any>(
     (db as any)
       .select({ count: sql<number>`count(*)` })
@@ -82,7 +138,7 @@ ticketsRouter.post('/', zValidator('json', createTicketSchema), async (c) => {
       .where(
         and(
           eq((tickets as any).eventId, data.eventId),
-          sql`${(tickets as any).status} IN ('confirmed', 'checked_in')`
+          sql`${(tickets as any).status} IN ('pending', 'confirmed', 'checked_in')`
         )
       )
   );
@@ -121,20 +177,23 @@ ticketsRouter.post('/', zValidator('json', createTicketSchema), async (c) => {
       phone: data.phone || null,
       role: 'user',
       languagePreference: null,
+      rucNumber,
       createdAt: now,
       updatedAt: now,
     };
     await (db as any).insert(users).values(user);
+  } else if (rucNumber) {
+    // Keep the user's saved RUC up to date for future bookings, but never blank
+    // out an existing value if this booking didn't include one.
+    await (db as any)
+      .update(users)
+      .set({ rucNumber, updatedAt: now })
+      .where(eq((users as any).id, user.id));
+    user.rucNumber = rucNumber;
   }
-  
+
   // Check for duplicate booking (unless allowDuplicateBookings is enabled)
-  const globalOptions = await dbGet<any>(
-    (db as any)
-      .select()
-      .from(paymentOptions)
-  );
-  
-  const allowDuplicateBookings = globalOptions?.allowDuplicateBookings ?? false;
+  const allowDuplicateBookings = globalPaymentOptions?.allowDuplicateBookings ?? false;
   
   if (!allowDuplicateBookings) {
     const existingTicket = await dbGet<any>(
@@ -156,52 +215,151 @@ ticketsRouter.post('/', zValidator('json', createTicketSchema), async (c) => {
   
   // Generate booking ID to group multiple tickets
   const bookingId = generateId();
-  
-  // Create tickets for each attendee
-  const createdTickets: any[] = [];
-  const createdPayments: any[] = [];
-  
-  for (let i = 0; i < attendeesList.length; i++) {
-    const attendee = attendeesList[i];
-    const ticketId = generateId();
-    const qrCode = generateTicketCode();
-    
-    const newTicket = {
-      id: ticketId,
-      bookingId: ticketCount > 1 ? bookingId : null, // Only set bookingId for multi-ticket bookings
-      userId: user.id,
-      eventId: data.eventId,
-      attendeeFirstName: attendee.firstName,
-      attendeeLastName: attendee.lastName && attendee.lastName.trim() ? attendee.lastName.trim() : null,
-      attendeeEmail: data.email, // Buyer's email for all tickets
-      attendeePhone: data.phone && data.phone.trim() ? data.phone.trim() : null,
-      attendeeRuc: data.ruc || null,
-      preferredLanguage: data.preferredLanguage || null,
-      status: 'pending',
-      qrCode,
-      checkinAt: null,
-      createdAt: now,
-    };
-    
-    await (db as any).insert(tickets).values(newTicket);
-    createdTickets.push(newTicket);
-    
-    // Create payment record for each ticket
-    const paymentId = generateId();
-    const newPayment = {
-      id: paymentId,
-      ticketId,
-      provider: data.paymentMethod,
-      amount: event.price,
-      currency: event.currency,
-      status: 'pending',
-      reference: null,
-      createdAt: now,
-      updatedAt: now,
-    };
-    
-    await (db as any).insert(payments).values(newPayment);
-    createdPayments.push(newPayment);
+
+  // Atomically re-check capacity and insert tickets/payments inside a transaction
+  // so concurrent bookings cannot oversell the same seats (TOCTOU race).
+  class BookingCapacityError extends Error {
+    constructor(public code: 'SOLD_OUT' | 'NOT_ENOUGH', public available?: number) {
+      super(code);
+    }
+  }
+
+  let createdTickets: any[] = [];
+  let createdPayments: any[] = [];
+
+  try {
+    if (isSqlite()) {
+      (db as any).transaction((tx: any) => {
+        const countRow = tx
+          .select({ count: sql<number>`count(*)` })
+          .from(tickets)
+          .where(
+            and(
+              eq((tickets as any).eventId, data.eventId),
+              sql`${(tickets as any).status} IN ('pending', 'confirmed', 'checked_in')`
+            )
+          )
+          .get();
+        const reserved = Number(countRow?.count || 0);
+        if (isEventSoldOut(event.capacity, reserved)) {
+          throw new BookingCapacityError('SOLD_OUT');
+        }
+        const seatsLeft = calculateAvailableSeats(event.capacity, reserved);
+        if (ticketCount > seatsLeft) {
+          throw new BookingCapacityError('NOT_ENOUGH', seatsLeft);
+        }
+
+        for (let i = 0; i < attendeesList.length; i++) {
+          const attendee = attendeesList[i];
+          const ticketId = generateId();
+          const qrCode = generateTicketCode();
+          const newTicket = {
+            id: ticketId,
+            bookingId: ticketCount > 1 ? bookingId : null,
+            userId: user.id,
+            eventId: data.eventId,
+            attendeeFirstName: attendee.firstName,
+            attendeeLastName: attendee.lastName && attendee.lastName.trim() ? attendee.lastName.trim() : null,
+            attendeeEmail: data.email,
+            attendeePhone: data.phone && data.phone.trim() ? data.phone.trim() : null,
+            attendeeRuc: rucNumber,
+            preferredLanguage: data.preferredLanguage || null,
+            status: 'pending',
+            qrCode,
+            checkinAt: null,
+            createdAt: now,
+          };
+          tx.insert(tickets).values(newTicket).run();
+          createdTickets.push(newTicket);
+
+          const paymentId = generateId();
+          const newPayment = {
+            id: paymentId,
+            ticketId,
+            provider: data.paymentMethod,
+            amount: event.price,
+            currency: event.currency,
+            status: 'pending',
+            reference: null,
+            createdAt: now,
+            updatedAt: now,
+          };
+          tx.insert(payments).values(newPayment).run();
+          createdPayments.push(newPayment);
+        }
+      });
+    } else {
+      await (db as any).transaction(async (tx: any) => {
+        const countRow = await dbGet<any>(
+          tx
+            .select({ count: sql<number>`count(*)` })
+            .from(tickets)
+            .where(
+              and(
+                eq((tickets as any).eventId, data.eventId),
+                sql`${(tickets as any).status} IN ('pending', 'confirmed', 'checked_in')`
+              )
+            )
+        );
+        const reserved = Number(countRow?.count || 0);
+        if (isEventSoldOut(event.capacity, reserved)) {
+          throw new BookingCapacityError('SOLD_OUT');
+        }
+        const seatsLeft = calculateAvailableSeats(event.capacity, reserved);
+        if (ticketCount > seatsLeft) {
+          throw new BookingCapacityError('NOT_ENOUGH', seatsLeft);
+        }
+
+        for (let i = 0; i < attendeesList.length; i++) {
+          const attendee = attendeesList[i];
+          const ticketId = generateId();
+          const qrCode = generateTicketCode();
+          const newTicket = {
+            id: ticketId,
+            bookingId: ticketCount > 1 ? bookingId : null,
+            userId: user.id,
+            eventId: data.eventId,
+            attendeeFirstName: attendee.firstName,
+            attendeeLastName: attendee.lastName && attendee.lastName.trim() ? attendee.lastName.trim() : null,
+            attendeeEmail: data.email,
+            attendeePhone: data.phone && data.phone.trim() ? data.phone.trim() : null,
+            attendeeRuc: rucNumber,
+            preferredLanguage: data.preferredLanguage || null,
+            status: 'pending',
+            qrCode,
+            checkinAt: null,
+            createdAt: now,
+          };
+          await tx.insert(tickets).values(newTicket);
+          createdTickets.push(newTicket);
+
+          const paymentId = generateId();
+          const newPayment = {
+            id: paymentId,
+            ticketId,
+            provider: data.paymentMethod,
+            amount: event.price,
+            currency: event.currency,
+            status: 'pending',
+            reference: null,
+            createdAt: now,
+            updatedAt: now,
+          };
+          await tx.insert(payments).values(newPayment);
+          createdPayments.push(newPayment);
+        }
+      });
+    }
+  } catch (err: any) {
+    if (err instanceof BookingCapacityError) {
+      if (err.code === 'SOLD_OUT') {
+        return c.json({ error: 'Event is sold out' }, 400);
+      }
+      return c.json({
+        error: `Not enough seats available. Only ${err.available} spot(s) remaining.`,
+      }, 400);
+    }
+    throw err;
   }
   
   const primaryTicket = createdTickets[0];
@@ -221,11 +379,26 @@ ticketsRouter.post('/', zValidator('json', createTicketSchema), async (c) => {
     });
   }
   
-  // If Lightning payment, create LNbits invoice
+  // If Lightning payment, create LNbits invoice (skip for free events — confirm immediately)
   let lnbitsInvoice = null;
   const totalPrice = event.price * ticketCount;
-  
-  if (data.paymentMethod === 'lightning' && totalPrice > 0) {
+
+  // Free events: no payment step required — confirm tickets immediately
+  if (totalPrice === 0) {
+    for (const t of createdTickets) {
+      await (db as any)
+        .update(tickets)
+        .set({ status: 'confirmed' })
+        .where(and(eq((tickets as any).id, t.id), eq((tickets as any).status, 'pending')));
+      await (db as any)
+        .update(payments)
+        .set({ status: 'paid', paidAt: now, updatedAt: now })
+        .where(and(eq((payments as any).ticketId, t.id), eq((payments as any).status, 'pending')));
+    }
+    emailService.sendBookingConfirmation(primaryTicket.id).catch(err => {
+      console.error('[Email] Failed to send free-booking confirmation:', err);
+    });
+  } else if (data.paymentMethod === 'lightning') {
     if (!isLNbitsConfigured()) {
       // Delete the tickets and payments we just created
       for (const payment of createdPayments) {
@@ -241,6 +414,11 @@ ticketsRouter.post('/', zValidator('json', createTicketSchema), async (c) => {
     
     try {
       const apiUrl = process.env.API_URL || 'http://localhost:3001';
+      // Include the webhook secret (if configured) so the callback can be authenticated
+      const webhookSecret = process.env.LNBITS_WEBHOOK_SECRET || '';
+      const webhookUrl = webhookSecret
+        ? `${apiUrl}/api/lnbits/webhook?token=${encodeURIComponent(webhookSecret)}`
+        : `${apiUrl}/api/lnbits/webhook`;
       
       // Pass the fiat currency directly to LNbits - it handles conversion automatically
       // For multi-ticket, use total price
@@ -248,8 +426,8 @@ ticketsRouter.post('/', zValidator('json', createTicketSchema), async (c) => {
         amount: totalPrice,
         unit: event.currency, // LNbits supports fiat currencies like USD, PYG, etc.
         memo: `Spanglish: ${event.title} - ${fullName}${ticketCount > 1 ? ` (${ticketCount} tickets)` : ''}`,
-        webhookUrl: `${apiUrl}/api/lnbits/webhook`,
-        expiry: 900, // 15 minutes expiry for faster UX
+        webhookUrl,
+        expiry: LNBITS_INVOICE_EXPIRY_SECONDS, // 15 minutes expiry for faster UX
         extra: {
           ticketId: primaryTicket.id,
           bookingId: ticketCount > 1 ? bookingId : null,
@@ -261,13 +439,22 @@ ticketsRouter.post('/', zValidator('json', createTicketSchema), async (c) => {
           ticketCount,
         },
       });
-      
-      // Update primary payment with LNbits payment hash reference
+
+      const lnbitsExpiresAt = toDbDate(new Date(Date.now() + LNBITS_INVOICE_EXPIRY_SECONDS * 1000));
+
+      // Update primary payment with the LNbits invoice - the BOLT11 string and
+      // expiry are persisted so the "Pay now" page can redisplay this same
+      // invoice later instead of erroring out on an unpaid Lightning booking.
       await (db as any)
         .update(payments)
-        .set({ reference: lnbitsInvoice.paymentHash })
+        .set({
+          reference: lnbitsInvoice.paymentHash,
+          lnbitsInvoice: lnbitsInvoice.paymentRequest,
+          lnbitsExpiresAt,
+          lnbitsAmountSats: lnbitsInvoice.amount,
+        })
         .where(eq((payments as any).id, primaryPayment.id));
-        
+
       (primaryPayment as any).reference = lnbitsInvoice.paymentHash;
     } catch (error: any) {
       console.error('Failed to create Lightning invoice:', error);
@@ -610,6 +797,9 @@ ticketsRouter.get('/search', requireAuth(['admin', 'organizer', 'staff']), async
 });
 
 // Get ticket by ID
+// Capability-based access: the unguessable ticket UUID acts as the access token for
+// guest bookings (no account required). For anonymous callers we withhold attendee PII
+// (email/phone/RUC); the full record is only returned to the owner or admin/staff.
 ticketsRouter.get('/:id', async (c) => {
   const id = c.req.param('id');
   
@@ -639,15 +829,22 @@ ticketsRouter.get('/:id', async (c) => {
     );
     bookingTicketCount = bookingTickets.length || 1;
   }
+
+  // Determine whether the requester is the owner or an admin/staff member
+  const authUser: any = await getAuthUser(c);
+  const isPrivileged = !!authUser && (
+    ['admin', 'organizer', 'staff'].includes(authUser.role) || authUser.id === ticket.userId
+  );
+
+  const ticketPayload: any = { ...ticket, event, payment, bookingTicketCount };
+  if (!isPrivileged) {
+    // Strip attendee PII for anonymous capability-based access
+    delete ticketPayload.attendeeEmail;
+    delete ticketPayload.attendeePhone;
+    delete ticketPayload.attendeeRuc;
+  }
   
-  return c.json({
-    ticket: {
-      ...ticket,
-      event,
-      payment,
-      bookingTicketCount,
-    },
-  });
+  return c.json({ ticket: ticketPayload });
 });
 
 // Update ticket status (admin/organizer)
@@ -935,26 +1132,47 @@ ticketsRouter.post('/:id/mark-paid', requireAuth(['admin', 'organizer', 'staff']
     );
   }
   
-  // Confirm all tickets in the booking
-  for (const t of ticketsToConfirm) {
-    // Update ticket status
-    await (db as any)
-      .update(tickets)
-      .set({ status: 'confirmed' })
-      .where(eq((tickets as any).id, t.id));
-    
-    // Update payment status
-    await (db as any)
-      .update(payments)
-      .set({ 
-        status: 'paid',
-        paidAt: now,
-        paidByAdminId: user.id,
-        updatedAt: now,
-      })
-      .where(eq((payments as any).ticketId, t.id));
+  if (ticket.status === 'on_hold') {
+    // The seat was released when this booking went on hold - re-check capacity
+    // before confirming it directly.
+    try {
+      await reserveOnHoldBooking(
+        ticket.eventId,
+        ticketsToConfirm.map((t: any) => t.id),
+        'confirmed',
+        'paid',
+        { paidByAdminId: user.id }
+      );
+    } catch (err) {
+      if (err instanceof HoldCapacityError) {
+        return c.json({
+          error: 'This event is now full. Your spot was released after the payment deadline passed.',
+        }, 400);
+      }
+      throw err;
+    }
+  } else {
+    // Confirm all tickets in the booking
+    for (const t of ticketsToConfirm) {
+      // Update ticket status
+      await (db as any)
+        .update(tickets)
+        .set({ status: 'confirmed' })
+        .where(eq((tickets as any).id, t.id));
+
+      // Update payment status
+      await (db as any)
+        .update(payments)
+        .set({
+          status: 'paid',
+          paidAt: now,
+          paidByAdminId: user.id,
+          updatedAt: now,
+        })
+        .where(eq((payments as any).ticketId, t.id));
+    }
   }
-  
+
   // Get payment for sending receipt
   const payment = await dbGet<any>(
     (db as any)
@@ -985,7 +1203,7 @@ ticketsRouter.post('/:id/mark-paid', requireAuth(['admin', 'organizer', 'staff']
 
 // User marks payment as sent (for manual payment methods: bank_transfer, tpago)
 // This sets status to "pending_approval" and notifies admin
-ticketsRouter.post('/:id/mark-payment-sent', async (c) => {
+ticketsRouter.post('/:id/mark-payment-sent', rateLimitMiddleware({ max: 10, windowMs: 10 * 60 * 1000, prefix: 'mark-payment-sent' }), async (c) => {
   const id = c.req.param('id');
   const body = await c.req.json().catch(() => ({}));
   const { payerName } = body;
@@ -1025,32 +1243,84 @@ ticketsRouter.post('/:id/mark-payment-sent', async (c) => {
   }
   
   if (payment.status === 'paid') {
-    return c.json({ 
-      payment, 
+    return c.json({
+      payment,
       message: 'Payment has already been confirmed.',
       alreadyProcessed: true,
     });
   }
-  
+
+  // A booking that was auto-released after the hold threshold: recover it by
+  // re-reserving the seat(s) and moving back into the admin approval queue.
+  if (payment.status === 'on_hold') {
+    let ticketsToRecover: any[] = [ticket];
+    if (ticket.bookingId) {
+      ticketsToRecover = await dbAll<any>(
+        (db as any).select().from(tickets).where(eq((tickets as any).bookingId, ticket.bookingId))
+      );
+    }
+
+    try {
+      await reserveOnHoldBooking(
+        ticket.eventId,
+        ticketsToRecover.map((t: any) => t.id),
+        'pending',
+        'pending_approval',
+        { extraPaymentFields: { userMarkedPaidAt: getNow(), payerName: payerName?.trim() || null } }
+      );
+    } catch (err) {
+      if (err instanceof HoldCapacityError) {
+        return c.json({
+          error: 'This event is now full. Your spot was released after the payment deadline passed.',
+        }, 400);
+      }
+      throw err;
+    }
+
+    const recoveredPayment = await dbGet(
+      (db as any).select().from(payments).where(eq((payments as any).id, payment.id))
+    );
+
+    return c.json({
+      payment: recoveredPayment,
+      message: 'Payment marked as sent. Waiting for admin approval.',
+    });
+  }
+
   // Only allow if currently pending
   if (payment.status !== 'pending') {
     return c.json({ error: 'Payment has already been processed' }, 400);
   }
-  
+
   const now = getNow();
   
-  // Update payment status to pending_approval
-  await (db as any)
-    .update(payments)
-    .set({ 
-      status: 'pending_approval',
-      userMarkedPaidAt: now,
-      payerName: payerName?.trim() || null,
-      updatedAt: now,
-    })
-    .where(eq((payments as any).id, payment.id));
+  // Update payment status to pending_approval for this ticket and any siblings
+  // in a multi-ticket booking (mirrors the approve flow's bookingId fan-out).
+  let ticketsToMark: any[] = [ticket];
+  if (ticket.bookingId) {
+    ticketsToMark = await dbAll<any>(
+      (db as any).select().from(tickets).where(eq((tickets as any).bookingId, ticket.bookingId))
+    );
+  }
+
+  for (const t of ticketsToMark) {
+    await (db as any)
+      .update(payments)
+      .set({ 
+        status: 'pending_approval',
+        userMarkedPaidAt: now,
+        payerName: payerName?.trim() || null,
+        updatedAt: now,
+      })
+      .where(
+        and(
+          eq((payments as any).ticketId, (t as any).id),
+          eq((payments as any).status, 'pending')
+        )
+      );
+  }
   
-  // Get updated payment
+  // Get updated payment for the requested ticket
   const updatedPayment = await dbGet(
     (db as any)
       .select()

backend/src/routes/users.ts

@@ -2,9 +2,9 @@ import { Hono } from 'hono';
 import { zValidator } from '@hono/zod-validator';
 import { z } from 'zod';
 import { db, dbGet, dbAll, users, tickets, events, payments, magicLinkTokens, userSessions, invoices, auditLogs, emailLogs, paymentOptions, legalPages, siteSettings } from '../db/index.js';
-import { eq, desc, sql } from 'drizzle-orm';
+import { eq, desc, sql, and, gte, lte } from 'drizzle-orm';
 import { requireAuth } from '../lib/auth.js';
-import { getNow } from '../lib/utils.js';
+import { getNow, toDbDate } from '../lib/utils.js';
 
 interface UserContext {
   id: string;
@@ -27,7 +27,43 @@ const updateUserSchema = z.object({
 // Get all users (admin only)
 usersRouter.get('/', requireAuth(['admin']), async (c) => {
   const role = c.req.query('role');
-  
+  const search = c.req.query('search');
+  const accountStatus = c.req.query('accountStatus');
+  const hasBookings = c.req.query('hasBookings'); // 'yes' | 'no'
+  const registeredAfter = c.req.query('registeredAfter');
+  const registeredBefore = c.req.query('registeredBefore');
+  const eventId = c.req.query('eventId');
+  const page = Math.max(parseInt(c.req.query('page') || '1', 10) || 1, 1);
+  const pageSize = Math.min(Math.max(parseInt(c.req.query('pageSize') || '50', 10) || 50, 1), 200);
+
+  const conditions: any[] = [];
+  if (role) conditions.push(eq((users as any).role, role));
+  if (accountStatus) conditions.push(eq((users as any).accountStatus, accountStatus));
+  if (registeredAfter) conditions.push(gte((users as any).createdAt, toDbDate(registeredAfter)));
+  if (registeredBefore) conditions.push(lte((users as any).createdAt, toDbDate(registeredBefore)));
+  if (search) {
+    const like = `%${search.toLowerCase()}%`;
+    conditions.push(sql`(
+      LOWER(${(users as any).name}) LIKE ${like}
+      OR LOWER(${(users as any).email}) LIKE ${like}
+      OR LOWER(COALESCE(${(users as any).phone}, '')) LIKE ${like}
+    )`);
+  }
+  if (hasBookings === 'yes') {
+    conditions.push(sql`EXISTS (SELECT 1 FROM tickets WHERE tickets.user_id = ${(users as any).id})`);
+  } else if (hasBookings === 'no') {
+    conditions.push(sql`NOT EXISTS (SELECT 1 FROM tickets WHERE tickets.user_id = ${(users as any).id})`);
+  }
+  if (eventId) {
+    conditions.push(sql`EXISTS (SELECT 1 FROM tickets WHERE tickets.user_id = ${(users as any).id} AND tickets.event_id = ${eventId})`);
+  }
+  const whereClause = conditions.length > 0 ? and(...conditions) : undefined;
+
+  const totalQuery = whereClause
+    ? (db as any).select({ count: sql<number>`count(*)` }).from(users).where(whereClause)
+    : (db as any).select({ count: sql<number>`count(*)` }).from(users);
+  const totalRow = await dbGet<any>(totalQuery);
+
   let query = (db as any).select({
     id: (users as any).id,
     email: (users as any).email,
@@ -40,14 +76,39 @@ usersRouter.get('/', requireAuth(['admin']), async (c) => {
     accountStatus: (users as any).accountStatus,
     createdAt: (users as any).createdAt,
   }).from(users);
-  
-  if (role) {
-    query = query.where(eq((users as any).role, role));
+
+  if (whereClause) {
+    query = query.where(whereClause);
   }
+
+  const result = await dbAll(
+    query.orderBy(desc((users as any).createdAt)).limit(pageSize).offset((page - 1) * pageSize)
+  );
+
+  return c.json({ users: result, total: Number(totalRow?.count || 0), page, pageSize });
+});
+
+// Get user statistics (admin) — registered before /:id so "stats" is not parsed as a user id
+usersRouter.get('/stats/overview', requireAuth(['admin']), async (c) => {
+  const totalUsers = await dbGet<any>(
+    (db as any)
+      .select({ count: sql<number>`count(*)` })
+      .from(users)
+  );
   
-  const result = await dbAll(query.orderBy(desc((users as any).createdAt)));
+  const adminCount = await dbGet<any>(
+    (db as any)
+      .select({ count: sql<number>`count(*)` })
+      .from(users)
+      .where(eq((users as any).role, 'admin'))
+  );
   
-  return c.json({ users: result });
+  return c.json({
+    stats: {
+      total: totalUsers?.count || 0,
+      admins: adminCount?.count || 0,
+    },
+  });
 });
 
 // Get user by ID (admin or self)
@@ -286,27 +347,4 @@ usersRouter.delete('/:id', requireAuth(['admin']), async (c) => {
   }
 });
 
-// Get user statistics (admin)
-usersRouter.get('/stats/overview', requireAuth(['admin']), async (c) => {
-  const totalUsers = await dbGet<any>(
-    (db as any)
-      .select({ count: sql<number>`count(*)` })
-      .from(users)
-  );
-  
-  const adminCount = await dbGet<any>(
-    (db as any)
-      .select({ count: sql<number>`count(*)` })
-      .from(users)
-      .where(eq((users as any).role, 'admin'))
-  );
-  
-  return c.json({
-    stats: {
-      total: totalUsers?.count || 0,
-      admins: adminCount?.count || 0,
-    },
-  });
-});
-
 export default usersRouter;

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/front-end_nginx.conf

@@ -18,11 +18,28 @@ server {
     }
 }
 
+# Canonical host is the apex (non-www). Redirect the www HTTPS vhost to it with a
+# 301 so only one host is served and indexed.
 server {
     listen 443 ssl;
     http2 on;
 
-    server_name spanglishcommunity.com www.spanglishcommunity.com;
+    server_name www.spanglishcommunity.com;
+
+    ssl_certificate /etc/letsencrypt/live/spanglishcommunity.com/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/spanglishcommunity.com/privkey.pem;
+
+    include /etc/letsencrypt/options-ssl-nginx.conf;
+    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
+
+    return 301 https://spanglishcommunity.com$request_uri;
+}
+
+server {
+    listen 443 ssl;
+    http2 on;
+
+    server_name spanglishcommunity.com;
 
     # Upload size limit (covers same-origin /api uploads via this vhost)
     client_max_body_size 20m;
@@ -43,6 +60,25 @@ server {
     access_log /var/log/nginx/spanglish_frontend_access.log;
     error_log  /var/log/nginx/spanglish_frontend_error.log;
 
+    # LNbits payment SSE stream - must not be buffered or events won't flush in
+    # real time. Regex location takes precedence over the /api prefix below.
+    location ~ ^/api/lnbits/stream/ {
+        proxy_pass http://spanglish_backend;
+        proxy_http_version 1.1;
+
+        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;
+        proxy_set_header Connection '';
+
+        # Disable buffering/caching for Server-Sent Events
+        proxy_buffering off;
+        proxy_cache off;
+        proxy_read_timeout 3600s;
+        proxy_connect_timeout 300s;
+    }
+
     # Proxy /api to backend
     location /api {
         proxy_pass http://spanglish_backend;

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/next.config.js

@@ -1,28 +1,51 @@
 /** @type {import('next').NextConfig} */
+
+// Backend origin for API/upload proxying. Configurable per environment instead of
+// being hardcoded to localhost.
+const BACKEND_URL = process.env.BACKEND_URL || 'http://localhost:3001';
+
+// Extra image hosts can be allowed via a comma-separated env var (e.g. a CDN).
+const extraImageHosts = (process.env.NEXT_PUBLIC_IMAGE_HOSTS || '')
+  .split(',')
+  .map((h) => h.trim())
+  .filter(Boolean)
+  .map((hostname) => ({ protocol: 'https', hostname }));
+
+const securityHeaders = [
+  { key: 'X-Content-Type-Options', value: 'nosniff' },
+  { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
+  { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
+  { key: 'X-XSS-Protection', value: '0' },
+  { key: 'Permissions-Policy', value: 'camera=(self), microphone=(), geolocation=()' },
+];
+
 const nextConfig = {
   images: {
-    domains: ['localhost', 'images.unsplash.com'],
+    // Restrict remote image sources to a known allowlist instead of allowing any
+    // https host (which let the Next image optimizer be used as an open proxy).
     remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: '**',
-      },
-      {
-        protocol: 'http',
-        hostname: 'localhost',
-        port: '3001',
-      },
+      { protocol: 'https', hostname: 'images.unsplash.com' },
+      { protocol: 'http', hostname: 'localhost', port: '3001' },
+      ...extraImageHosts,
     ],
   },
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: securityHeaders,
+      },
+    ];
+  },
   async rewrites() {
     return [
       {
         source: '/api/:path*',
-        destination: 'http://localhost:3001/api/:path*',
+        destination: `${BACKEND_URL}/api/:path*`,
       },
       {
         source: '/uploads/:path*',
-        destination: 'http://localhost:3001/uploads/:path*',
+        destination: `${BACKEND_URL}/uploads/:path*`,
       },
     ];
   },

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",
-    "swr": "^2.2.5"
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@types/node": "^20.14.9",

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

@@ -0,0 +1,137 @@
+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';
+
+// Paraguayan RUC: 5-8 digit base + "-" + 1 check digit (DV), e.g. 1234567-9 or 80012345-0
+export const rucPattern = /^\d{5,8}-\d$/;
+
+/** Sanitize RUC input: digits and a single user-typed dash, max 10 chars. No dash is auto-inserted. */
+export function formatRuc(value: string): string {
+  const cleaned = value.replace(/[^\d-]/g, '');
+  const firstDash = cleaned.indexOf('-');
+  const oneDash = firstDash === -1
+    ? cleaned
+    : cleaned.slice(0, firstDash + 1) + cleaned.slice(firstDash + 1).replace(/-/g, '');
+  return oneDash.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,435 @@
+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}
+                    maxLength={10}
+                    aria-label={t('booking.form.ruc')}
+                  />
+                </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((prev) => ({ ...prev, 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>
+              {errors.paymentMethod && (
+                <p className="mt-3 text-sm text-red-600">{errors.paymentMethod}</p>
+              )}
+            </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 || !formData.paymentMethod || !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;
+  // Empty until the user explicitly picks a method (no default selection).
+  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/(public)/booking/[ticketId]/page.tsx

@@ -1,15 +1,17 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useParams, useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import { useLanguage } from '@/context/LanguageContext';
-import { ticketsApi, paymentOptionsApi, Ticket, PaymentOptionsConfig } from '@/lib/api';
+import { ticketsApi, paymentOptionsApi, Ticket, PaymentOptionsConfig, LightningInvoice } from '@/lib/api';
 import { formatPrice, formatDateLong, formatTime, getTpagoLink } from '@/lib/utils';
+import { useLightningWatcher } from '@/hooks/useLightningWatcher';
+import { PayingStep } from '@/app/(public)/book/[eventId]/_steps/PayingStep';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
-import { 
-  CheckCircleIcon, 
+import {
+  CheckCircleIcon,
   ClockIcon,
   XCircleIcon,
   TicketIcon,
@@ -22,7 +24,7 @@ import {
 } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
 
-type PaymentStep = 'loading' | 'manual_payment' | 'pending_approval' | 'confirmed' | 'error';
+type PaymentStep = 'loading' | 'manual_payment' | 'lightning_payment' | 'pending_approval' | 'confirmed' | 'error';
 
 export default function BookingPaymentPage() {
   const params = useParams();
@@ -33,10 +35,36 @@ export default function BookingPaymentPage() {
   const [step, setStep] = useState<PaymentStep>('loading');
   const [markingPaid, setMarkingPaid] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [lightningInvoice, setLightningInvoice] = useState<LightningInvoice | null>(null);
+  const [invoiceExpired, setInvoiceExpired] = useState(false);
+  const [fetchingInvoice, setFetchingInvoice] = useState(false);
 
   const ticketId = params.ticketId as string;
   const requestedStep = searchParams.get('step');
 
+  // Get (or refresh) the Lightning invoice for this ticket - reuses the
+  // stored invoice if still valid, otherwise the backend generates a new one.
+  const fetchLightningInvoice = useCallback(async () => {
+    setFetchingInvoice(true);
+    try {
+      const result = await ticketsApi.getLightningInvoice(ticketId);
+      if (result.alreadyPaid) {
+        setStep('confirmed');
+        return;
+      }
+      if (result.invoice) {
+        setLightningInvoice(result.invoice);
+        setInvoiceExpired(false);
+        setStep('lightning_payment');
+      }
+    } catch (err: any) {
+      setError(err.message || 'Failed to load Lightning invoice');
+      setStep('error');
+    } finally {
+      setFetchingInvoice(false);
+    }
+  }, [ticketId]);
+
   // Fetch ticket and payment config
   useEffect(() => {
     if (!ticketId) return;
@@ -45,7 +73,7 @@ export default function BookingPaymentPage() {
       try {
         // Get ticket with event and payment info
         const { ticket: ticketData } = await ticketsApi.getById(ticketId);
-        
+
         if (!ticketData) {
           setError('Booking not found');
           setStep('error');
@@ -54,10 +82,24 @@ export default function BookingPaymentPage() {
 
         setTicket(ticketData);
 
-        // Only proceed for manual payment methods
         const paymentMethod = ticketData.payment?.provider;
+
+        if (paymentMethod === 'lightning') {
+          if (ticketData.status === 'confirmed' || ticketData.payment?.status === 'paid') {
+            setStep('confirmed');
+          } else if (ticketData.status === 'cancelled') {
+            setError(locale === 'es'
+              ? 'Esta reserva ya no está activa. Por favor realiza una nueva reserva.'
+              : 'This booking is no longer active. Please make a new booking.');
+            setStep('error');
+          } else {
+            await fetchLightningInvoice();
+          }
+          return;
+        }
+
         if (!['bank_transfer', 'tpago'].includes(paymentMethod || '')) {
-          // Not a manual payment method, redirect to success page or show appropriate state
+          // Not a manual or Lightning payment method, show appropriate state
           if (ticketData.status === 'confirmed' || ticketData.payment?.status === 'paid') {
             setStep('confirmed');
           } else {
@@ -69,13 +111,13 @@ export default function BookingPaymentPage() {
 
         // Get payment config for the event
         if (ticketData.eventId) {
-          const { paymentOptions } = await paymentOptionsApi.getForEvent(ticketData.eventId);
+          const { paymentOptions } = await paymentOptionsApi.getForEvent(ticketData.eventId, ticketData.id);
           setPaymentConfig(paymentOptions);
         }
 
         // Determine which step to show based on payment status
         const paymentStatus = ticketData.payment?.status;
-        
+
         if (paymentStatus === 'paid' || ticketData.status === 'confirmed') {
           setStep('confirmed');
         } else if (paymentStatus === 'pending_approval') {
@@ -96,6 +138,15 @@ export default function BookingPaymentPage() {
     loadBookingData();
   }, [ticketId]);
 
+  // Watch for Lightning payment confirmation while the invoice is on screen.
+  useLightningWatcher(
+    step === 'lightning_payment' && !invoiceExpired,
+    ticketId,
+    locale,
+    () => setStep('confirmed'),
+    () => setInvoiceExpired(true)
+  );
+
   // Handle "I Have Paid" button click
   const handleMarkPaymentSent = async () => {
     if (!ticket) return;
@@ -301,6 +352,49 @@ export default function BookingPaymentPage() {
     );
   }
 
+  // Lightning payment step - show the (reused or freshly generated) invoice
+  if (step === 'lightning_payment' && ticket) {
+    if (invoiceExpired) {
+      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-orange-100 flex items-center justify-center mx-auto mb-6">
+                <ClockIcon className="w-10 h-10 text-orange-600" />
+              </div>
+              <h1 className="text-2xl font-bold text-primary-dark mb-2">
+                {locale === 'es' ? 'La factura expiró' : 'Invoice expired'}
+              </h1>
+              <p className="text-gray-600 mb-6">
+                {locale === 'es'
+                  ? 'Genera una nueva factura Lightning para continuar con el pago.'
+                  : 'Generate a new Lightning invoice to continue with payment.'}
+              </p>
+              <Button onClick={fetchLightningInvoice} isLoading={fetchingInvoice} size="lg">
+                {locale === 'es' ? 'Generar Nueva Factura' : 'Generate New Invoice'}
+              </Button>
+            </Card>
+          </div>
+        </div>
+      );
+    }
+
+    if (!lightningInvoice) {
+      return (
+        <div className="section-padding">
+          <div className="container-page max-w-xl text-center">
+            <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full mx-auto" />
+            <p className="mt-4 text-gray-600">
+              {locale === 'es' ? 'Preparando tu factura...' : 'Preparing your invoice...'}
+            </p>
+          </div>
+        </div>
+      );
+    }
+
+    return <PayingStep invoice={lightningInvoice} qrCode={ticket.qrCode} locale={locale} />;
+  }
+
   // Manual payment step - show payment details and "I have paid" button
   if (step === 'manual_payment' && ticket && paymentConfig) {
     const isBankTransfer = ticket.payment?.provider === 'bank_transfer';

frontend/src/app/(public)/community/layout.tsx

@@ -3,6 +3,9 @@ import type { Metadata } from 'next';
 export const metadata: Metadata = {
   title: 'Join Our Language Exchange Community',
   description: 'Connect with English and Spanish speakers in Asunción. Join our WhatsApp group, follow us on Instagram, and be part of the Spanglish community.',
+  alternates: {
+    canonical: '/community',
+  },
   openGraph: {
     title: 'Join Our Language Exchange Community – Spanglish',
     description: 'Connect with English and Spanish speakers in Asunción. Join our WhatsApp group, follow us on Instagram, and be part of the Spanglish community.',

frontend/src/app/(public)/components/HomepageFaqSection.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import { useLanguage } from '@/context/LanguageContext';
 import { faqApi, FaqItem } from '@/lib/api';
+import { Skeleton, FaqListSkeleton } from '@/components/ui/Skeleton';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import clsx from 'clsx';
@@ -23,7 +24,20 @@ export default function HomepageFaqSection() {
     return () => { cancelled = true; };
   }, []);
 
-  if (loading || faqs.length === 0) {
+  if (loading) {
+    return (
+      <section className="section-padding bg-secondary-gray" aria-labelledby="homepage-faq-title">
+        <div className="container-page">
+          <div className="max-w-2xl mx-auto">
+            <Skeleton className="h-9 w-72 max-w-full mx-auto mb-8" />
+            <FaqListSkeleton count={4} compact />
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  if (faqs.length === 0) {
     return null;
   }
 

frontend/src/app/(public)/components/NextEventSection.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { useLanguage } from '@/context/LanguageContext';
 import { eventsApi, Event } from '@/lib/api';
 import { formatPrice, formatDateLong, formatTime } from '@/lib/utils';
+import { FeaturedEventSkeleton } from '@/components/ui/Skeleton';
 import { CalendarIcon, MapPinIcon, ClockIcon } from '@heroicons/react/24/outline';
 
 interface NextEventSectionProps {
@@ -51,11 +52,7 @@ export default function NextEventSection({ initialEvent }: NextEventSectionProps
     : '';
 
   if (loading) {
-    return (
-      <div className="text-center py-12">
-        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full mx-auto" />
-      </div>
-    );
+    return <FeaturedEventSkeleton />;
   }
 
   if (!nextEvent) {

frontend/src/app/(public)/contact/layout.tsx

@@ -3,6 +3,9 @@ import type { Metadata } from 'next';
 export const metadata: Metadata = {
   title: 'Contact Us',
   description: 'Get in touch with Spanglish. Questions about language exchange events in Asunción? We are here to help.',
+  alternates: {
+    canonical: '/contact',
+  },
   openGraph: {
     title: 'Contact Us – Spanglish',
     description: 'Get in touch with Spanglish. Questions about language exchange events in Asunción? We are here to help.',

frontend/src/app/(public)/dashboard/components/AccountTab.tsx

@@ -0,0 +1,533 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useLanguage } from '@/context/LanguageContext';
+import { useAuth } from '@/context/AuthContext';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import {
+  dashboardApi,
+  authApi,
+  UserProfile,
+  UserSession,
+} from '@/lib/api';
+import { parseDate } from '@/lib/utils';
+import toast from 'react-hot-toast';
+
+interface AccountTabProps {
+  onUpdate?: () => void;
+}
+
+/**
+ * Merged Profile + Security tab: account info, edit-profile form, authentication
+ * methods, change/set password, active sessions and account deletion.
+ */
+export default function AccountTab({ onUpdate }: AccountTabProps) {
+  const { locale } = useLanguage();
+  const { user, updateUser, logout } = useAuth();
+
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const [sessions, setSessions] = useState<UserSession[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [changingPassword, setChangingPassword] = useState(false);
+  const [settingPassword, setSettingPassword] = useState(false);
+
+  const [formData, setFormData] = useState({
+    name: '',
+    phone: '',
+    languagePreference: '',
+    rucNumber: '',
+  });
+  const [passwordForm, setPasswordForm] = useState({
+    currentPassword: '',
+    newPassword: '',
+    confirmPassword: '',
+  });
+  const [newPasswordForm, setNewPasswordForm] = useState({
+    password: '',
+    confirmPassword: '',
+  });
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const loadData = async () => {
+    try {
+      const [profileRes, sessionsRes] = await Promise.all([
+        dashboardApi.getProfile(),
+        dashboardApi.getSessions(),
+      ]);
+      setProfile(profileRes.profile);
+      setSessions(sessionsRes.sessions);
+      setFormData({
+        name: profileRes.profile.name || '',
+        phone: profileRes.profile.phone || '',
+        languagePreference: profileRes.profile.languagePreference || '',
+        rucNumber: profileRes.profile.rucNumber || '',
+      });
+    } catch (error) {
+      toast.error(locale === 'es' ? 'Error al cargar datos' : 'Failed to load data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSaveProfile = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      await dashboardApi.updateProfile(formData);
+      toast.success(locale === 'es' ? 'Perfil actualizado' : 'Profile updated');
+      if (user) {
+        updateUser({
+          ...user,
+          name: formData.name,
+          phone: formData.phone,
+          languagePreference: formData.languagePreference,
+          rucNumber: formData.rucNumber,
+        });
+      }
+      onUpdate?.();
+    } catch (error: any) {
+      toast.error(error.message || (locale === 'es' ? 'Error al actualizar' : 'Update failed'));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleChangePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
+      toast.error(locale === 'es' ? 'Las contraseñas no coinciden' : 'Passwords do not match');
+      return;
+    }
+    if (passwordForm.newPassword.length < 10) {
+      toast.error(
+        locale === 'es'
+          ? 'La contraseña debe tener al menos 10 caracteres'
+          : 'Password must be at least 10 characters'
+      );
+      return;
+    }
+    setChangingPassword(true);
+    try {
+      await authApi.changePassword(passwordForm.currentPassword, passwordForm.newPassword);
+      toast.success(locale === 'es' ? 'Contraseña actualizada' : 'Password updated');
+      setPasswordForm({ currentPassword: '', newPassword: '', confirmPassword: '' });
+    } catch (error: any) {
+      toast.error(
+        error.message || (locale === 'es' ? 'Error al cambiar contraseña' : 'Failed to change password')
+      );
+    } finally {
+      setChangingPassword(false);
+    }
+  };
+
+  const handleSetPassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (newPasswordForm.password !== newPasswordForm.confirmPassword) {
+      toast.error(locale === 'es' ? 'Las contraseñas no coinciden' : 'Passwords do not match');
+      return;
+    }
+    if (newPasswordForm.password.length < 10) {
+      toast.error(
+        locale === 'es'
+          ? 'La contraseña debe tener al menos 10 caracteres'
+          : 'Password must be at least 10 characters'
+      );
+      return;
+    }
+    setSettingPassword(true);
+    try {
+      await dashboardApi.setPassword(newPasswordForm.password);
+      toast.success(locale === 'es' ? 'Contraseña establecida' : 'Password set');
+      setNewPasswordForm({ password: '', confirmPassword: '' });
+      loadData();
+    } catch (error: any) {
+      toast.error(
+        error.message || (locale === 'es' ? 'Error al establecer contraseña' : 'Failed to set password')
+      );
+    } finally {
+      setSettingPassword(false);
+    }
+  };
+
+  const handleUnlinkGoogle = async () => {
+    if (
+      !confirm(
+        locale === 'es'
+          ? '¿Estás seguro de que quieres desvincular tu cuenta de Google?'
+          : 'Are you sure you want to unlink your Google account?'
+      )
+    )
+      return;
+    try {
+      await dashboardApi.unlinkGoogle();
+      toast.success(locale === 'es' ? 'Google desvinculado' : 'Google unlinked');
+      loadData();
+    } catch (error: any) {
+      toast.error(error.message || (locale === 'es' ? 'Error' : 'Failed'));
+    }
+  };
+
+  const handleRevokeSession = async (sessionId: string) => {
+    try {
+      await dashboardApi.revokeSession(sessionId);
+      setSessions((prev) => prev.filter((s) => s.id !== sessionId));
+      toast.success(locale === 'es' ? 'Sesión cerrada' : 'Session revoked');
+    } catch (error) {
+      toast.error(locale === 'es' ? 'Error' : 'Failed');
+    }
+  };
+
+  const handleRevokeAllSessions = async () => {
+    if (
+      !confirm(
+        locale === 'es'
+          ? '¿Cerrar todas las sesiones? Serás desconectado.'
+          : 'Log out of all sessions? You will be logged out.'
+      )
+    )
+      return;
+    try {
+      await dashboardApi.revokeAllSessions();
+      toast.success(locale === 'es' ? 'Todas las sesiones cerradas' : 'All sessions revoked');
+      logout();
+    } catch (error) {
+      toast.error(locale === 'es' ? 'Error' : 'Failed');
+    }
+  };
+
+  const formatDateTime = (dateStr: string) =>
+    parseDate(dateStr).toLocaleString(locale === 'es' ? 'es-ES' : 'en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      timeZone: 'America/Asuncion',
+    });
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-12">
+        <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-primary-yellow" />
+      </div>
+    );
+  }
+
+  const isActive = profile?.accountStatus === 'active';
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      {/* Account info */}
+      <Card className="p-6">
+        <h3 className="mb-4 text-lg font-semibold">
+          {locale === 'es' ? 'Información de la cuenta' : 'Account information'}
+        </h3>
+        <div className="space-y-3 text-sm">
+          <div className="flex justify-between border-b py-2">
+            <span className="text-gray-600">{locale === 'es' ? 'Correo' : 'Email'}</span>
+            <span className="font-medium">{profile?.email}</span>
+          </div>
+          <div className="flex items-center justify-between border-b py-2">
+            <span className="text-gray-600">{locale === 'es' ? 'Estado' : 'Status'}</span>
+            <span
+              className={`inline-flex rounded-full px-3 py-1 text-xs font-medium ${
+                isActive ? 'bg-green-100 text-green-800' : 'bg-amber-100 text-amber-800'
+              }`}
+            >
+              {isActive
+                ? locale === 'es'
+                  ? 'Activa'
+                  : 'Active'
+                : profile?.accountStatus}
+            </span>
+          </div>
+          <div className="flex justify-between py-2">
+            <span className="text-gray-600">{locale === 'es' ? 'Miembro desde' : 'Member since'}</span>
+            <span className="font-medium">
+              {profile?.memberSince
+                ? parseDate(profile.memberSince).toLocaleDateString(
+                    locale === 'es' ? 'es-ES' : 'en-US',
+                    { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'America/Asuncion' }
+                  )
+                : '-'}
+            </span>
+          </div>
+        </div>
+      </Card>
+
+      {/* Edit profile */}
+      <Card className="p-6">
+        <h3 className="mb-4 text-lg font-semibold">
+          {locale === 'es' ? 'Editar perfil' : 'Edit profile'}
+        </h3>
+        <form onSubmit={handleSaveProfile} className="space-y-4">
+          <Input
+            id="name"
+            label={locale === 'es' ? 'Nombre' : 'Name'}
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            required
+          />
+          <Input
+            id="phone"
+            type="tel"
+            label={locale === 'es' ? 'Teléfono' : 'Phone'}
+            value={formData.phone}
+            onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
+          />
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-primary-dark">
+              {locale === 'es' ? 'Idioma preferido' : 'Preferred language'}
+            </label>
+            <select
+              value={formData.languagePreference}
+              onChange={(e) => setFormData({ ...formData, languagePreference: e.target.value })}
+              className="w-full rounded-btn border border-secondary-light-gray px-4 py-3 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+            >
+              <option value="">{locale === 'es' ? 'Seleccionar' : 'Select'}</option>
+              <option value="en">English</option>
+              <option value="es">Español</option>
+            </select>
+          </div>
+          <div>
+            <Input
+              id="rucNumber"
+              label={locale === 'es' ? 'Número de RUC (para facturas)' : 'RUC number (for invoices)'}
+              value={formData.rucNumber}
+              onChange={(e) => setFormData({ ...formData, rucNumber: e.target.value })}
+              placeholder={locale === 'es' ? 'Opcional' : 'Optional'}
+            />
+            <p className="mt-1.5 text-xs text-gray-500">
+              {locale === 'es'
+                ? 'Tu número de RUC paraguayo para facturas fiscales'
+                : 'Your Paraguayan RUC number for fiscal invoices'}
+            </p>
+          </div>
+          <div className="pt-2">
+            <Button type="submit" isLoading={saving}>
+              {locale === 'es' ? 'Guardar cambios' : 'Save changes'}
+            </Button>
+          </div>
+        </form>
+        <p className="mt-4 border-t pt-4 text-xs text-gray-500">
+          {locale === 'es'
+            ? 'Para cambiar tu correo, contacta al soporte.'
+            : 'To change your email, please contact support.'}
+        </p>
+      </Card>
+
+      {/* Authentication methods */}
+      <Card className="p-6">
+        <h3 className="mb-4 text-lg font-semibold">
+          {locale === 'es' ? 'Métodos de autenticación' : 'Authentication methods'}
+        </h3>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between rounded-card bg-secondary-gray p-3">
+            <div className="flex items-center gap-3">
+              <div
+                className={`flex h-10 w-10 items-center justify-center rounded-full ${
+                  profile?.hasPassword ? 'bg-green-100 text-green-600' : 'bg-gray-200 text-gray-500'
+                }`}
+              >
+                <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                </svg>
+              </div>
+              <div>
+                <p className="font-medium">{locale === 'es' ? 'Contraseña' : 'Password'}</p>
+                <p className="text-sm text-gray-500">
+                  {profile?.hasPassword
+                    ? locale === 'es' ? 'Configurada' : 'Set'
+                    : locale === 'es' ? 'No configurada' : 'Not set'}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between rounded-card bg-secondary-gray p-3">
+            <div className="flex items-center gap-3">
+              <div
+                className={`flex h-10 w-10 items-center justify-center rounded-full ${
+                  profile?.hasGoogleLinked ? 'bg-red-100 text-red-600' : 'bg-gray-200 text-gray-500'
+                }`}
+              >
+                <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
+                  <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+                  <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+                  <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+                </svg>
+              </div>
+              <div>
+                <p className="font-medium">Google</p>
+                <p className="text-sm text-gray-500">
+                  {profile?.hasGoogleLinked
+                    ? locale === 'es' ? 'Vinculado' : 'Linked'
+                    : locale === 'es' ? 'No vinculado' : 'Not linked'}
+                </p>
+              </div>
+            </div>
+            {profile?.hasGoogleLinked && profile?.hasPassword && (
+              <Button variant="outline" size="sm" onClick={handleUnlinkGoogle}>
+                {locale === 'es' ? 'Desvincular' : 'Unlink'}
+              </Button>
+            )}
+          </div>
+        </div>
+      </Card>
+
+      {/* Password management */}
+      <Card className="p-6">
+        <h3 className="mb-4 text-lg font-semibold">
+          {profile?.hasPassword
+            ? locale === 'es' ? 'Cambiar contraseña' : 'Change password'
+            : locale === 'es' ? 'Establecer contraseña' : 'Set password'}
+        </h3>
+        {profile?.hasPassword ? (
+          <form onSubmit={handleChangePassword} className="space-y-4">
+            <Input
+              id="currentPassword"
+              type="password"
+              label={locale === 'es' ? 'Contraseña actual' : 'Current password'}
+              value={passwordForm.currentPassword}
+              onChange={(e) => setPasswordForm({ ...passwordForm, currentPassword: e.target.value })}
+              required
+            />
+            <div>
+              <Input
+                id="newPassword"
+                type="password"
+                label={locale === 'es' ? 'Nueva contraseña' : 'New password'}
+                value={passwordForm.newPassword}
+                onChange={(e) => setPasswordForm({ ...passwordForm, newPassword: e.target.value })}
+                required
+              />
+              <p className="mt-1.5 text-xs text-gray-500">
+                {locale === 'es' ? 'Mínimo 10 caracteres' : 'Minimum 10 characters'}
+              </p>
+            </div>
+            <Input
+              id="confirmPassword"
+              type="password"
+              label={locale === 'es' ? 'Confirmar contraseña' : 'Confirm password'}
+              value={passwordForm.confirmPassword}
+              onChange={(e) => setPasswordForm({ ...passwordForm, confirmPassword: e.target.value })}
+              required
+            />
+            <Button type="submit" isLoading={changingPassword}>
+              {locale === 'es' ? 'Cambiar contraseña' : 'Change password'}
+            </Button>
+          </form>
+        ) : (
+          <form onSubmit={handleSetPassword} className="space-y-4">
+            <p className="mb-2 text-sm text-gray-600">
+              {locale === 'es'
+                ? 'Actualmente inicias sesión con Google. Establece una contraseña para más opciones de acceso.'
+                : 'You currently sign in with Google. Set a password for more access options.'}
+            </p>
+            <div>
+              <Input
+                id="password"
+                type="password"
+                label={locale === 'es' ? 'Nueva contraseña' : 'New password'}
+                value={newPasswordForm.password}
+                onChange={(e) => setNewPasswordForm({ ...newPasswordForm, password: e.target.value })}
+                required
+              />
+              <p className="mt-1.5 text-xs text-gray-500">
+                {locale === 'es' ? 'Mínimo 10 caracteres' : 'Minimum 10 characters'}
+              </p>
+            </div>
+            <Input
+              id="confirmNewPassword"
+              type="password"
+              label={locale === 'es' ? 'Confirmar contraseña' : 'Confirm password'}
+              value={newPasswordForm.confirmPassword}
+              onChange={(e) => setNewPasswordForm({ ...newPasswordForm, confirmPassword: e.target.value })}
+              required
+            />
+            <Button type="submit" isLoading={settingPassword}>
+              {locale === 'es' ? 'Establecer contraseña' : 'Set password'}
+            </Button>
+          </form>
+        )}
+      </Card>
+
+      {/* Active sessions */}
+      <Card className="p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="text-lg font-semibold">
+            {locale === 'es' ? 'Sesiones activas' : 'Active sessions'}
+          </h3>
+          {sessions.length > 1 && (
+            <Button variant="outline" size="sm" onClick={handleRevokeAllSessions}>
+              {locale === 'es' ? 'Cerrar todas' : 'Log out all'}
+            </Button>
+          )}
+        </div>
+        {sessions.length === 0 ? (
+          <p className="text-sm text-gray-600">
+            {locale === 'es' ? 'No hay sesiones activas' : 'No active sessions'}
+          </p>
+        ) : (
+          <div className="space-y-3">
+            {sessions.map((session, index) => (
+              <div
+                key={session.id}
+                className="flex items-center justify-between rounded-card bg-secondary-gray p-3"
+              >
+                <div className="min-w-0">
+                  <p className="truncate text-sm font-medium">
+                    {session.userAgent
+                      ? session.userAgent.substring(0, 50) + (session.userAgent.length > 50 ? '…' : '')
+                      : locale === 'es' ? 'Dispositivo desconocido' : 'Unknown device'}
+                  </p>
+                  <p className="text-xs text-gray-500">
+                    {locale === 'es' ? 'Última actividad:' : 'Last active:'}{' '}
+                    {formatDateTime(session.lastActiveAt)}
+                    {session.ipAddress && ` • ${session.ipAddress}`}
+                  </p>
+                </div>
+                {index === 0 ? (
+                  <span className="ml-3 whitespace-nowrap text-xs font-medium text-green-600">
+                    {locale === 'es' ? 'Esta sesión' : 'This session'}
+                  </span>
+                ) : (
+                  <Button variant="outline" size="sm" onClick={() => handleRevokeSession(session.id)}>
+                    {locale === 'es' ? 'Cerrar' : 'Revoke'}
+                  </Button>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </Card>
+
+      {/* Danger zone */}
+      <Card className="border border-red-200 bg-red-50 p-6">
+        <h3 className="mb-2 text-lg font-semibold text-red-800">
+          {locale === 'es' ? 'Zona de peligro' : 'Danger zone'}
+        </h3>
+        <p className="mb-4 text-sm text-red-700">
+          {locale === 'es'
+            ? 'Si deseas eliminar tu cuenta, contacta al soporte.'
+            : 'If you want to delete your account, please contact support.'}
+        </p>
+        <Button
+          variant="outline"
+          size="sm"
+          className="border-red-300 text-red-700 hover:bg-red-100"
+          disabled
+        >
+          {locale === 'es' ? 'Eliminar cuenta' : 'Delete account'}
+        </Button>
+      </Card>
+    </div>
+  );
+}

frontend/src/app/(public)/dashboard/components/OverviewTab.tsx

@@ -0,0 +1,423 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import Link from 'next/link';
+import {
+  CalendarIcon,
+  ClockIcon,
+  MapPinIcon,
+  ArrowTopRightOnSquareIcon,
+  TicketIcon,
+  UserPlusIcon,
+  QrCodeIcon,
+} from '@heroicons/react/24/outline';
+import toast from 'react-hot-toast';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import type { UserTicket, NextEventInfo } from '@/lib/api';
+import { useLanguage } from '@/context/LanguageContext';
+import { formatDateLong, formatTime, parseDate } from '@/lib/utils';
+import { StatusPill, deriveTicketStatus } from './_shared/status';
+import {
+  groupByBooking,
+  isUnpaid,
+  isAwaitingApproval,
+  isOnHold,
+  isActionableAttention,
+  ticketAmount,
+  shareTicket,
+  isToday,
+  type BookingGroup,
+} from './_shared/helpers';
+import PayActions from './_shared/PayActions';
+import AttentionBanner from './_shared/AttentionBanner';
+import QrTicketModal from './_shared/QrTicketModal';
+
+interface OverviewTabProps {
+  nextEvent: NextEventInfo | null;
+  tickets: UserTicket[];
+  locale: string;
+  userName: string;
+  onChange: () => void;
+}
+
+export default function OverviewTab({
+  nextEvent,
+  tickets,
+  locale,
+  userName,
+  onChange,
+}: OverviewTabProps) {
+  const [qrTickets, setQrTickets] = useState<UserTicket[] | null>(null);
+
+  const activeTickets = useMemo(
+    () => tickets.filter((t) => t.status !== 'cancelled'),
+    [tickets]
+  );
+
+  // Banner: the single booking that most needs attention (unpaid first, then
+  // awaiting approval), ordered by soonest event.
+  const attentionTicket = useMemo(() => {
+    const candidates = activeTickets.filter(
+      (t) =>
+        isActionableAttention(t) &&
+        (isUnpaid(t) || isOnHold(t) || isAwaitingApproval(t))
+    );
+    const priority = (t: UserTicket) => (isUnpaid(t) ? 0 : isOnHold(t) ? 1 : 2);
+    candidates.sort((a, b) => {
+      const aUnpaid = priority(a);
+      const bUnpaid = priority(b);
+      if (aUnpaid !== bUnpaid) return aUnpaid - bUnpaid;
+      const aStart = a.event?.startDatetime
+        ? parseDate(a.event.startDatetime).getTime()
+        : Infinity;
+      const bStart = b.event?.startDatetime
+        ? parseDate(b.event.startDatetime).getTime()
+        : Infinity;
+      return aStart - bStart;
+    });
+    return candidates[0] || null;
+  }, [activeTickets]);
+
+  // Hero: full tickets for the next event's booking.
+  const heroGroup = useMemo<BookingGroup | null>(() => {
+    if (!nextEvent) return null;
+    const primary =
+      activeTickets.find((t) => t.id === nextEvent.ticket.id) || null;
+    if (!primary) return null;
+    const groupTickets = primary.bookingId
+      ? activeTickets.filter((t) => t.bookingId === primary.bookingId)
+      : [primary];
+    return { bookingId: primary.bookingId || primary.id, tickets: groupTickets };
+  }, [nextEvent, activeTickets]);
+
+  // "Also coming up": upcoming booking groups other than the hero.
+  const upcomingGroups = useMemo<BookingGroup[]>(() => {
+    const now = Date.now();
+    const groups = groupByBooking(
+      activeTickets.filter(
+        (t) => t.event && parseDate(t.event.startDatetime).getTime() > now
+      )
+    );
+    return groups.filter((g) => g.bookingId !== heroGroup?.bookingId);
+  }, [activeTickets, heroGroup]);
+
+  const handleShare = async (ticket: UserTicket) => {
+    const title =
+      (locale === 'es' && ticket.event?.titleEs
+        ? ticket.event.titleEs
+        : ticket.event?.title) || 'Event';
+    const result = await shareTicket(ticket.id, title, locale);
+    if (result === 'copied')
+      toast.success(locale === 'es' ? 'Enlace copiado' : 'Link copied');
+    else if (result === 'failed')
+      toast.error(locale === 'es' ? 'No se pudo compartir' : 'Could not share');
+  };
+
+  // Empty state.
+  if (activeTickets.length === 0) {
+    return (
+      <Card className="p-8 text-center">
+        <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary-yellow/15">
+          <TicketIcon className="h-7 w-7 text-primary-yellow" />
+        </div>
+        <h2 className="mb-1 text-xl font-semibold">
+          {locale === 'es' ? `¡Hola, ${userName}!` : `Welcome, ${userName}!`}
+        </h2>
+        <p className="mx-auto mb-6 max-w-sm text-gray-600">
+          {locale === 'es'
+            ? 'Todavía no tienes reservas. Encuentra tu primer evento de intercambio de idiomas.'
+            : "You have no bookings yet. Find your first language exchange event."}
+        </p>
+        <Link href="/events">
+          <Button size="lg">
+            {locale === 'es' ? 'Explorar eventos' : 'Browse events'}
+          </Button>
+        </Link>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 1 — Attention banner (only when money is owed / awaiting). */}
+      {attentionTicket && (
+        <AttentionBanner
+          ticket={attentionTicket}
+          locale={locale}
+          onChange={onChange}
+        />
+      )}
+
+      {/* 2 — Next event hero. */}
+      {heroGroup && heroGroup.tickets[0].event && (
+        <HeroCard
+          group={heroGroup}
+          locale={locale}
+          onChange={onChange}
+          onShowQr={() => setQrTickets(heroGroup.tickets)}
+          onShare={handleShare}
+        />
+      )}
+
+      {/* 3 — Also coming up. */}
+      {upcomingGroups.length > 0 && (
+        <Card className="p-6">
+          <h3 className="mb-4 text-lg font-semibold">
+            {locale === 'es' ? 'También se viene' : 'Also coming up'}
+          </h3>
+          <div className="space-y-3">
+            {upcomingGroups.map((group) => {
+              const t = group.tickets[0];
+              const status = deriveTicketStatus(t.status, t.payment?.status);
+              const title =
+                (locale === 'es' && t.event?.titleEs
+                  ? t.event.titleEs
+                  : t.event?.title) || 'Event';
+              const { amount, currency } = ticketAmount(t);
+              return (
+                <div
+                  key={group.bookingId}
+                  className="flex flex-col gap-3 rounded-card bg-secondary-gray p-4 sm:flex-row sm:items-center sm:justify-between"
+                >
+                  <div className="min-w-0">
+                    <div className="flex items-center gap-2">
+                      <p className="truncate font-medium">{title}</p>
+                      {group.tickets.length > 1 && (
+                        <span className="text-xs text-gray-500">
+                          ×{group.tickets.length}
+                        </span>
+                      )}
+                    </div>
+                    <p className="mt-0.5 text-sm text-gray-600">
+                      {t.event && formatDateLong(t.event.startDatetime, locale as 'en' | 'es')}
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <StatusPill status={status} locale={locale} />
+                    {isOnHold(t) ? (
+                      <PayActions
+                        ticketId={t.id}
+                        amount={amount}
+                        currency={currency}
+                        destination={title}
+                        locale={locale}
+                        onPaid={onChange}
+                        layout="inline"
+                        size="sm"
+                        onHold
+                      />
+                    ) : isUnpaid(t) ? (
+                      <PayActions
+                        ticketId={t.id}
+                        amount={amount}
+                        currency={currency}
+                        destination={title}
+                        locale={locale}
+                        onPaid={onChange}
+                        layout="inline"
+                        size="sm"
+                      />
+                    ) : (
+                      (status === 'confirmed' || status === 'attended') && (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => setQrTickets(group.tickets)}
+                        >
+                          {locale === 'es' ? 'Ver entrada' : 'View ticket'}
+                        </Button>
+                      )
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </Card>
+      )}
+
+      {/* 6 — Browse events. */}
+      <div className="flex justify-center pt-2">
+        <Link href="/events">
+          <Button variant="outline" size="lg">
+            {locale === 'es' ? 'Explorar eventos' : 'Browse events'}
+          </Button>
+        </Link>
+      </div>
+
+      {qrTickets && (
+        <QrTicketModal
+          tickets={qrTickets}
+          locale={locale}
+          onClose={() => setQrTickets(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+function HeroCard({
+  group,
+  locale,
+  onChange,
+  onShowQr,
+  onShare,
+}: {
+  group: BookingGroup;
+  locale: string;
+  onChange: () => void;
+  onShowQr: () => void;
+  onShare: (ticket: UserTicket) => void;
+}) {
+  const { t } = useLanguage();
+  const ticket = group.tickets[0];
+  const event = ticket.event!;
+  const title =
+    (locale === 'es' && event.titleEs ? event.titleEs : event.title) || 'Event';
+  const status = deriveTicketStatus(ticket.status, ticket.payment?.status);
+  const { amount, currency } = ticketAmount(ticket);
+  const multi = group.tickets.length > 1;
+  const today = isToday(event.startDatetime);
+  const showQrReady = status === 'confirmed' || status === 'attended';
+
+  return (
+    <Card className="overflow-hidden">
+      {/* Image with status pill + today badge overlay. */}
+      <div className="relative h-44 w-full bg-secondary-gray sm:h-56">
+        {event.bannerUrl ? (
+          <img
+            src={event.bannerUrl}
+            alt={title}
+            className="h-full w-full object-cover"
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <TicketIcon className="h-12 w-12 text-gray-300" />
+          </div>
+        )}
+        <div className="absolute right-3 top-3 flex items-center gap-2">
+          {today && (
+            <span className="rounded-full bg-primary-yellow px-3 py-1 text-xs font-semibold text-primary-dark shadow-sm">
+              {locale === 'es' ? 'Hoy' : 'Today'}
+            </span>
+          )}
+          <StatusPill status={status} locale={locale} className="shadow-sm" />
+        </div>
+      </div>
+
+      <div className="p-6">
+        <p className="mb-1 text-xs font-semibold uppercase tracking-wider text-primary-yellow">
+          {locale === 'es' ? 'Tu próximo evento' : 'Your next event'}
+        </p>
+        <div className="mb-4 flex items-start justify-between gap-3">
+          <h3 className="text-2xl font-bold leading-tight">{title}</h3>
+          {multi && (
+            <span className="whitespace-nowrap rounded-full bg-secondary-gray px-3 py-1 text-sm font-medium text-gray-700">
+              {locale === 'es'
+                ? `${group.tickets.length} entradas`
+                : `${group.tickets.length} tickets`}
+            </span>
+          )}
+        </div>
+
+        <div className="mb-5 space-y-2 text-gray-600">
+          <p className="flex items-center gap-3">
+            <CalendarIcon className="h-5 w-5 text-primary-yellow" />
+            {formatDateLong(event.startDatetime, locale as 'en' | 'es')}
+          </p>
+          <p className="flex items-center gap-3">
+            <ClockIcon className="h-5 w-5 text-primary-yellow" />
+            {formatTime(event.startDatetime, locale as 'en' | 'es')}
+          </p>
+          <p className="flex items-center gap-3">
+            <MapPinIcon className="h-5 w-5 text-primary-yellow" />
+            <span className="flex-1">{event.location}</span>
+            {event.locationUrl && (
+              <a
+                href={event.locationUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 whitespace-nowrap text-sm font-medium text-secondary-blue hover:underline"
+              >
+                {locale === 'es' ? 'Cómo llegar' : 'Get directions'}
+                <ArrowTopRightOnSquareIcon className="h-4 w-4" />
+              </a>
+            )}
+          </p>
+        </div>
+
+        {/* Today + ready → show the QR prominently for check-in. */}
+        {today && showQrReady && (
+          <div className="mb-4 rounded-card bg-primary-yellow/10 p-4 text-center">
+            <p className="mb-3 text-sm font-medium text-primary-dark">
+              {locale === 'es'
+                ? 'Muestra este código en la entrada'
+                : 'Show this code at the door'}
+            </p>
+            <Button onClick={onShowQr} size="lg" className="w-full sm:w-auto">
+              <QrCodeIcon className="mr-2 h-5 w-5" />
+              {locale === 'es' ? 'Mostrar código QR' : 'Show QR code'}
+            </Button>
+          </div>
+        )}
+
+        {/* Smart primary action. */}
+        {isOnHold(ticket) ? (
+          <PayActions
+            ticketId={ticket.id}
+            amount={amount}
+            currency={currency}
+            destination={title}
+            locale={locale}
+            onPaid={onChange}
+            layout="inline"
+            size="md"
+            onHold
+          />
+        ) : isUnpaid(ticket) ? (
+          <PayActions
+            ticketId={ticket.id}
+            amount={amount}
+            currency={currency}
+            destination={title}
+            locale={locale}
+            onPaid={onChange}
+            layout="inline"
+            size="md"
+          />
+        ) : isAwaitingApproval(ticket) ? (
+          <p className="rounded-card bg-amber-50 px-4 py-3 text-sm text-amber-800">
+            {t('dashboard.payment.receivedConfirmShortly')}
+          </p>
+        ) : (
+          !today && (
+            <Button onClick={onShowQr} size="md">
+              <TicketIcon className="mr-2 h-5 w-5" />
+              {locale === 'es' ? 'Ver entrada' : 'View ticket'}
+            </Button>
+          )
+        )}
+
+        {/* Multi-ticket guest reminder. */}
+        {multi && showQrReady && (
+          <div className="mt-4 flex flex-col gap-2 rounded-card border border-secondary-light-gray p-3 sm:flex-row sm:items-center sm:justify-between">
+            <p className="text-sm text-gray-600">
+              {locale === 'es'
+                ? 'Tienes una entrada de más para un invitado.'
+                : 'You have a spare ticket for a guest.'}
+            </p>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onShare(group.tickets[1])}
+            >
+              <UserPlusIcon className="mr-2 h-4 w-4" />
+              {locale === 'es' ? 'Compartir con un invitado' : 'Share with a guest'}
+            </Button>
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}

frontend/src/app/(public)/dashboard/components/PaymentsTab.tsx

@@ -1,94 +1,35 @@
 'use client';
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import { UserPayment } from '@/lib/api';
-import { parseDate } from '@/lib/utils';
+import { formatDateLong } from '@/lib/utils';
+import { StatusPill, derivePaymentStatus } from './_shared/status';
+import { pyg, isManualProvider } from './_shared/helpers';
+import PayActions from './_shared/PayActions';
 
 interface PaymentsTabProps {
   payments: UserPayment[];
   language: string;
+  onChange: () => void;
 }
 
-export default function PaymentsTab({ payments, language }: PaymentsTabProps) {
-  const [filter, setFilter] = useState<'all' | 'paid' | 'pending'>('all');
+type Filter = 'all' | 'paid' | 'pending';
 
-  const filteredPayments = payments.filter((payment) => {
-    if (filter === 'all') return true;
-    if (filter === 'paid') return payment.status === 'paid';
-    if (filter === 'pending') return payment.status !== 'paid' && payment.status !== 'refunded';
-    return true;
-  });
+export default function PaymentsTab({ payments, language: locale, onChange }: PaymentsTabProps) {
+  const [filter, setFilter] = useState<Filter>('all');
 
-  const formatDate = (dateStr: string) => {
-    return parseDate(dateStr).toLocaleDateString(language === 'es' ? 'es-ES' : 'en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      timeZone: 'America/Asuncion',
-    });
-  };
+  const filtered = useMemo(
+    () =>
+      payments.filter((p) => {
+        if (filter === 'all') return true;
+        if (filter === 'paid') return p.status === 'paid';
+        return p.status !== 'paid' && p.status !== 'refunded';
+      }),
+    [payments, filter]
+  );
 
-  const formatCurrency = (amount: number, currency: string = 'PYG') => {
-    if (currency === 'PYG') {
-      return `${amount.toLocaleString('es-PY')} PYG`;
-    }
-    return `$${amount.toFixed(2)} ${currency}`;
-  };
-
-  const getStatusBadge = (status: string) => {
-    const styles: Record<string, string> = {
-      paid: 'bg-green-100 text-green-800',
-      pending: 'bg-yellow-100 text-yellow-800',
-      pending_approval: 'bg-orange-100 text-orange-800',
-      refunded: 'bg-purple-100 text-purple-800',
-      failed: 'bg-red-100 text-red-800',
-    };
-    const labels: Record<string, Record<string, string>> = {
-      en: {
-        paid: 'Paid',
-        pending: 'Pending',
-        pending_approval: 'Awaiting Approval',
-        refunded: 'Refunded',
-        failed: 'Failed',
-      },
-      es: {
-        paid: 'Pagado',
-        pending: 'Pendiente',
-        pending_approval: 'Esperando Aprobación',
-        refunded: 'Reembolsado',
-        failed: 'Fallido',
-      },
-    };
-    return (
-      <span className={`px-2 py-1 text-xs rounded-full ${styles[status] || 'bg-gray-100 text-gray-800'}`}>
-        {labels[language]?.[status] || status}
-      </span>
-    );
-  };
-
-  const getProviderLabel = (provider: string) => {
-    const labels: Record<string, Record<string, string>> = {
-      en: {
-        lightning: 'Lightning (Bitcoin)',
-        cash: 'Cash',
-        bank_transfer: 'Bank Transfer',
-        tpago: 'TPago',
-        bancard: 'Card',
-      },
-      es: {
-        lightning: 'Lightning (Bitcoin)',
-        cash: 'Efectivo',
-        bank_transfer: 'Transferencia Bancaria',
-        tpago: 'TPago',
-        bancard: 'Tarjeta',
-      },
-    };
-    return labels[language]?.[provider] || provider;
-  };
-
-  // Summary calculations
   const totalPaid = payments
     .filter((p) => p.status === 'paid')
     .reduce((sum, p) => sum + Number(p.amount), 0);
@@ -96,112 +37,143 @@ export default function PaymentsTab({ payments, language }: PaymentsTabProps) {
     .filter((p) => p.status !== 'paid' && p.status !== 'refunded')
     .reduce((sum, p) => sum + Number(p.amount), 0);
 
+  const providerLabel = (provider: string) => {
+    const labels: Record<string, { en: string; es: string }> = {
+      tpago: { en: 'TPago', es: 'TPago' },
+      bank_transfer: { en: 'Bank transfer', es: 'Transferencia bancaria' },
+      lightning: { en: 'Lightning (Bitcoin)', es: 'Lightning (Bitcoin)' },
+      cash: { en: 'Cash', es: 'Efectivo' },
+      bancard: { en: 'Card', es: 'Tarjeta' },
+    };
+    return labels[provider]?.[locale === 'es' ? 'es' : 'en'] || provider;
+  };
+
+  const chips: { id: Filter; label: { en: string; es: string } }[] = [
+    { id: 'all', label: { en: 'All', es: 'Todos' } },
+    { id: 'paid', label: { en: 'Paid', es: 'Pagados' } },
+    { id: 'pending', label: { en: 'Pending', es: 'Pendientes' } },
+  ];
+
   return (
     <div className="space-y-6">
-      {/* Summary Cards */}
+      {/* Totals */}
       <div className="grid grid-cols-2 gap-4">
-        <Card className="p-4">
-          <p className="text-sm text-gray-600 mb-1">
-            {language === 'es' ? 'Total Pagado' : 'Total Paid'}
-          </p>
-          <p className="text-2xl font-bold text-green-600">
-            {formatCurrency(totalPaid)}
+        <Card className="p-5">
+          <p className="mb-1 text-sm text-gray-600">
+            {locale === 'es' ? 'Total pagado' : 'Total paid'}
           </p>
+          <p className="text-2xl font-bold text-green-700">{pyg(totalPaid)}</p>
         </Card>
-        <Card className="p-4">
-          <p className="text-sm text-gray-600 mb-1">
-            {language === 'es' ? 'Pendiente' : 'Pending'}
-          </p>
-          <p className="text-2xl font-bold text-yellow-600">
-            {formatCurrency(totalPending)}
+        <Card className="p-5">
+          <p className="mb-1 text-sm text-gray-600">
+            {locale === 'es' ? 'Pendiente' : 'Pending'}
           </p>
+          <p className="text-2xl font-bold text-red-700">{pyg(totalPending)}</p>
         </Card>
       </div>
 
-      {/* Filter Buttons */}
-      <div className="flex gap-2">
-        {(['all', 'paid', 'pending'] as const).map((f) => (
+      {/* Filter chips */}
+      <div className="flex flex-wrap gap-2">
+        {chips.map((chip) => (
           <button
-            key={f}
-            onClick={() => setFilter(f)}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-              filter === f
-                ? 'bg-secondary-blue text-white'
-                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            key={chip.id}
+            onClick={() => setFilter(chip.id)}
+            className={`rounded-full px-4 py-2 text-sm font-medium transition-colors ${
+              filter === chip.id
+                ? 'bg-primary-yellow text-primary-dark'
+                : 'bg-secondary-gray text-gray-700 hover:bg-secondary-light-gray'
             }`}
           >
-            {f === 'all' && (language === 'es' ? 'Todos' : 'All')}
-            {f === 'paid' && (language === 'es' ? 'Pagados' : 'Paid')}
-            {f === 'pending' && (language === 'es' ? 'Pendientes' : 'Pending')}
+            {locale === 'es' ? chip.label.es : chip.label.en}
           </button>
         ))}
       </div>
 
-      {/* Payments List */}
-      {filteredPayments.length === 0 ? (
+      {/* Records */}
+      {filtered.length === 0 ? (
         <Card className="p-8 text-center">
           <p className="text-gray-600">
-            {language === 'es' ? 'No hay pagos que mostrar' : 'No payments to display'}
+            {locale === 'es' ? 'No hay pagos que mostrar' : 'No payments to show'}
           </p>
         </Card>
       ) : (
         <div className="space-y-3">
-          {filteredPayments.map((payment) => (
-            <Card key={payment.id} className="p-4">
-              <div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
-                <div className="flex-1">
-                  <div className="flex items-center gap-2 mb-1">
-                    <span className="font-semibold">
-                      {formatCurrency(Number(payment.amount), payment.currency)}
-                    </span>
-                    {getStatusBadge(payment.status)}
+          {filtered.map((payment) => {
+            const status = derivePaymentStatus(payment.status);
+            const eventTitle =
+              (locale === 'es' && payment.event?.titleEs
+                ? payment.event.titleEs
+                : payment.event?.title) || (locale === 'es' ? 'Evento' : 'Event');
+            const canMarkPaid =
+              payment.status === 'pending' && isManualProvider(payment.provider);
+            const canRebook = payment.status === 'on_hold';
+            return (
+              <Card key={payment.id} className="p-4">
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                  <div className="min-w-0 flex-1">
+                    <div className="mb-1 flex items-center gap-2">
+                      <span className="font-semibold">
+                        {pyg(Number(payment.amount), payment.currency)}
+                      </span>
+                      <StatusPill status={status} locale={locale} />
+                    </div>
+                    <div className="space-y-0.5 text-sm text-gray-600">
+                      <p className="font-medium text-gray-800">{eventTitle}</p>
+                      <p>
+                        {providerLabel(payment.provider)} ·{' '}
+                        {formatDateLong(payment.createdAt, locale as 'en' | 'es')}
+                      </p>
+                      {payment.reference && (
+                        <p className="text-xs text-gray-500">
+                          {locale === 'es' ? 'Ref' : 'Ref'}: {payment.reference}
+                        </p>
+                      )}
+                    </div>
                   </div>
-                  
-                  <div className="text-sm text-gray-600 space-y-1">
-                    {payment.event && (
-                      <p>
-                        {language === 'es' && payment.event.titleEs
-                          ? payment.event.titleEs
-                          : payment.event.title}
-                      </p>
+
+                  <div className="flex flex-shrink-0 flex-col items-stretch gap-2 sm:items-end">
+                    {canRebook ? (
+                      <PayActions
+                        ticketId={payment.ticketId}
+                        amount={Number(payment.amount)}
+                        currency={payment.currency}
+                        destination={eventTitle}
+                        locale={locale}
+                        onPaid={onChange}
+                        layout="inline"
+                        size="sm"
+                        onHold
+                      />
+                    ) : (
+                      canMarkPaid && (
+                        <PayActions
+                          ticketId={payment.ticketId}
+                          amount={Number(payment.amount)}
+                          currency={payment.currency}
+                          destination={eventTitle}
+                          locale={locale}
+                          onPaid={onChange}
+                          layout="inline"
+                          size="sm"
+                        />
+                      )
                     )}
-                    <p>
-                      <span className="font-medium">
-                        {language === 'es' ? 'Método:' : 'Method:'}
-                      </span>{' '}
-                      {getProviderLabel(payment.provider)}
-                    </p>
-                    <p>
-                      <span className="font-medium">
-                        {language === 'es' ? 'Fecha:' : 'Date:'}
-                      </span>{' '}
-                      {formatDate(payment.createdAt)}
-                    </p>
-                    {payment.reference && (
-                      <p>
-                        <span className="font-medium">
-                          {language === 'es' ? 'Referencia:' : 'Reference:'}
-                        </span>{' '}
-                        {payment.reference}
-                      </p>
+                    {payment.invoice && (
+                      <a
+                        href={payment.invoice.pdfUrl || '#'}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <Button variant="outline" size="sm">
+                          {locale === 'es' ? 'Factura' : 'Invoice'}
+                        </Button>
+                      </a>
                     )}
                   </div>
                 </div>
-                
-                {payment.invoice && (
-                  <a
-                    href={payment.invoice.pdfUrl || '#'}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Button variant="outline" size="sm">
-                      {language === 'es' ? 'Descargar Factura' : 'Download Invoice'}
-                    </Button>
-                  </a>
-                )}
-              </div>
-            </Card>
-          ))}
+              </Card>
+            );
+          })}
         </div>
       )}
     </div>

frontend/src/app/(public)/dashboard/components/ProfileTab.tsx

@@ -1,211 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { useLanguage } from '@/context/LanguageContext';
-import { useAuth } from '@/context/AuthContext';
-import Card from '@/components/ui/Card';
-import Button from '@/components/ui/Button';
-import Input from '@/components/ui/Input';
-import { dashboardApi, UserProfile } from '@/lib/api';
-import { parseDate } from '@/lib/utils';
-import toast from 'react-hot-toast';
-
-interface ProfileTabProps {
-  onUpdate?: () => void;
-}
-
-export default function ProfileTab({ onUpdate }: ProfileTabProps) {
-  const { locale: language } = useLanguage();
-  const { updateUser, user } = useAuth();
-  
-  const [profile, setProfile] = useState<UserProfile | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [formData, setFormData] = useState({
-    name: '',
-    phone: '',
-    languagePreference: '',
-    rucNumber: '',
-  });
-
-  useEffect(() => {
-    loadProfile();
-  }, []);
-
-  const loadProfile = async () => {
-    try {
-      const res = await dashboardApi.getProfile();
-      setProfile(res.profile);
-      setFormData({
-        name: res.profile.name || '',
-        phone: res.profile.phone || '',
-        languagePreference: res.profile.languagePreference || '',
-        rucNumber: res.profile.rucNumber || '',
-      });
-    } catch (error) {
-      toast.error(language === 'es' ? 'Error al cargar perfil' : 'Failed to load profile');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setSaving(true);
-
-    try {
-      const res = await dashboardApi.updateProfile(formData);
-      toast.success(language === 'es' ? 'Perfil actualizado' : 'Profile updated');
-      
-      // Update auth context
-      if (user) {
-        updateUser({
-          ...user,
-          name: formData.name,
-          phone: formData.phone,
-          languagePreference: formData.languagePreference,
-          rucNumber: formData.rucNumber,
-        });
-      }
-      
-      if (onUpdate) onUpdate();
-    } catch (error: any) {
-      toast.error(error.message || (language === 'es' ? 'Error al actualizar' : 'Update failed'));
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="flex justify-center py-12">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-secondary-blue"></div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="max-w-2xl space-y-6">
-      {/* Account Info Card */}
-      <Card className="p-6">
-        <h3 className="text-lg font-semibold mb-4">
-          {language === 'es' ? 'Información de la Cuenta' : 'Account Information'}
-        </h3>
-        
-        <div className="space-y-3 text-sm">
-          <div className="flex justify-between py-2 border-b">
-            <span className="text-gray-600">Email</span>
-            <span className="font-medium">{profile?.email}</span>
-          </div>
-          <div className="flex justify-between py-2 border-b">
-            <span className="text-gray-600">
-              {language === 'es' ? 'Estado de Cuenta' : 'Account Status'}
-            </span>
-            <span className={`px-2 py-1 text-xs rounded-full ${
-              profile?.accountStatus === 'active'
-                ? 'bg-green-100 text-green-800'
-                : 'bg-yellow-100 text-yellow-800'
-            }`}>
-              {profile?.accountStatus === 'active' 
-                ? (language === 'es' ? 'Activo' : 'Active')
-                : profile?.accountStatus}
-            </span>
-          </div>
-          <div className="flex justify-between py-2 border-b">
-            <span className="text-gray-600">
-              {language === 'es' ? 'Miembro Desde' : 'Member Since'}
-            </span>
-            <span className="font-medium">
-              {profile?.memberSince
-                ? parseDate(profile.memberSince).toLocaleDateString(
-                    language === 'es' ? 'es-ES' : 'en-US',
-                    { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'America/Asuncion' }
-                  )
-                : '-'}
-            </span>
-          </div>
-          <div className="flex justify-between py-2">
-            <span className="text-gray-600">
-              {language === 'es' ? 'Días de Membresía' : 'Membership Days'}
-            </span>
-            <span className="font-medium">{profile?.membershipDays || 0}</span>
-          </div>
-        </div>
-      </Card>
-
-      {/* Edit Profile Form */}
-      <Card className="p-6">
-        <h3 className="text-lg font-semibold mb-4">
-          {language === 'es' ? 'Editar Perfil' : 'Edit Profile'}
-        </h3>
-        
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <Input
-            id="name"
-            label={language === 'es' ? 'Nombre' : 'Name'}
-            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            required
-          />
-          
-          <Input
-            id="phone"
-            label={language === 'es' ? 'Teléfono' : 'Phone'}
-            type="tel"
-            value={formData.phone}
-            onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
-          />
-          
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              {language === 'es' ? 'Idioma Preferido' : 'Preferred Language'}
-            </label>
-            <select
-              value={formData.languagePreference}
-              onChange={(e) => setFormData({ ...formData, languagePreference: e.target.value })}
-              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary-blue"
-            >
-              <option value="">{language === 'es' ? 'Seleccionar' : 'Select'}</option>
-              <option value="en">English</option>
-              <option value="es">Español</option>
-            </select>
-          </div>
-          
-          <Input
-            id="rucNumber"
-            label={language === 'es' ? 'Número de RUC (para facturas)' : 'RUC Number (for invoices)'}
-            value={formData.rucNumber}
-            onChange={(e) => setFormData({ ...formData, rucNumber: e.target.value })}
-            placeholder={language === 'es' ? 'Opcional' : 'Optional'}
-          />
-          <p className="text-xs text-gray-500 -mt-2">
-            {language === 'es'
-              ? 'Tu número de RUC paraguayo para facturas fiscales'
-              : 'Your Paraguayan RUC number for fiscal invoices'}
-          </p>
-          
-          <div className="pt-4">
-            <Button type="submit" isLoading={saving}>
-              {language === 'es' ? 'Guardar Cambios' : 'Save Changes'}
-            </Button>
-          </div>
-        </form>
-      </Card>
-
-      {/* Email Change Notice */}
-      <Card className="p-6 bg-gray-50">
-        <h3 className="text-lg font-semibold mb-2">
-          {language === 'es' ? 'Cambiar Email' : 'Change Email'}
-        </h3>
-        <p className="text-sm text-gray-600 mb-4">
-          {language === 'es'
-            ? 'Para cambiar tu dirección de email, por favor contacta al soporte.'
-            : 'To change your email address, please contact support.'}
-        </p>
-        <Button variant="outline" size="sm" disabled>
-          {language === 'es' ? 'Contactar Soporte' : 'Contact Support'}
-        </Button>
-      </Card>
-    </div>
-  );
-}

frontend/src/app/(public)/dashboard/components/SecurityTab.tsx

@@ -1,382 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { useLanguage } from '@/context/LanguageContext';
-import { useAuth } from '@/context/AuthContext';
-import Card from '@/components/ui/Card';
-import Button from '@/components/ui/Button';
-import Input from '@/components/ui/Input';
-import { dashboardApi, authApi, UserProfile, UserSession } from '@/lib/api';
-import { parseDate } from '@/lib/utils';
-import toast from 'react-hot-toast';
-
-export default function SecurityTab() {
-  const { locale: language } = useLanguage();
-  const { logout } = useAuth();
-  
-  const [profile, setProfile] = useState<UserProfile | null>(null);
-  const [sessions, setSessions] = useState<UserSession[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [changingPassword, setChangingPassword] = useState(false);
-  const [settingPassword, setSettingPassword] = useState(false);
-  
-  const [passwordForm, setPasswordForm] = useState({
-    currentPassword: '',
-    newPassword: '',
-    confirmPassword: '',
-  });
-  
-  const [newPasswordForm, setNewPasswordForm] = useState({
-    password: '',
-    confirmPassword: '',
-  });
-
-  useEffect(() => {
-    loadData();
-  }, []);
-
-  const loadData = async () => {
-    try {
-      const [profileRes, sessionsRes] = await Promise.all([
-        dashboardApi.getProfile(),
-        dashboardApi.getSessions(),
-      ]);
-      setProfile(profileRes.profile);
-      setSessions(sessionsRes.sessions);
-    } catch (error) {
-      toast.error(language === 'es' ? 'Error al cargar datos' : 'Failed to load data');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleChangePassword = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
-      toast.error(language === 'es' ? 'Las contraseñas no coinciden' : 'Passwords do not match');
-      return;
-    }
-    
-    if (passwordForm.newPassword.length < 10) {
-      toast.error(language === 'es' ? 'La contraseña debe tener al menos 10 caracteres' : 'Password must be at least 10 characters');
-      return;
-    }
-    
-    setChangingPassword(true);
-    
-    try {
-      await authApi.changePassword(passwordForm.currentPassword, passwordForm.newPassword);
-      toast.success(language === 'es' ? 'Contraseña actualizada' : 'Password updated');
-      setPasswordForm({ currentPassword: '', newPassword: '', confirmPassword: '' });
-    } catch (error: any) {
-      toast.error(error.message || (language === 'es' ? 'Error al cambiar contraseña' : 'Failed to change password'));
-    } finally {
-      setChangingPassword(false);
-    }
-  };
-
-  const handleSetPassword = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (newPasswordForm.password !== newPasswordForm.confirmPassword) {
-      toast.error(language === 'es' ? 'Las contraseñas no coinciden' : 'Passwords do not match');
-      return;
-    }
-    
-    if (newPasswordForm.password.length < 10) {
-      toast.error(language === 'es' ? 'La contraseña debe tener al menos 10 caracteres' : 'Password must be at least 10 characters');
-      return;
-    }
-    
-    setSettingPassword(true);
-    
-    try {
-      await dashboardApi.setPassword(newPasswordForm.password);
-      toast.success(language === 'es' ? 'Contraseña establecida' : 'Password set');
-      setNewPasswordForm({ password: '', confirmPassword: '' });
-      loadData(); // Reload to update profile
-    } catch (error: any) {
-      toast.error(error.message || (language === 'es' ? 'Error al establecer contraseña' : 'Failed to set password'));
-    } finally {
-      setSettingPassword(false);
-    }
-  };
-
-  const handleUnlinkGoogle = async () => {
-    if (!confirm(language === 'es' 
-      ? '¿Estás seguro de que quieres desvincular tu cuenta de Google?' 
-      : 'Are you sure you want to unlink your Google account?'
-    )) {
-      return;
-    }
-    
-    try {
-      await dashboardApi.unlinkGoogle();
-      toast.success(language === 'es' ? 'Google desvinculado' : 'Google unlinked');
-      loadData();
-    } catch (error: any) {
-      toast.error(error.message || (language === 'es' ? 'Error' : 'Failed'));
-    }
-  };
-
-  const handleRevokeSession = async (sessionId: string) => {
-    try {
-      await dashboardApi.revokeSession(sessionId);
-      setSessions(sessions.filter((s) => s.id !== sessionId));
-      toast.success(language === 'es' ? 'Sesión cerrada' : 'Session revoked');
-    } catch (error) {
-      toast.error(language === 'es' ? 'Error' : 'Failed');
-    }
-  };
-
-  const handleRevokeAllSessions = async () => {
-    if (!confirm(language === 'es' 
-      ? '¿Cerrar todas las sesiones? Serás desconectado.' 
-      : 'Log out of all sessions? You will be logged out.'
-    )) {
-      return;
-    }
-    
-    try {
-      await dashboardApi.revokeAllSessions();
-      toast.success(language === 'es' ? 'Todas las sesiones cerradas' : 'All sessions revoked');
-      logout();
-    } catch (error) {
-      toast.error(language === 'es' ? 'Error' : 'Failed');
-    }
-  };
-
-  const formatDate = (dateStr: string) => {
-    return parseDate(dateStr).toLocaleString(language === 'es' ? 'es-ES' : 'en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-      timeZone: 'America/Asuncion',
-    });
-  };
-
-  if (loading) {
-    return (
-      <div className="flex justify-center py-12">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-secondary-blue"></div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="max-w-2xl space-y-6">
-      {/* Authentication Methods */}
-      <Card className="p-6">
-        <h3 className="text-lg font-semibold mb-4">
-          {language === 'es' ? 'Métodos de Autenticación' : 'Authentication Methods'}
-        </h3>
-        
-        <div className="space-y-4">
-          {/* Password Status */}
-          <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-            <div className="flex items-center gap-3">
-              <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
-                profile?.hasPassword ? 'bg-green-100 text-green-600' : 'bg-gray-200 text-gray-500'
-              }`}>
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                </svg>
-              </div>
-              <div>
-                <p className="font-medium">
-                  {language === 'es' ? 'Contraseña' : 'Password'}
-                </p>
-                <p className="text-sm text-gray-500">
-                  {profile?.hasPassword
-                    ? (language === 'es' ? 'Configurada' : 'Set')
-                    : (language === 'es' ? 'No configurada' : 'Not set')}
-                </p>
-              </div>
-            </div>
-            {profile?.hasPassword && (
-              <span className="text-green-600 text-sm font-medium">
-                {language === 'es' ? 'Activo' : 'Active'}
-              </span>
-            )}
-          </div>
-
-          {/* Google Status */}
-          <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-            <div className="flex items-center gap-3">
-              <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
-                profile?.hasGoogleLinked ? 'bg-red-100 text-red-600' : 'bg-gray-200 text-gray-500'
-              }`}>
-                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-                  <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-                  <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
-                  <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
-                </svg>
-              </div>
-              <div>
-                <p className="font-medium">Google</p>
-                <p className="text-sm text-gray-500">
-                  {profile?.hasGoogleLinked
-                    ? (language === 'es' ? 'Vinculado' : 'Linked')
-                    : (language === 'es' ? 'No vinculado' : 'Not linked')}
-                </p>
-              </div>
-            </div>
-            {profile?.hasGoogleLinked && profile?.hasPassword && (
-              <Button variant="outline" size="sm" onClick={handleUnlinkGoogle}>
-                {language === 'es' ? 'Desvincular' : 'Unlink'}
-              </Button>
-            )}
-          </div>
-        </div>
-      </Card>
-
-      {/* Password Management */}
-      <Card className="p-6">
-        <h3 className="text-lg font-semibold mb-4">
-          {profile?.hasPassword
-            ? (language === 'es' ? 'Cambiar Contraseña' : 'Change Password')
-            : (language === 'es' ? 'Establecer Contraseña' : 'Set Password')}
-        </h3>
-        
-        {profile?.hasPassword ? (
-          <form onSubmit={handleChangePassword} className="space-y-4">
-            <Input
-              id="currentPassword"
-              type="password"
-              label={language === 'es' ? 'Contraseña Actual' : 'Current Password'}
-              value={passwordForm.currentPassword}
-              onChange={(e) => setPasswordForm({ ...passwordForm, currentPassword: e.target.value })}
-              required
-            />
-            <Input
-              id="newPassword"
-              type="password"
-              label={language === 'es' ? 'Nueva Contraseña' : 'New Password'}
-              value={passwordForm.newPassword}
-              onChange={(e) => setPasswordForm({ ...passwordForm, newPassword: e.target.value })}
-              required
-            />
-            <p className="text-xs text-gray-500 -mt-2">
-              {language === 'es' ? 'Mínimo 10 caracteres' : 'Minimum 10 characters'}
-            </p>
-            <Input
-              id="confirmPassword"
-              type="password"
-              label={language === 'es' ? 'Confirmar Contraseña' : 'Confirm Password'}
-              value={passwordForm.confirmPassword}
-              onChange={(e) => setPasswordForm({ ...passwordForm, confirmPassword: e.target.value })}
-              required
-            />
-            <Button type="submit" isLoading={changingPassword}>
-              {language === 'es' ? 'Cambiar Contraseña' : 'Change Password'}
-            </Button>
-          </form>
-        ) : (
-          <form onSubmit={handleSetPassword} className="space-y-4">
-            <p className="text-sm text-gray-600 mb-4">
-              {language === 'es'
-                ? 'Actualmente inicias sesión con Google. Establece una contraseña para más opciones de acceso.'
-                : 'You currently sign in with Google. Set a password for more access options.'}
-            </p>
-            <Input
-              id="password"
-              type="password"
-              label={language === 'es' ? 'Nueva Contraseña' : 'New Password'}
-              value={newPasswordForm.password}
-              onChange={(e) => setNewPasswordForm({ ...newPasswordForm, password: e.target.value })}
-              required
-            />
-            <p className="text-xs text-gray-500 -mt-2">
-              {language === 'es' ? 'Mínimo 10 caracteres' : 'Minimum 10 characters'}
-            </p>
-            <Input
-              id="confirmNewPassword"
-              type="password"
-              label={language === 'es' ? 'Confirmar Contraseña' : 'Confirm Password'}
-              value={newPasswordForm.confirmPassword}
-              onChange={(e) => setNewPasswordForm({ ...newPasswordForm, confirmPassword: e.target.value })}
-              required
-            />
-            <Button type="submit" isLoading={settingPassword}>
-              {language === 'es' ? 'Establecer Contraseña' : 'Set Password'}
-            </Button>
-          </form>
-        )}
-      </Card>
-
-      {/* Active Sessions */}
-      <Card className="p-6">
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold">
-            {language === 'es' ? 'Sesiones Activas' : 'Active Sessions'}
-          </h3>
-          {sessions.length > 1 && (
-            <Button variant="outline" size="sm" onClick={handleRevokeAllSessions}>
-              {language === 'es' ? 'Cerrar Todas' : 'Logout All'}
-            </Button>
-          )}
-        </div>
-        
-        {sessions.length === 0 ? (
-          <p className="text-sm text-gray-600">
-            {language === 'es' ? 'No hay sesiones activas' : 'No active sessions'}
-          </p>
-        ) : (
-          <div className="space-y-3">
-            {sessions.map((session, index) => (
-              <div
-                key={session.id}
-                className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
-              >
-                <div>
-                  <p className="font-medium text-sm">
-                    {session.userAgent
-                      ? session.userAgent.substring(0, 50) + (session.userAgent.length > 50 ? '...' : '')
-                      : (language === 'es' ? 'Dispositivo desconocido' : 'Unknown device')}
-                  </p>
-                  <p className="text-xs text-gray-500">
-                    {language === 'es' ? 'Última actividad:' : 'Last active:'} {formatDate(session.lastActiveAt)}
-                    {session.ipAddress && ` • ${session.ipAddress}`}
-                  </p>
-                </div>
-                {index !== 0 && (
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handleRevokeSession(session.id)}
-                  >
-                    {language === 'es' ? 'Cerrar' : 'Revoke'}
-                  </Button>
-                )}
-                {index === 0 && (
-                  <span className="text-xs text-green-600 font-medium">
-                    {language === 'es' ? 'Esta sesión' : 'This session'}
-                  </span>
-                )}
-              </div>
-            ))}
-          </div>
-        )}
-      </Card>
-
-      {/* Danger Zone */}
-      <Card className="p-6 border-red-200 bg-red-50">
-        <h3 className="text-lg font-semibold text-red-800 mb-4">
-          {language === 'es' ? 'Zona de Peligro' : 'Danger Zone'}
-        </h3>
-        <p className="text-sm text-red-700 mb-4">
-          {language === 'es'
-            ? 'Si deseas eliminar tu cuenta, contacta al soporte.'
-            : 'If you want to delete your account, please contact support.'}
-        </p>
-        <Button variant="outline" size="sm" className="border-red-300 text-red-700 hover:bg-red-100" disabled>
-          {language === 'es' ? 'Eliminar Cuenta' : 'Delete Account'}
-        </Button>
-      </Card>
-    </div>
-  );
-}

frontend/src/app/(public)/dashboard/components/TicketsTab.tsx

@@ -1,209 +1,249 @@
 'use client';
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import Link from 'next/link';
+import {
+  CalendarIcon,
+  MapPinIcon,
+  ArrowDownTrayIcon,
+  TicketIcon,
+} from '@heroicons/react/24/outline';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import { UserTicket } from '@/lib/api';
-import { parseDate } from '@/lib/utils';
+import { formatDateLong, parseDate } from '@/lib/utils';
+import { StatusPill, deriveTicketStatus } from './_shared/status';
+import {
+  groupByBooking,
+  isUnpaid,
+  isOnHold,
+  ticketAmount,
+  ticketPdfUrl,
+  pyg,
+  HOLD_THRESHOLD_HOURS,
+  type BookingGroup,
+} from './_shared/helpers';
+import PayActions from './_shared/PayActions';
+import QrTicketModal from './_shared/QrTicketModal';
 
 interface TicketsTabProps {
   tickets: UserTicket[];
   language: string;
+  onChange: () => void;
 }
 
-export default function TicketsTab({ tickets, language }: TicketsTabProps) {
-  const [filter, setFilter] = useState<'all' | 'upcoming' | 'past'>('all');
+type Filter = 'all' | 'upcoming' | 'past';
 
-  const now = new Date();
-  const filteredTickets = tickets.filter((ticket) => {
-    if (filter === 'all') return true;
-    const eventDate = ticket.event?.startDatetime 
-      ? new Date(ticket.event.startDatetime) 
-      : null;
-    if (filter === 'upcoming') return eventDate && eventDate > now;
-    if (filter === 'past') return eventDate && eventDate <= now;
-    return true;
-  });
+export default function TicketsTab({ tickets, language: locale, onChange }: TicketsTabProps) {
+  const [filter, setFilter] = useState<Filter>('all');
+  const [qrTickets, setQrTickets] = useState<UserTicket[] | null>(null);
 
-  const formatDate = (dateStr: string) => {
-    return parseDate(dateStr).toLocaleDateString(language === 'es' ? 'es-ES' : 'en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      timeZone: 'America/Asuncion',
+  // Group multi-ticket bookings so both QRs sit together, then filter by the
+  // group's event date.
+  const groups = useMemo<BookingGroup[]>(() => {
+    const now = Date.now();
+    return groupByBooking(tickets).filter((group) => {
+      if (filter === 'all') return true;
+      const start = group.tickets[0].event?.startDatetime;
+      if (!start) return false; // undated tickets only show under "All"
+      const isUpcoming = parseDate(start).getTime() > now;
+      return filter === 'upcoming' ? isUpcoming : !isUpcoming;
     });
-  };
+  }, [tickets, filter]);
 
-  const formatCurrency = (amount: number, currency: string = 'PYG') => {
-    if (currency === 'PYG') {
-      return `${amount.toLocaleString('es-PY')} PYG`;
-    }
-    return `$${amount.toFixed(2)} ${currency}`;
-  };
-
-  const getStatusBadge = (status: string) => {
-    const styles: Record<string, string> = {
-      confirmed: 'bg-green-100 text-green-800',
-      checked_in: 'bg-blue-100 text-blue-800',
-      pending: 'bg-yellow-100 text-yellow-800',
-      cancelled: 'bg-red-100 text-red-800',
-    };
-    const labels: Record<string, Record<string, string>> = {
-      en: {
-        confirmed: 'Confirmed',
-        checked_in: 'Checked In',
-        pending: 'Pending',
-        cancelled: 'Cancelled',
-      },
-      es: {
-        confirmed: 'Confirmado',
-        checked_in: 'Registrado',
-        pending: 'Pendiente',
-        cancelled: 'Cancelado',
-      },
-    };
-    return (
-      <span className={`px-2 py-1 text-xs rounded-full ${styles[status] || 'bg-gray-100 text-gray-800'}`}>
-        {labels[language]?.[status] || status}
-      </span>
-    );
-  };
+  const chips: { id: Filter; label: { en: string; es: string } }[] = [
+    { id: 'all', label: { en: 'All', es: 'Todas' } },
+    { id: 'upcoming', label: { en: 'Upcoming', es: 'Próximas' } },
+    { id: 'past', label: { en: 'Past', es: 'Pasadas' } },
+  ];
 
   return (
     <div className="space-y-6">
-      {/* Filter Buttons */}
-      <div className="flex gap-2">
-        {(['all', 'upcoming', 'past'] as const).map((f) => (
+      {/* Filter chips */}
+      <div className="flex flex-wrap gap-2">
+        {chips.map((chip) => (
           <button
-            key={f}
-            onClick={() => setFilter(f)}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-              filter === f
-                ? 'bg-secondary-blue text-white'
-                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            key={chip.id}
+            onClick={() => setFilter(chip.id)}
+            className={`rounded-full px-4 py-2 text-sm font-medium transition-colors ${
+              filter === chip.id
+                ? 'bg-primary-yellow text-primary-dark'
+                : 'bg-secondary-gray text-gray-700 hover:bg-secondary-light-gray'
             }`}
           >
-            {f === 'all' && (language === 'es' ? 'Todas' : 'All')}
-            {f === 'upcoming' && (language === 'es' ? 'Próximas' : 'Upcoming')}
-            {f === 'past' && (language === 'es' ? 'Pasadas' : 'Past')}
+            {locale === 'es' ? chip.label.es : chip.label.en}
           </button>
         ))}
       </div>
 
-      {/* Tickets List */}
-      {filteredTickets.length === 0 ? (
+      {groups.length === 0 ? (
         <Card className="p-8 text-center">
-          <p className="text-gray-600 mb-4">
-            {language === 'es' ? 'No tienes entradas' : 'You have no tickets'}
+          <p className="mb-4 text-gray-600">
+            {locale === 'es' ? 'No tienes entradas' : 'You have no tickets'}
           </p>
           <Link href="/events">
-            <Button>
-              {language === 'es' ? 'Explorar Eventos' : 'Explore Events'}
-            </Button>
+            <Button>{locale === 'es' ? 'Explorar eventos' : 'Browse events'}</Button>
           </Link>
         </Card>
       ) : (
         <div className="space-y-4">
-          {filteredTickets.map((ticket) => (
-            <Card key={ticket.id} className="p-4">
-              <div className="flex flex-col md:flex-row md:items-center gap-4">
-                {/* Event Image */}
-                {ticket.event?.bannerUrl && (
-                  <div className="w-full md:w-32 h-24 rounded-lg overflow-hidden flex-shrink-0">
-                    <img
-                      src={ticket.event.bannerUrl}
-                      alt={ticket.event.title}
-                      className="w-full h-full object-cover"
-                    />
-                  </div>
-                )}
-                
-                {/* Ticket Info */}
-                <div className="flex-1">
-                  <div className="flex items-start justify-between gap-2">
-                    <h3 className="font-semibold">
-                      {language === 'es' && ticket.event?.titleEs
-                        ? ticket.event.titleEs
-                        : ticket.event?.title || 'Event'}
-                    </h3>
-                    {getStatusBadge(ticket.status)}
-                  </div>
-                  
-                  <div className="mt-2 space-y-1 text-sm text-gray-600">
-                    {ticket.event?.startDatetime && (
-                      <p>
-                        <span className="font-medium">
-                          {language === 'es' ? 'Fecha:' : 'Date:'}
-                        </span>{' '}
-                        {formatDate(ticket.event.startDatetime)}
-                      </p>
-                    )}
-                    {ticket.event?.location && (
-                      <p>
-                        <span className="font-medium">
-                          {language === 'es' ? 'Lugar:' : 'Location:'}
-                        </span>{' '}
-                        {ticket.event.location}
-                      </p>
-                    )}
-                    {ticket.payment && (
-                      <p>
-                        <span className="font-medium">
-                          {language === 'es' ? 'Pago:' : 'Payment:'}
-                        </span>{' '}
-                        {formatCurrency(ticket.payment.amount, ticket.payment.currency)} - 
-                        <span className={`ml-1 ${
-                          ticket.payment.status === 'paid' ? 'text-green-600' : 'text-yellow-600'
-                        }`}>
-                          {ticket.payment.status === 'paid' 
-                            ? (language === 'es' ? 'Pagado' : 'Paid')
-                            : (language === 'es' ? 'Pendiente' : 'Pending')}
-                        </span>
-                      </p>
-                    )}
-                  </div>
-                </div>
-                
-                {/* Actions */}
-                <div className="flex flex-col gap-2">
-                  <Link href={`/booking/success/${ticket.id}`}>
-                    <Button size="sm" className="w-full">
-                      {language === 'es' ? 'Ver Entrada' : 'View Ticket'}
-                    </Button>
-                  </Link>
-                  {(ticket.status === 'confirmed' || ticket.status === 'checked_in') && (
-                    <a
-                      href={ticket.bookingId 
-                        ? `/api/tickets/booking/${ticket.bookingId}/pdf`
-                        : `/api/tickets/${ticket.id}/pdf`
-                      }
-                      download
-                      className="text-center"
-                    >
-                      <Button variant="outline" size="sm" className="w-full">
-                        {language === 'es' ? 'Descargar Ticket(s)' : 'Download Ticket(s)'}
-                      </Button>
-                    </a>
-                  )}
-                  {ticket.invoice && (
-                    <a
-                      href={ticket.invoice.pdfUrl || '#'}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-center"
-                    >
-                      <Button variant="outline" size="sm" className="w-full">
-                        {language === 'es' ? 'Descargar Factura' : 'Download Invoice'}
-                      </Button>
-                    </a>
-                  )}
-                </div>
-              </div>
-            </Card>
+          {groups.map((group) => (
+            <BookingCard
+              key={group.bookingId}
+              group={group}
+              locale={locale}
+              onChange={onChange}
+              onShowQr={() => setQrTickets(group.tickets)}
+            />
           ))}
         </div>
       )}
+
+      {qrTickets && (
+        <QrTicketModal
+          tickets={qrTickets}
+          locale={locale}
+          onClose={() => setQrTickets(null)}
+        />
+      )}
     </div>
   );
 }
+
+function BookingCard({
+  group,
+  locale,
+  onChange,
+  onShowQr,
+}: {
+  group: BookingGroup;
+  locale: string;
+  onChange: () => void;
+  onShowQr: () => void;
+}) {
+  const ticket = group.tickets[0];
+  const event = ticket.event;
+  const title =
+    (locale === 'es' && event?.titleEs ? event.titleEs : event?.title) || 'Event';
+  const status = deriveTicketStatus(ticket.status, ticket.payment?.status);
+  const { amount, currency } = ticketAmount(ticket);
+  const multi = group.tickets.length > 1;
+  const ready = status === 'confirmed' || status === 'attended';
+
+  return (
+    <Card className="p-4">
+      <div className="flex flex-col gap-4 sm:flex-row">
+        {/* Image */}
+        <div className="h-32 w-full flex-shrink-0 overflow-hidden rounded-card bg-secondary-gray sm:h-24 sm:w-32">
+          {event?.bannerUrl ? (
+            <img src={event.bannerUrl} alt={title} className="h-full w-full object-cover" />
+          ) : (
+            <div className="flex h-full w-full items-center justify-center">
+              <TicketIcon className="h-8 w-8 text-gray-300" />
+            </div>
+          )}
+        </div>
+
+        {/* Info */}
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start justify-between gap-2">
+            <div className="min-w-0">
+              <h3 className="flex items-center gap-2 font-semibold">
+                <span className="truncate">{title}</span>
+                {multi && (
+                  <span className="whitespace-nowrap rounded-full bg-secondary-gray px-2 py-0.5 text-xs font-medium text-gray-700">
+                    {locale === 'es'
+                      ? `${group.tickets.length} entradas`
+                      : `${group.tickets.length} tickets`}
+                  </span>
+                )}
+              </h3>
+            </div>
+            <StatusPill status={status} locale={locale} />
+          </div>
+
+          <div className="mt-2 space-y-1 text-sm text-gray-600">
+            {event?.startDatetime && (
+              <p className="flex items-center gap-2">
+                <CalendarIcon className="h-4 w-4 text-primary-yellow" />
+                {formatDateLong(event.startDatetime, locale as 'en' | 'es')}
+              </p>
+            )}
+            {event?.location && (
+              <p className="flex items-center gap-2">
+                <MapPinIcon className="h-4 w-4 text-primary-yellow" />
+                <span className="truncate">{event.location}</span>
+              </p>
+            )}
+            <p className="text-gray-500">
+              {pyg(amount, currency)}
+            </p>
+            {isOnHold(ticket) && (
+              <p className="text-slate-600">
+                {locale === 'es'
+                  ? `Tu lugar fue liberado porque el pago no se confirmó dentro de ${HOLD_THRESHOLD_HOURS} horas.`
+                  : `Your spot has been released because payment was not confirmed within ${HOLD_THRESHOLD_HOURS} hours.`}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex flex-col gap-2 sm:w-44">
+          {isOnHold(ticket) ? (
+            <PayActions
+              ticketId={ticket.id}
+              amount={amount}
+              currency={currency}
+              destination={title}
+              locale={locale}
+              onPaid={onChange}
+              layout="stack"
+              size="sm"
+              onHold
+            />
+          ) : isUnpaid(ticket) ? (
+            <PayActions
+              ticketId={ticket.id}
+              amount={amount}
+              currency={currency}
+              destination={title}
+              locale={locale}
+              onPaid={onChange}
+              layout="stack"
+              size="sm"
+            />
+          ) : (
+            <>
+              {ready && (
+                <Button size="sm" className="w-full" onClick={onShowQr}>
+                  {locale === 'es' ? 'Ver entrada' : 'View ticket'}
+                </Button>
+              )}
+              {ready && (
+                <a href={ticketPdfUrl(ticket)} download className="w-full">
+                  <Button variant="outline" size="sm" className="w-full">
+                    <ArrowDownTrayIcon className="mr-1.5 h-4 w-4" />
+                    {locale === 'es' ? 'Descargar' : 'Download'}
+                  </Button>
+                </a>
+              )}
+              {ticket.invoice && (
+                <a
+                  href={ticket.invoice.pdfUrl || '#'}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="w-full"
+                >
+                  <Button variant="ghost" size="sm" className="w-full">
+                    {locale === 'es' ? 'Factura' : 'Invoice'}
+                  </Button>
+                </a>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}

frontend/src/app/(public)/dashboard/components/_shared/AttentionBanner.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import {
+  ExclamationTriangleIcon,
+  CheckCircleIcon,
+} from '@heroicons/react/24/outline';
+import type { UserTicket } from '@/lib/api';
+import { useLanguage } from '@/context/LanguageContext';
+import PayActions from './PayActions';
+import { HoldCountdown } from './Countdown';
+import {
+  holdExpiry,
+  ticketAmount,
+  pyg,
+  isAwaitingApproval,
+  isOnHold,
+  HOLD_THRESHOLD_HOURS,
+} from './helpers';
+
+/**
+ * The very-top Overview banner. Shown only when a booking needs attention:
+ *   • unpaid   -> red banner naming event + amount, a hold-expiry countdown,
+ *                 and the "Pay now" / "I've paid" actions.
+ *   • awaiting -> calm amber "payment received, we will confirm it
+ *                 shortly" state with no further action.
+ */
+export default function AttentionBanner({
+  ticket,
+  locale,
+  onChange,
+}: {
+  ticket: UserTicket;
+  locale: string;
+  onChange: () => void;
+}) {
+  const { t } = useLanguage();
+  const eventTitle =
+    (locale === 'es' && ticket.event?.titleEs
+      ? ticket.event.titleEs
+      : ticket.event?.title) || (locale === 'es' ? 'tu evento' : 'your event');
+  const { amount, currency } = ticketAmount(ticket);
+
+  if (isOnHold(ticket)) {
+    return (
+      <div className="rounded-card border border-slate-200 bg-slate-50 p-4">
+        <div className="flex items-start gap-3">
+          <ExclamationTriangleIcon className="mt-0.5 h-6 w-6 flex-shrink-0 text-slate-500" />
+          <div className="min-w-0 flex-1">
+            <p className="font-semibold text-slate-800">
+              {locale === 'es'
+                ? `Tu lugar para ${eventTitle} fue liberado`
+                : `Your spot for ${eventTitle} was released`}
+            </p>
+            <p className="mt-0.5 text-sm text-slate-600">
+              {locale === 'es'
+                ? `El pago no se confirmó dentro de ${HOLD_THRESHOLD_HOURS} horas.`
+                : `Payment was not confirmed within ${HOLD_THRESHOLD_HOURS} hours.`}
+            </p>
+          </div>
+        </div>
+        <div className="mt-3 sm:pl-9">
+          <PayActions
+            ticketId={ticket.id}
+            amount={amount}
+            currency={currency}
+            destination={eventTitle}
+            locale={locale}
+            onPaid={onChange}
+            layout="inline"
+            size="sm"
+            onHold
+          />
+        </div>
+      </div>
+    );
+  }
+
+  if (isAwaitingApproval(ticket)) {
+    return (
+      <div className="flex items-start gap-3 rounded-card border border-amber-200 bg-amber-50 p-4">
+        <CheckCircleIcon className="mt-0.5 h-6 w-6 flex-shrink-0 text-amber-600" />
+        <div>
+          <p className="font-semibold text-amber-900">
+            {t('dashboard.payment.received')}
+          </p>
+          <p className="text-sm text-amber-800">
+            {t('dashboard.payment.confirmForEvent', {
+              amount: pyg(amount, currency),
+              event: eventTitle,
+            })}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const expiry = holdExpiry(ticket);
+
+  return (
+    <div className="rounded-card border border-red-200 bg-red-50 p-4">
+      <div className="flex items-start gap-3">
+        <ExclamationTriangleIcon className="mt-0.5 h-6 w-6 flex-shrink-0 text-red-600" />
+        <div className="min-w-0 flex-1">
+          <p className="font-semibold text-red-900">
+            {locale === 'es'
+              ? `Debes ${pyg(amount, currency)} para ${eventTitle}`
+              : `You owe ${pyg(amount, currency)} for ${eventTitle}`}
+          </p>
+          {expiry && (
+            <p className="mt-0.5 text-sm text-red-700">
+              <HoldCountdown target={expiry} locale={locale} />
+            </p>
+          )}
+        </div>
+      </div>
+      <div className="mt-3 sm:pl-9">
+        <PayActions
+          ticketId={ticket.id}
+          amount={amount}
+          currency={currency}
+          destination={eventTitle}
+          locale={locale}
+          onPaid={onChange}
+          layout="inline"
+          size="sm"
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/app/(public)/dashboard/components/_shared/Countdown.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Live, human countdown to a target time. Renders a short message such as
+ * "Pay within 23h or your spot is released". Once the target passes it shows a
+ * calm "expired" message instead of a negative timer.
+ */
+export function HoldCountdown({
+  target,
+  locale,
+}: {
+  target: Date;
+  locale: string;
+}) {
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 60 * 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  const msLeft = target.getTime() - now;
+
+  if (msLeft <= 0) {
+    return (
+      <span>
+        {locale === 'es'
+          ? 'Paga pronto para mantener tu lugar'
+          : 'Pay soon to keep your spot'}
+      </span>
+    );
+  }
+
+  const totalMinutes = Math.floor(msLeft / (60 * 1000));
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+
+  let remaining: string;
+  if (hours >= 1) {
+    remaining = `${hours}h${minutes > 0 ? ` ${minutes}m` : ''}`;
+  } else {
+    remaining = `${minutes}m`;
+  }
+
+  return (
+    <span>
+      {locale === 'es'
+        ? `Paga en ${remaining} o tu lugar se libera`
+        : `Pay within ${remaining} or your spot is released`}
+    </span>
+  );
+}

frontend/src/app/(public)/dashboard/components/_shared/PayActions.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import toast from 'react-hot-toast';
+import { CheckCircleIcon } from '@heroicons/react/24/outline';
+import Button from '@/components/ui/Button';
+import { ticketsApi } from '@/lib/api';
+import { useLanguage } from '@/context/LanguageContext';
+import { pyg } from './helpers';
+
+interface PayActionsProps {
+  ticketId: string;
+  /** Amount owed, used in the confirm copy. */
+  amount: number;
+  currency?: string;
+  /** Where the money is going — event name or account label. */
+  destination: string;
+  locale: string;
+  /** Called after the payment is successfully marked as sent. */
+  onPaid?: () => void;
+  size?: 'sm' | 'md' | 'lg';
+  /** Stack the two buttons full-width (cards) vs inline (rows). */
+  layout?: 'stack' | 'inline';
+  className?: string;
+  /**
+   * The booking's spot was released after the hold threshold passed. Hides the
+   * "Pay now" link (money was already sent) and labels the retry "Rebook".
+   */
+  onHold?: boolean;
+}
+
+/**
+ * The two unpaid-ticket actions used across Overview, Tickets and Payments:
+ *   • "Pay now"  -> opens the existing manual-payment page (TPago / bank details)
+ *   • "I've paid" -> short confirm step, then marks the payment as sent
+ *                    (moves the ticket to "Awaiting approval").
+ */
+export default function PayActions({
+  ticketId,
+  amount,
+  currency = 'PYG',
+  destination,
+  locale,
+  onPaid,
+  size = 'sm',
+  layout = 'stack',
+  className,
+  onHold = false,
+}: PayActionsProps) {
+  const { t } = useLanguage();
+  const [confirming, setConfirming] = useState(false);
+  const [marking, setMarking] = useState(false);
+
+  const handleConfirm = async () => {
+    setMarking(true);
+    try {
+      await ticketsApi.markPaymentSent(ticketId);
+      toast.success(t('dashboard.payment.receivedConfirmSoon'));
+      setConfirming(false);
+      onPaid?.();
+    } catch (error: any) {
+      // Idempotent backend: if already marked, treat as success.
+      if (error?.message?.includes('already')) {
+        setConfirming(false);
+        onPaid?.();
+        return;
+      }
+      toast.error(
+        error?.message ||
+          (locale === 'es' ? 'No se pudo marcar el pago' : 'Could not mark payment')
+      );
+    } finally {
+      setMarking(false);
+    }
+  };
+
+  const containerClass =
+    layout === 'stack' ? 'flex flex-col gap-2' : 'flex flex-wrap gap-2';
+  const btnWidth = layout === 'stack' ? 'w-full' : '';
+
+  return (
+    <>
+      <div className={`${containerClass} ${className || ''}`}>
+        {!onHold && (
+          <Link href={`/booking/${ticketId}`} className={btnWidth}>
+            <Button size={size} className={btnWidth}>
+              {locale === 'es' ? 'Pagar ahora' : 'Pay now'}
+            </Button>
+          </Link>
+        )}
+        <Button
+          variant={onHold ? 'primary' : 'outline'}
+          size={size}
+          className={btnWidth}
+          onClick={() => setConfirming(true)}
+        >
+          {onHold
+            ? (locale === 'es' ? 'Reservar de nuevo' : 'Rebook')
+            : (locale === 'es' ? 'Ya pagué' : "I've paid")}
+        </Button>
+      </div>
+
+      {confirming && (
+        <div
+          className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"
+          role="dialog"
+          aria-modal="true"
+          onClick={() => !marking && setConfirming(false)}
+        >
+          <div
+            className="w-full max-w-sm rounded-card bg-white p-6 shadow-card-hover"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="mb-4 flex justify-center">
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-amber-100">
+                <CheckCircleIcon className="h-7 w-7 text-amber-600" />
+              </div>
+            </div>
+            <h3 className="mb-2 text-center text-lg font-semibold text-primary-dark">
+              {onHold
+                ? (locale === 'es' ? '¿Reservar de nuevo?' : 'Rebook your spot?')
+                : (locale === 'es' ? '¿Confirmar pago?' : 'Confirm payment?')}
+            </h3>
+            <p className="mb-6 text-center text-sm text-gray-600">
+              {onHold
+                ? (locale === 'es'
+                    ? `Intentaremos reservar tu lugar de nuevo para ${destination}.`
+                    : `We'll try to re-reserve your spot for ${destination}.`)
+                : (locale === 'es'
+                    ? `¿Ya enviaste los ${pyg(amount, currency)} para ${destination}?`
+                    : `Did you already send the ${pyg(amount, currency)} for ${destination}?`)}
+            </p>
+            <div className="flex flex-col gap-2">
+              <Button isLoading={marking} className="w-full" onClick={handleConfirm}>
+                {onHold
+                  ? (locale === 'es' ? 'Sí, reservar de nuevo' : 'Yes, rebook')
+                  : (locale === 'es' ? 'Sí, ya pagué' : "Yes, I've paid")}
+              </Button>
+              <Button
+                variant="ghost"
+                className="w-full"
+                disabled={marking}
+                onClick={() => setConfirming(false)}
+              >
+                {locale === 'es' ? 'Todavía no' : 'Not yet'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

frontend/src/app/(public)/dashboard/components/_shared/QrTicketModal.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { useEffect } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import toast from 'react-hot-toast';
+import {
+  XMarkIcon,
+  ArrowDownTrayIcon,
+  CalendarDaysIcon,
+  CalendarIcon,
+  MapPinIcon,
+  ClockIcon,
+  UserPlusIcon,
+} from '@heroicons/react/24/outline';
+import Button from '@/components/ui/Button';
+import type { UserTicket } from '@/lib/api';
+import { formatDateLong, formatTime } from '@/lib/utils';
+import {
+  ticketScanUrl,
+  ticketPdfUrl,
+  googleCalendarUrl,
+  shareTicket,
+} from './helpers';
+
+/**
+ * Full-screen, scannable QR view for the door. Handles single tickets and
+ * multi-ticket bookings (one QR per ticket, with "Share with a guest" on the
+ * spares so guests can be let in with their own code).
+ */
+export default function QrTicketModal({
+  tickets,
+  locale,
+  onClose,
+}: {
+  tickets: UserTicket[];
+  locale: string;
+  onClose: () => void;
+}) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
+    document.addEventListener('keydown', onKey);
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.body.style.overflow = '';
+    };
+  }, [onClose]);
+
+  if (tickets.length === 0) return null;
+
+  const first = tickets[0];
+  const event = first.event;
+  const eventTitle =
+    (locale === 'es' && event?.titleEs ? event.titleEs : event?.title) || 'Event';
+  const isMulti = tickets.length > 1;
+
+  const handleShare = async (ticketId: string) => {
+    const result = await shareTicket(ticketId, eventTitle, locale);
+    if (result === 'copied') {
+      toast.success(locale === 'es' ? 'Enlace copiado' : 'Link copied');
+    } else if (result === 'failed') {
+      toast.error(locale === 'es' ? 'No se pudo compartir' : 'Could not share');
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[70] overflow-y-auto bg-white">
+      {/* Top bar */}
+      <div className="sticky top-0 z-10 flex items-center justify-between border-b border-secondary-light-gray bg-white px-4 py-3">
+        <span className="text-sm font-semibold text-primary-dark">
+          {isMulti
+            ? locale === 'es'
+              ? `${tickets.length} entradas`
+              : `${tickets.length} tickets`
+            : locale === 'es'
+            ? 'Tu entrada'
+            : 'Your ticket'}
+        </span>
+        <button
+          onClick={onClose}
+          aria-label={locale === 'es' ? 'Cerrar' : 'Close'}
+          className="rounded-full p-2 text-gray-500 hover:bg-gray-100"
+        >
+          <XMarkIcon className="h-6 w-6" />
+        </button>
+      </div>
+
+      <div className="mx-auto max-w-md px-4 pb-12 pt-6">
+        {/* Event details */}
+        <div className="mb-6 text-center">
+          <h2 className="text-xl font-bold text-primary-dark">{eventTitle}</h2>
+          {event && (
+            <div className="mt-3 space-y-1.5 text-sm text-gray-600">
+              <p className="flex items-center justify-center gap-2">
+                <CalendarIcon className="h-4 w-4 text-primary-yellow" />
+                {formatDateLong(event.startDatetime, locale as 'en' | 'es')}
+              </p>
+              <p className="flex items-center justify-center gap-2">
+                <ClockIcon className="h-4 w-4 text-primary-yellow" />
+                {formatTime(event.startDatetime, locale as 'en' | 'es')}
+              </p>
+              <p className="flex items-center justify-center gap-2">
+                <MapPinIcon className="h-4 w-4 text-primary-yellow" />
+                {event.location}
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* One QR per ticket */}
+        <div className="space-y-5">
+          {tickets.map((ticket, idx) => {
+            const attendee = [ticket.attendeeFirstName, ticket.attendeeLastName]
+              .filter(Boolean)
+              .join(' ');
+            const isSpare = isMulti && idx > 0;
+            return (
+              <div
+                key={ticket.id}
+                className="rounded-card border border-secondary-light-gray p-5 text-center"
+              >
+                {isMulti && (
+                  <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-gray-500">
+                    {locale === 'es' ? 'Entrada' : 'Ticket'} {idx + 1}
+                    {attendee ? ` • ${attendee}` : ''}
+                    {isSpare
+                      ? ` • ${locale === 'es' ? 'Invitado' : 'Guest'}`
+                      : ''}
+                  </p>
+                )}
+                <div className="inline-block rounded-lg bg-white p-4 shadow-inner">
+                  <QRCodeSVG
+                    value={ticketScanUrl(ticket.id)}
+                    size={220}
+                    level="M"
+                    includeMargin={false}
+                  />
+                </div>
+                <p className="mt-3 font-mono text-sm font-bold tracking-wide text-primary-dark">
+                  {ticket.qrCode}
+                </p>
+
+                {isSpare && (
+                  <button
+                    onClick={() => handleShare(ticket.id)}
+                    className="mx-auto mt-3 flex items-center gap-2 rounded-btn border border-secondary-light-gray px-4 py-2 text-sm font-medium text-primary-dark hover:bg-gray-50"
+                  >
+                    <UserPlusIcon className="h-4 w-4" />
+                    {locale === 'es' ? 'Compartir con un invitado' : 'Share with a guest'}
+                  </button>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Download + calendar */}
+        <div className="mt-6 flex flex-col gap-2">
+          <a href={ticketPdfUrl(first)} download>
+            <Button className="w-full">
+              <ArrowDownTrayIcon className="mr-2 h-5 w-5" />
+              {isMulti
+                ? locale === 'es'
+                  ? 'Descargar entradas'
+                  : 'Download tickets'
+                : locale === 'es'
+                ? 'Descargar'
+                : 'Download'}
+            </Button>
+          </a>
+          {event && (
+            <a
+              href={googleCalendarUrl(event, locale)}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button variant="outline" className="w-full">
+                <CalendarDaysIcon className="mr-2 h-5 w-5" />
+                {locale === 'es' ? 'Agregar al calendario' : 'Add to calendar'}
+              </Button>
+            </a>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/(public)/dashboard/components/_shared/helpers.ts

@@ -0,0 +1,174 @@
+import type { UserTicket, Event } from '@/lib/api';
+import { formatPrice, parseDate, EVENT_TIMEZONE } from '@/lib/utils';
+
+// Hours a booking holds a seat before the spot is released. There is no
+// server-side enforcement field, so the countdown is derived from when the
+// ticket was created, capped at the event start time.
+export const PAYMENT_HOLD_HOURS = 24;
+
+// Hours a pending-approval booking (payment already marked as sent) can wait
+// for admin review before the auto-hold sweep releases the spot. Mirrors the
+// backend's HOLD_THRESHOLD_HOURS env default - keep these in sync.
+export const HOLD_THRESHOLD_HOURS = 72;
+
+/** True once a booking has been auto-released after the approval hold window. */
+export function isOnHold(ticket: Pick<UserTicket, 'status'> & { payment?: { status?: string } | null }): boolean {
+  return ticket.status === 'on_hold' || ticket.payment?.status === 'on_hold';
+}
+
+/** Currency is Guarani with no decimals, e.g. "21 PYG". */
+export function pyg(amount: number, currency: string = 'PYG'): string {
+  return formatPrice(Number(amount) || 0, currency || 'PYG');
+}
+
+export function isManualProvider(provider?: string): boolean {
+  return provider === 'bank_transfer' || provider === 'tpago';
+}
+
+/** A ticket is unpaid when its payment is still pending (not approved/paid). */
+export function isUnpaid(ticket: Pick<UserTicket, 'status'> & { payment?: { status?: string } | null }): boolean {
+  const ps = ticket.payment?.status;
+  return ticket.status !== 'cancelled' && (ps === 'pending' || ps === 'failed');
+}
+
+export function isAwaitingApproval(ticket: { payment?: { status?: string } | null }): boolean {
+  return ticket.payment?.status === 'pending_approval';
+}
+
+/**
+ * Whether an attention banner (e.g. "your spot was released", "payment pending")
+ * is still worth showing to the user. It only makes sense to nudge the user when
+ * the event still exists, is still bookable (published/unlisted), and has not
+ * already ended. This suppresses stale banners for deleted, unpublished,
+ * cancelled/completed/archived, or past events.
+ */
+export function isActionableAttention(ticket: UserTicket): boolean {
+  const event = ticket.event;
+  if (!event) return false;
+  if (event.status !== 'published' && event.status !== 'unlisted') return false;
+  const refDate = event.endDatetime || event.startDatetime;
+  if (!refDate) return false;
+  return parseDate(refDate).getTime() > Date.now();
+}
+
+/**
+ * The moment the seat hold expires. null when paid/awaiting/cancelled or when
+ * the data needed to compute it is missing.
+ */
+export function holdExpiry(ticket: UserTicket): Date | null {
+  if (!isUnpaid(ticket)) return null;
+  const createdStr = ticket.payment?.createdAt || ticket.createdAt;
+  if (!createdStr) return null;
+  const created = parseDate(createdStr);
+  let expiry = new Date(created.getTime() + PAYMENT_HOLD_HOURS * 60 * 60 * 1000);
+  // Never hold past the event itself.
+  const eventStart = ticket.event?.startDatetime ? parseDate(ticket.event.startDatetime) : null;
+  if (eventStart && eventStart < expiry) expiry = eventStart;
+  return expiry;
+}
+
+/** Amount owed for a ticket (payment amount preferred, falls back to event price). */
+export function ticketAmount(ticket: UserTicket): { amount: number; currency: string } {
+  const amount = ticket.payment?.amount ?? ticket.event?.price ?? 0;
+  const currency = ticket.payment?.currency ?? ticket.event?.currency ?? 'PYG';
+  return { amount: Number(amount) || 0, currency };
+}
+
+export interface BookingGroup {
+  bookingId: string;
+  tickets: UserTicket[];
+}
+
+/**
+ * Group tickets that belong to the same booking (multi-ticket / guest tickets).
+ * Tickets without a bookingId become single-ticket groups keyed by their id.
+ * Order of first appearance is preserved.
+ */
+export function groupByBooking(tickets: UserTicket[]): BookingGroup[] {
+  const groups = new Map<string, UserTicket[]>();
+  const order: string[] = [];
+  for (const ticket of tickets) {
+    const key = ticket.bookingId || ticket.id;
+    if (!groups.has(key)) {
+      groups.set(key, []);
+      order.push(key);
+    }
+    groups.get(key)!.push(ticket);
+  }
+  return order.map((bookingId) => ({ bookingId, tickets: groups.get(bookingId)! }));
+}
+
+/** Public URL embedded in the scannable QR (matches the PDF + scanner contract). */
+export function ticketScanUrl(ticketId: string): string {
+  const origin = typeof window !== 'undefined' ? window.location.origin : '';
+  return `${origin}/ticket/${ticketId}`;
+}
+
+/** Download URL for a ticket / whole booking PDF. */
+export function ticketPdfUrl(ticket: UserTicket): string {
+  return ticket.bookingId
+    ? `/api/tickets/booking/${ticket.bookingId}/pdf`
+    : `/api/tickets/${ticket.id}/pdf`;
+}
+
+/** Build a Google Calendar "add event" URL — no backend needed. */
+export function googleCalendarUrl(event: Event, locale: string): string {
+  const start = parseDate(event.startDatetime);
+  const end = event.endDatetime
+    ? parseDate(event.endDatetime)
+    : new Date(start.getTime() + 2 * 60 * 60 * 1000);
+  const fmt = (d: Date) => d.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
+  const title = (locale === 'es' && event.titleEs ? event.titleEs : event.title) || 'Spanglish';
+  const params = new URLSearchParams({
+    action: 'TEMPLATE',
+    text: title,
+    dates: `${fmt(start)}/${fmt(end)}`,
+    location: event.location || '',
+    ctz: EVENT_TIMEZONE,
+  });
+  return `https://www.google.com/calendar/render?${params.toString()}`;
+}
+
+/**
+ * Share a single (spare) ticket's QR with a guest. Uses the Web Share API when
+ * available, otherwise copies the ticket link to the clipboard.
+ */
+export async function shareTicket(
+  ticketId: string,
+  eventTitle: string,
+  locale: string
+): Promise<'shared' | 'copied' | 'failed'> {
+  const url = ticketScanUrl(ticketId);
+  const text =
+    locale === 'es'
+      ? `Tu entrada para ${eventTitle}`
+      : `Your ticket for ${eventTitle}`;
+  try {
+    if (typeof navigator !== 'undefined' && (navigator as any).share) {
+      await (navigator as any).share({ title: eventTitle, text, url });
+      return 'shared';
+    }
+    if (typeof navigator !== 'undefined' && navigator.clipboard) {
+      await navigator.clipboard.writeText(url);
+      return 'copied';
+    }
+    return 'failed';
+  } catch (err: any) {
+    // User cancelled the native share sheet.
+    if (err?.name === 'AbortError') return 'shared';
+    return 'failed';
+  }
+}
+
+/** True when the event's calendar date is today (Asunción time). */
+export function isToday(dateStr?: string): boolean {
+  if (!dateStr) return false;
+  const opts: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    timeZone: EVENT_TIMEZONE,
+  };
+  const fmt = (d: Date) => d.toLocaleDateString('en-CA', opts);
+  return fmt(parseDate(dateStr)) === fmt(new Date());
+}

frontend/src/app/(public)/dashboard/components/_shared/status.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import clsx from 'clsx';
+import type { UserTicket, Payment } from '@/lib/api';
+
+// One logical status per meaning, mapped to a single pale colour everywhere.
+//   confirmed  -> pale green
+//   awaiting   -> pale amber  (user said they paid, admin checking)
+//   unpaid     -> pale red
+//   attended   -> pale blue   (replaces the raw "checked_in" value)
+//   cancelled  -> pale gray
+//   onHold     -> pale slate  (spot released after the payment deadline passed)
+export type DashStatus =
+  | 'confirmed'
+  | 'awaiting'
+  | 'unpaid'
+  | 'attended'
+  | 'cancelled'
+  | 'onHold';
+
+/**
+ * Collapse a ticket status + payment status into a single user-facing status.
+ * Never surface raw values like "checked_in" or "pending_approval".
+ */
+export function deriveTicketStatus(
+  ticketStatus?: string,
+  paymentStatus?: string
+): DashStatus {
+  if (ticketStatus === 'checked_in') return 'attended';
+  if (ticketStatus === 'cancelled') return 'cancelled';
+  if (ticketStatus === 'on_hold' || paymentStatus === 'on_hold') return 'onHold';
+  if (paymentStatus === 'paid' || ticketStatus === 'confirmed') return 'confirmed';
+  if (paymentStatus === 'pending_approval') return 'awaiting';
+  return 'unpaid';
+}
+
+/** Status for a standalone payment record (Payments tab). */
+export function derivePaymentStatus(paymentStatus?: string): DashStatus {
+  if (paymentStatus === 'paid') return 'confirmed';
+  if (paymentStatus === 'pending_approval') return 'awaiting';
+  if (paymentStatus === 'on_hold') return 'onHold';
+  if (paymentStatus === 'refunded') return 'cancelled';
+  return 'unpaid';
+}
+
+export function statusLabel(status: DashStatus, locale: string): string {
+  const labels: Record<DashStatus, { en: string; es: string }> = {
+    confirmed: { en: 'Confirmed', es: 'Confirmado' },
+    awaiting: { en: 'Awaiting approval', es: 'Esperando aprobación' },
+    unpaid: { en: 'Unpaid', es: 'No pagado' },
+    attended: { en: 'Attended', es: 'Asistió' },
+    cancelled: { en: 'Cancelled', es: 'Cancelado' },
+    onHold: { en: 'On Hold', es: 'En Espera' },
+  };
+  return locale === 'es' ? labels[status].es : labels[status].en;
+}
+
+const PILL_STYLES: Record<DashStatus, string> = {
+  confirmed: 'bg-green-100 text-green-800',
+  awaiting: 'bg-amber-100 text-amber-800',
+  unpaid: 'bg-red-100 text-red-700',
+  attended: 'bg-blue-100 text-blue-800',
+  cancelled: 'bg-gray-100 text-gray-600',
+  onHold: 'bg-slate-100 text-slate-600',
+};
+
+export function StatusPill({
+  status,
+  locale,
+  className,
+}: {
+  status: DashStatus;
+  locale: string;
+  className?: string;
+}) {
+  return (
+    <span
+      className={clsx(
+        'inline-flex items-center rounded-full px-3 py-1 text-xs font-medium whitespace-nowrap',
+        PILL_STYLES[status],
+        className
+      )}
+    >
+      {statusLabel(status, locale)}
+    </span>
+  );
+}
+
+/** Convenience: derive + render a pill straight from a ticket. */
+export function TicketStatusPill({
+  ticket,
+  locale,
+  className,
+}: {
+  ticket: Pick<UserTicket, 'status'> & { payment?: Pick<Payment, 'status'> | null };
+  locale: string;
+  className?: string;
+}) {
+  const status = deriveTicketStatus(ticket.status, ticket.payment?.status);
+  return <StatusPill status={status} locale={locale} className={className} />;
+}

frontend/src/app/(public)/dashboard/page.tsx

@@ -4,34 +4,28 @@ import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { useLanguage } from '@/context/LanguageContext';
 import { useAuth } from '@/context/AuthContext';
-import Card from '@/components/ui/Card';
-import Button from '@/components/ui/Button';
-import { dashboardApi, DashboardSummary, NextEventInfo, UserTicket, UserPayment } from '@/lib/api';
-import { formatDateLong, formatTime } from '@/lib/utils';
+import {
+  dashboardApi,
+  NextEventInfo,
+  UserTicket,
+  UserPayment,
+} from '@/lib/api';
 import toast from 'react-hot-toast';
-import Link from 'next/link';
-import { 
-  socialConfig, 
-  getWhatsAppUrl, 
-  getInstagramUrl, 
-  getTelegramUrl 
-} from '@/lib/socialLinks';
+import { CardListSkeleton } from '@/components/ui/Skeleton';
 
-// Tab components
+import OverviewTab from './components/OverviewTab';
 import TicketsTab from './components/TicketsTab';
 import PaymentsTab from './components/PaymentsTab';
-import ProfileTab from './components/ProfileTab';
-import SecurityTab from './components/SecurityTab';
+import AccountTab from './components/AccountTab';
 
-type Tab = 'overview' | 'tickets' | 'payments' | 'profile' | 'security';
+type Tab = 'overview' | 'tickets' | 'payments' | 'account';
 
 export default function DashboardPage() {
   const router = useRouter();
-  const { t, locale: language } = useLanguage();
+  const { locale } = useLanguage();
   const { user, isLoading: authLoading, token } = useAuth();
-  
+
   const [activeTab, setActiveTab] = useState<Tab>('overview');
-  const [summary, setSummary] = useState<DashboardSummary | null>(null);
   const [nextEvent, setNextEvent] = useState<NextEventInfo | null>(null);
   const [tickets, setTickets] = useState<UserTicket[]>([]);
   const [payments, setPayments] = useState<UserPayment[]>([]);
@@ -42,369 +36,97 @@ export default function DashboardPage() {
       router.push('/login');
       return;
     }
-    
     if (user && token) {
       loadDashboardData();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user, authLoading, token]);
 
   const loadDashboardData = async () => {
     setLoading(true);
     try {
-      const [summaryRes, nextEventRes, ticketsRes, paymentsRes] = await Promise.all([
-        dashboardApi.getSummary(),
+      const [nextEventRes, ticketsRes, paymentsRes] = await Promise.all([
         dashboardApi.getNextEvent(),
         dashboardApi.getTickets(),
         dashboardApi.getPayments(),
       ]);
-      
-      setSummary(summaryRes.summary);
       setNextEvent(nextEventRes.nextEvent);
       setTickets(ticketsRes.tickets);
       setPayments(paymentsRes.payments);
-    } catch (error: any) {
+    } catch (error) {
       console.error('Failed to load dashboard:', error);
-      toast.error('Failed to load dashboard data');
+      toast.error(locale === 'es' ? 'Error al cargar el panel' : 'Failed to load dashboard data');
     } finally {
       setLoading(false);
     }
   };
 
-  const tabs: { id: Tab; label: string }[] = [
-    { id: 'overview', label: language === 'es' ? 'Resumen' : 'Overview' },
-    { id: 'tickets', label: language === 'es' ? 'Mis Entradas' : 'My Tickets' },
-    { id: 'payments', label: language === 'es' ? 'Pagos y Facturas' : 'Payments & Invoices' },
-    { id: 'profile', label: language === 'es' ? 'Perfil' : 'Profile' },
-    { id: 'security', label: language === 'es' ? 'Seguridad' : 'Security' },
+  const tabs: { id: Tab; label: { en: string; es: string } }[] = [
+    { id: 'overview', label: { en: 'Overview', es: 'Resumen' } },
+    { id: 'tickets', label: { en: 'Tickets', es: 'Entradas' } },
+    { id: 'payments', label: { en: 'Payments', es: 'Pagos' } },
+    { id: 'account', label: { en: 'Account', es: 'Cuenta' } },
   ];
 
   if (authLoading || !user) {
     return (
-      <div className="section-padding min-h-[70vh] flex items-center justify-center">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-secondary-blue"></div>
+      <div className="section-padding flex min-h-[70vh] items-center justify-center">
+        <div className="h-12 w-12 animate-spin rounded-full border-b-2 border-primary-yellow" />
       </div>
     );
   }
 
-  const formatDate = (dateStr: string) => formatDateLong(dateStr, language as 'en' | 'es');
-  const fmtTime = (dateStr: string) => formatTime(dateStr, language as 'en' | 'es');
-
   return (
     <div className="section-padding min-h-[70vh]">
       <div className="container-page">
-        {/* Welcome Header */}
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold mb-2">
-            {language === 'es' ? `Hola, ${user.name}!` : `Welcome, ${user.name}!`}
-          </h1>
-          {summary && (
-            <p className="text-gray-600">
-              {language === 'es' 
-                ? `Miembro desde hace ${summary.user.membershipDays} días`
-                : `Member for ${summary.user.membershipDays} days`
-              }
-            </p>
-          )}
-        </div>
+        {/* Welcome header */}
+        <h1 className="mb-6 text-3xl font-bold">
+          {locale === 'es' ? `¡Hola, ${user.name}!` : `Welcome, ${user.name}!`}
+        </h1>
 
-        {/* Tab Navigation */}
-        <div className="border-b border-gray-200 mb-6">
-          <nav className="flex gap-4 -mb-px overflow-x-auto">
+        {/* Tab navigation */}
+        <div className="mb-6 border-b border-secondary-light-gray">
+          <nav className="-mb-px flex gap-6 overflow-x-auto">
             {tabs.map((tab) => (
               <button
                 key={tab.id}
                 onClick={() => setActiveTab(tab.id)}
-                className={`whitespace-nowrap pb-3 px-1 border-b-2 font-medium text-sm transition-colors ${
+                className={`whitespace-nowrap border-b-2 px-1 pb-3 text-sm font-semibold transition-colors ${
                   activeTab === tab.id
-                    ? 'border-secondary-blue text-secondary-blue'
-                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                    ? 'border-primary-yellow text-primary-dark'
+                    : 'border-transparent text-gray-500 hover:text-gray-700'
                 }`}
               >
-                {tab.label}
+                {locale === 'es' ? tab.label.es : tab.label.en}
               </button>
             ))}
           </nav>
         </div>
 
-        {/* Tab Content */}
+        {/* Tab content */}
         {loading ? (
-          <div className="flex justify-center py-12">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-secondary-blue"></div>
-          </div>
+          <CardListSkeleton count={3} />
         ) : (
           <>
             {activeTab === 'overview' && (
               <OverviewTab
-                summary={summary}
                 nextEvent={nextEvent}
                 tickets={tickets}
-                language={language}
-                formatDate={formatDate}
-                formatTime={formatTime}
+                locale={locale}
+                userName={user.name}
+                onChange={loadDashboardData}
               />
             )}
-            
             {activeTab === 'tickets' && (
-              <TicketsTab tickets={tickets} language={language} />
+              <TicketsTab tickets={tickets} language={locale} onChange={loadDashboardData} />
             )}
-            
             {activeTab === 'payments' && (
-              <PaymentsTab payments={payments} language={language} />
-            )}
-            
-            {activeTab === 'profile' && (
-              <ProfileTab onUpdate={loadDashboardData} />
-            )}
-            
-            {activeTab === 'security' && (
-              <SecurityTab />
+              <PaymentsTab payments={payments} language={locale} onChange={loadDashboardData} />
             )}
+            {activeTab === 'account' && <AccountTab onUpdate={loadDashboardData} />}
           </>
         )}
       </div>
     </div>
   );
 }
-
-// Overview Tab Component
-function OverviewTab({
-  summary,
-  nextEvent,
-  tickets,
-  language,
-  formatDate,
-  formatTime,
-}: {
-  summary: DashboardSummary | null;
-  nextEvent: NextEventInfo | null;
-  tickets: UserTicket[];
-  language: string;
-  formatDate: (date: string) => string;
-  formatTime: (date: string) => string;
-}) {
-  return (
-    <div className="space-y-6">
-      {/* Stats Cards */}
-      {summary && (
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <Card className="p-4 text-center">
-            <div className="text-3xl font-bold text-secondary-blue">{summary.stats.totalTickets}</div>
-            <div className="text-sm text-gray-600">
-              {language === 'es' ? 'Total Entradas' : 'Total Tickets'}
-            </div>
-          </Card>
-          <Card className="p-4 text-center">
-            <div className="text-3xl font-bold text-green-600">{summary.stats.confirmedTickets}</div>
-            <div className="text-sm text-gray-600">
-              {language === 'es' ? 'Confirmadas' : 'Confirmed'}
-            </div>
-          </Card>
-          <Card className="p-4 text-center">
-            <div className="text-3xl font-bold text-purple-600">{summary.stats.upcomingEvents}</div>
-            <div className="text-sm text-gray-600">
-              {language === 'es' ? 'Próximos' : 'Upcoming'}
-            </div>
-          </Card>
-          <Card className="p-4 text-center">
-            <div className="text-3xl font-bold text-orange-500">{summary.stats.pendingPayments}</div>
-            <div className="text-sm text-gray-600">
-              {language === 'es' ? 'Pagos Pendientes' : 'Pending Payments'}
-            </div>
-          </Card>
-        </div>
-      )}
-
-      {/* Next Event Card */}
-      {nextEvent ? (
-        <Card className="p-6">
-          <h3 className="text-lg font-semibold mb-4">
-            {language === 'es' ? 'Tu Próximo Evento' : 'Your Next Event'}
-          </h3>
-          <div className="flex flex-col md:flex-row gap-6">
-            {nextEvent.event.bannerUrl && (
-              <div className="w-full md:w-48 h-32 rounded-lg overflow-hidden">
-                <img
-                  src={nextEvent.event.bannerUrl}
-                  alt={nextEvent.event.title}
-                  className="w-full h-full object-cover"
-                />
-              </div>
-            )}
-            <div className="flex-1">
-              <h4 className="text-xl font-bold mb-2">
-                {language === 'es' && nextEvent.event.titleEs 
-                  ? nextEvent.event.titleEs 
-                  : nextEvent.event.title}
-              </h4>
-              <div className="space-y-2 text-gray-600">
-                <p>
-                  <span className="font-medium">
-                    {language === 'es' ? 'Fecha:' : 'Date:'}
-                  </span>{' '}
-                  {formatDate(nextEvent.event.startDatetime)}
-                </p>
-                <p>
-                  <span className="font-medium">
-                    {language === 'es' ? 'Hora:' : 'Time:'}
-                  </span>{' '}
-                  {formatTime(nextEvent.event.startDatetime)}
-                </p>
-                <p>
-                  <span className="font-medium">
-                    {language === 'es' ? 'Lugar:' : 'Location:'}
-                  </span>{' '}
-                  {nextEvent.event.location}
-                </p>
-                <p>
-                  <span className="font-medium">
-                    {language === 'es' ? 'Estado:' : 'Status:'}
-                  </span>{' '}
-                  <span className={`inline-flex px-2 py-1 text-xs rounded-full ${
-                    nextEvent.payment?.status === 'paid'
-                      ? 'bg-green-100 text-green-800'
-                      : 'bg-yellow-100 text-yellow-800'
-                  }`}>
-                    {nextEvent.payment?.status === 'paid' 
-                      ? (language === 'es' ? 'Pagado' : 'Paid')
-                      : (language === 'es' ? 'Pendiente' : 'Pending')}
-                  </span>
-                </p>
-              </div>
-              <div className="mt-4 flex gap-2">
-                <Link href={`/booking/success/${nextEvent.ticket.id}`}>
-                  <Button size="sm">
-                    {language === 'es' ? 'Ver Entrada' : 'View Ticket'}
-                  </Button>
-                </Link>
-                {nextEvent.event.locationUrl && (
-                  <a
-                    href={nextEvent.event.locationUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Button variant="outline" size="sm">
-                      {language === 'es' ? 'Ver Mapa' : 'View Map'}
-                    </Button>
-                  </a>
-                )}
-              </div>
-            </div>
-          </div>
-        </Card>
-      ) : (
-        <Card className="p-6 text-center">
-          <p className="text-gray-600 mb-4">
-            {language === 'es' 
-              ? 'No tienes eventos próximos' 
-              : 'You have no upcoming events'}
-          </p>
-          <Link href="/events">
-            <Button>
-              {language === 'es' ? 'Explorar Eventos' : 'Explore Events'}
-            </Button>
-          </Link>
-        </Card>
-      )}
-
-      {/* Recent Tickets */}
-      {tickets.length > 0 && (
-        <Card className="p-6">
-          <h3 className="text-lg font-semibold mb-4">
-            {language === 'es' ? 'Entradas Recientes' : 'Recent Tickets'}
-          </h3>
-          <div className="space-y-3">
-            {tickets.slice(0, 3).map((ticket) => (
-              <div
-                key={ticket.id}
-                className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
-              >
-                <div>
-                  <p className="font-medium">
-                    {language === 'es' && ticket.event?.titleEs
-                      ? ticket.event.titleEs
-                      : ticket.event?.title || 'Event'}
-                  </p>
-                  <p className="text-sm text-gray-600">
-                    {ticket.event?.startDatetime
-                      ? formatDate(ticket.event.startDatetime)
-                      : ''}
-                  </p>
-                </div>
-                <span className={`px-2 py-1 text-xs rounded-full ${
-                  ticket.status === 'confirmed' || ticket.status === 'checked_in'
-                    ? 'bg-green-100 text-green-800'
-                    : ticket.status === 'cancelled'
-                    ? 'bg-red-100 text-red-800'
-                    : 'bg-yellow-100 text-yellow-800'
-                }`}>
-                  {ticket.status}
-                </span>
-              </div>
-            ))}
-          </div>
-          {tickets.length > 3 && (
-            <div className="mt-4 text-center">
-              <Button variant="outline" size="sm" onClick={() => {}}>
-                {language === 'es' ? 'Ver Todas' : 'View All'}
-              </Button>
-            </div>
-          )}
-        </Card>
-      )}
-
-      {/* Community Links */}
-      <Card className="p-6">
-        <h3 className="text-lg font-semibold mb-4">
-          {language === 'es' ? 'Comunidad' : 'Community'}
-        </h3>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          {getWhatsAppUrl(socialConfig.whatsapp) && (
-            <a
-              href={getWhatsAppUrl(socialConfig.whatsapp)!}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-3 p-3 bg-green-50 rounded-lg hover:bg-green-100 transition-colors"
-            >
-              <div className="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center">
-                <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
-                </svg>
-              </div>
-              <span className="font-medium">WhatsApp</span>
-            </a>
-          )}
-          {getInstagramUrl(socialConfig.instagram) && (
-            <a
-              href={getInstagramUrl(socialConfig.instagram)!}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-3 p-3 bg-pink-50 rounded-lg hover:bg-pink-100 transition-colors"
-            >
-              <div className="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center">
-                <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
-                </svg>
-              </div>
-              <span className="font-medium">Instagram</span>
-            </a>
-          )}
-          {getTelegramUrl(socialConfig.telegram) && (
-            <a
-              href={getTelegramUrl(socialConfig.telegram)!}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-3 p-3 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors"
-            >
-              <div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
-                <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
-                </svg>
-              </div>
-              <span className="font-medium">Telegram</span>
-            </a>
-          )}
-        </div>
-      </Card>
-    </div>
-  );
-}

frontend/src/app/(public)/events/EventsClient.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { useLanguage } from '@/context/LanguageContext';
+import { Event } from '@/lib/api';
+import { formatPrice, formatDateShort, formatTime } from '@/lib/utils';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { CalendarIcon, MapPinIcon, UserGroupIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+
+// Receives the event list already fetched on the server so event titles, dates,
+// and locations are present in the initial HTML. The upcoming/past filter below
+// is client-side interactivity layered on top of the server-rendered data.
+export default function EventsClient({ initialEvents }: { initialEvents: Event[] }) {
+  const { t, locale } = useLanguage();
+  const [filter, setFilter] = useState<'upcoming' | 'past'>('upcoming');
+
+  const now = new Date();
+  const upcomingEvents = initialEvents.filter(e =>
+    e.status === 'published' && new Date(e.startDatetime) >= now
+  );
+  const pastEvents = initialEvents.filter(e =>
+    e.status === 'completed' || (e.status === 'published' && new Date(e.startDatetime) < now)
+  );
+
+  const displayedEvents = filter === 'upcoming' ? upcomingEvents : pastEvents;
+
+  const formatDate = (dateStr: string) => formatDateShort(dateStr, locale as 'en' | 'es');
+  const fmtTime = (dateStr: string) => formatTime(dateStr, locale as 'en' | 'es');
+
+  const getStatusBadge = (event: Event) => {
+    if (event.status === 'cancelled') {
+      return <span className="badge badge-danger">{t('events.details.cancelled')}</span>;
+    }
+    if (event.availableSeats === 0) {
+      return <span className="badge badge-warning">{t('events.details.soldOut')}</span>;
+    }
+    return null;
+  };
+
+  return (
+    <div className="section-padding">
+      <div className="container-page">
+        <h1 className="section-title">{t('events.title')}</h1>
+
+        {/* Filter tabs */}
+        <div className="mt-8 flex gap-2">
+          <button
+            onClick={() => setFilter('upcoming')}
+            className={clsx(
+              'px-4 py-2 rounded-btn font-medium transition-colors',
+              filter === 'upcoming'
+                ? 'bg-primary-yellow text-primary-dark'
+                : 'bg-secondary-gray text-gray-600 hover:bg-gray-200'
+            )}
+          >
+            {t('events.upcoming')} ({upcomingEvents.length})
+          </button>
+          <button
+            onClick={() => setFilter('past')}
+            className={clsx(
+              'px-4 py-2 rounded-btn font-medium transition-colors',
+              filter === 'past'
+                ? 'bg-primary-yellow text-primary-dark'
+                : 'bg-secondary-gray text-gray-600 hover:bg-gray-200'
+            )}
+          >
+            {t('events.past')} ({pastEvents.length})
+          </button>
+        </div>
+
+        {/* Events grid */}
+        <div className="mt-8">
+          {displayedEvents.length === 0 ? (
+            <div className="text-center py-16 text-gray-500">
+              <CalendarIcon className="w-16 h-16 mx-auto mb-4 text-gray-300" />
+              <p className="text-lg">{t('events.noEvents')}</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {displayedEvents.map((event) => (
+                <Link key={event.id} href={`/events/${event.slug}`} className="block">
+                  <Card variant="elevated" className="card-hover overflow-hidden cursor-pointer h-full">
+                    {/* Event banner */}
+                    {event.bannerUrl ? (
+                      <img
+                        src={event.bannerUrl}
+                        alt={`${event.title} - Spanglish language exchange event in Asunción`}
+                        className="h-40 w-full object-cover"
+                        loading="lazy"
+                      />
+                    ) : (
+                      <div className="h-40 bg-gradient-to-br from-primary-yellow/30 to-secondary-blue/20 flex items-center justify-center">
+                        <CalendarIcon className="w-16 h-16 text-primary-dark/30" />
+                      </div>
+                    )}
+
+                    <div className="p-6">
+                      <div className="flex items-start justify-between gap-2">
+                        <h3 className="font-semibold text-lg text-primary-dark">
+                          {locale === 'es' && event.titleEs ? event.titleEs : event.title}
+                        </h3>
+                        {getStatusBadge(event)}
+                      </div>
+
+                      <div className="mt-4 space-y-2 text-sm text-gray-600">
+                        <div className="flex items-center gap-2">
+                          <CalendarIcon className="w-4 h-4" />
+                          <span>{formatDate(event.startDatetime)} - {fmtTime(event.startDatetime)}</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <MapPinIcon className="w-4 h-4" />
+                          <span className="truncate">{event.location}</span>
+                        </div>
+                        {!event.externalBookingEnabled && (
+                          <div className="flex items-center gap-2">
+                            <UserGroupIcon className="w-4 h-4" />
+                            <span>
+                              {Math.max(0, event.capacity - (event.bookedCount ?? 0))} / {event.capacity} {t('events.details.spotsLeft')}
+                            </span>
+                          </div>
+                        )}
+                      </div>
+
+                      <div className="mt-6 flex items-center justify-between">
+                        <span className="font-bold text-xl text-primary-dark">
+                          {event.price === 0
+                            ? t('events.details.free')
+                            : formatPrice(event.price, event.currency)}
+                        </span>
+                        <Button size="sm">
+                          {t('common.moreInfo')}
+                        </Button>
+                      </div>
+                    </div>
+                  </Card>
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/(public)/events/[id]/loading.tsx

@@ -0,0 +1,28 @@
+import { Skeleton, ArticleSkeleton } from '@/components/ui/Skeleton';
+
+// Route-level skeleton for the event detail page: back link, banner, article
+// body on the left and the booking card in the sidebar.
+export default function EventDetailLoading() {
+  return (
+    <div className="section-padding">
+      <div className="container-page">
+        <Skeleton className="h-5 w-36" />
+        <div className="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <div className="lg:col-span-2">
+            <ArticleSkeleton withBanner />
+          </div>
+          <div>
+            <div className="bg-white rounded-card shadow-card p-6" aria-hidden="true">
+              <div className="text-center">
+                <Skeleton className="h-4 w-16 mx-auto" />
+                <Skeleton className="mt-3 h-10 w-32 mx-auto" />
+              </div>
+              <Skeleton className="mt-6 h-12 w-full rounded-btn" />
+              <Skeleton className="mt-3 h-4 w-3/4 mx-auto" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/(public)/events/[id]/page.tsx

@@ -123,7 +123,9 @@ function generateEventJsonLd(event: Event) {
       url: `${siteUrl}/events/${event.slug}`,
       validFrom: new Date().toISOString(),
     },
-    image: event.bannerUrl || `${siteUrl}/images/og-image.jpg`,
+    image: event.bannerUrl
+      ? (event.bannerUrl.startsWith('http') ? event.bannerUrl : `${siteUrl}${event.bannerUrl}`)
+      : `${siteUrl}/images/og-image.jpg`,
     url: `${siteUrl}/events/${event.slug}`,
   };
 }

frontend/src/app/(public)/events/layout.tsx

@@ -1,8 +1,13 @@
 import type { Metadata } from 'next';
 
+// Note: the page title for the listing lives on events/page.tsx, not here. A
+// plain-string title in this layout would reset the root title template for the
+// child /events/[id] route, stripping the brand suffix from event detail titles.
 export const metadata: Metadata = {
-  title: 'Upcoming Language Exchange Events in Asunción',
   description: 'Discover upcoming English and Spanish language exchange events in Asunción. Social, friendly, and open to everyone.',
+  alternates: {
+    canonical: '/events',
+  },
   openGraph: {
     title: 'Upcoming Language Exchange Events in Asunción – Spanglish',
     description: 'Discover upcoming English and Spanish language exchange events in Asunción. Social, friendly, and open to everyone.',

frontend/src/app/(public)/events/loading.tsx

@@ -0,0 +1,20 @@
+import { Skeleton, EventGridSkeleton } from '@/components/ui/Skeleton';
+
+// Route-level skeleton shown during navigation while the server fetches the
+// event list. Mirrors the EventsClient shell: title, filter tabs, card grid.
+export default function EventsLoading() {
+  return (
+    <div className="section-padding">
+      <div className="container-page">
+        <Skeleton className="h-10 w-64" />
+        <div className="mt-8 flex gap-2">
+          <Skeleton className="h-10 w-32 rounded-btn" />
+          <Skeleton className="h-10 w-28 rounded-btn" />
+        </div>
+        <div className="mt-8">
+          <EventGridSkeleton count={6} />
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/(public)/events/page.tsx

@@ -1,157 +1,29 @@
-'use client';
+import type { Metadata } from 'next';
+import { Event } from '@/lib/api';
+import EventsClient from './EventsClient';
 
-import { useState, useEffect } from 'react';
-import Link from 'next/link';
-import { useLanguage } from '@/context/LanguageContext';
-import { eventsApi, Event } from '@/lib/api';
-import { formatPrice, formatDateShort, formatTime } from '@/lib/utils';
-import Card from '@/components/ui/Card';
-import Button from '@/components/ui/Button';
-import { CalendarIcon, MapPinIcon, UserGroupIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
 
-export default function EventsPage() {
-  const { t, locale } = useLanguage();
-  const [events, setEvents] = useState<Event[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [filter, setFilter] = useState<'upcoming' | 'past'>('upcoming');
+// Listing title lives here (not in the layout) so the root title template still
+// applies to the sibling /events/[id] detail route. Picks up "%s – Spanglish".
+export const metadata: Metadata = {
+  title: 'Upcoming Language Exchange Events in Asunción',
+};
 
-  useEffect(() => {
-    eventsApi.getAll()
-      .then(({ events }) => setEvents(events))
-      .catch(console.error)
-      .finally(() => setLoading(false));
-  }, []);
+// Fetch the public (published) event list on the server so event titles, dates,
+// and locations appear in the initial HTML rather than only after JS runs.
+async function getEvents(): Promise<Event[]> {
+  try {
+    const res = await fetch(`${apiUrl}/api/events`, { next: { revalidate: 60 } });
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.events || [];
+  } catch {
+    return [];
+  }
+}
 
-  const now = new Date();
-  const upcomingEvents = events.filter(e => 
-    e.status === 'published' && new Date(e.startDatetime) >= now
-  );
-  const pastEvents = events.filter(e => 
-    e.status === 'completed' || (e.status === 'published' && new Date(e.startDatetime) < now)
-  );
-
-  const displayedEvents = filter === 'upcoming' ? upcomingEvents : pastEvents;
-
-  const formatDate = (dateStr: string) => formatDateShort(dateStr, locale as 'en' | 'es');
-  const fmtTime = (dateStr: string) => formatTime(dateStr, locale as 'en' | 'es');
-
-  const getStatusBadge = (event: Event) => {
-    if (event.status === 'cancelled') {
-      return <span className="badge badge-danger">{t('events.details.cancelled')}</span>;
-    }
-    if (event.availableSeats === 0) {
-      return <span className="badge badge-warning">{t('events.details.soldOut')}</span>;
-    }
-    return null;
-  };
-
-  return (
-    <div className="section-padding">
-      <div className="container-page">
-        <h1 className="section-title">{t('events.title')}</h1>
-        
-        {/* Filter tabs */}
-        <div className="mt-8 flex gap-2">
-          <button
-            onClick={() => setFilter('upcoming')}
-            className={clsx(
-              'px-4 py-2 rounded-btn font-medium transition-colors',
-              filter === 'upcoming'
-                ? 'bg-primary-yellow text-primary-dark'
-                : 'bg-secondary-gray text-gray-600 hover:bg-gray-200'
-            )}
-          >
-            {t('events.upcoming')} ({upcomingEvents.length})
-          </button>
-          <button
-            onClick={() => setFilter('past')}
-            className={clsx(
-              'px-4 py-2 rounded-btn font-medium transition-colors',
-              filter === 'past'
-                ? 'bg-primary-yellow text-primary-dark'
-                : 'bg-secondary-gray text-gray-600 hover:bg-gray-200'
-            )}
-          >
-            {t('events.past')} ({pastEvents.length})
-          </button>
-        </div>
-
-        {/* Events grid */}
-        <div className="mt-8">
-          {loading ? (
-            <div className="text-center py-12">
-              <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full mx-auto" />
-            </div>
-          ) : displayedEvents.length === 0 ? (
-            <div className="text-center py-16 text-gray-500">
-              <CalendarIcon className="w-16 h-16 mx-auto mb-4 text-gray-300" />
-              <p className="text-lg">{t('events.noEvents')}</p>
-            </div>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {displayedEvents.map((event) => (
-                <Link key={event.id} href={`/events/${event.slug}`} className="block">
-                  <Card variant="elevated" className="card-hover overflow-hidden cursor-pointer h-full">
-                    {/* Event banner */}
-                    {event.bannerUrl ? (
-                      <img 
-                        src={event.bannerUrl} 
-                        alt={`${event.title} - Spanglish language exchange event in Asunción`}
-                        className="h-40 w-full object-cover"
-                        loading="lazy"
-                      />
-                    ) : (
-                      <div className="h-40 bg-gradient-to-br from-primary-yellow/30 to-secondary-blue/20 flex items-center justify-center">
-                        <CalendarIcon className="w-16 h-16 text-primary-dark/30" />
-                      </div>
-                    )}
-                    
-                    <div className="p-6">
-                      <div className="flex items-start justify-between gap-2">
-                        <h3 className="font-semibold text-lg text-primary-dark">
-                          {locale === 'es' && event.titleEs ? event.titleEs : event.title}
-                        </h3>
-                        {getStatusBadge(event)}
-                      </div>
-                      
-                      <div className="mt-4 space-y-2 text-sm text-gray-600">
-                        <div className="flex items-center gap-2">
-                          <CalendarIcon className="w-4 h-4" />
-                          <span>{formatDate(event.startDatetime)} - {fmtTime(event.startDatetime)}</span>
-                        </div>
-                        <div className="flex items-center gap-2">
-                          <MapPinIcon className="w-4 h-4" />
-                          <span className="truncate">{event.location}</span>
-                        </div>
-                        {!event.externalBookingEnabled && (
-                          <div className="flex items-center gap-2">
-                            <UserGroupIcon className="w-4 h-4" />
-                            <span>
-                              {Math.max(0, event.capacity - (event.bookedCount ?? 0))} / {event.capacity} {t('events.details.spotsLeft')}
-                            </span>
-                          </div>
-                        )}
-                      </div>
-                      
-                      <div className="mt-6 flex items-center justify-between">
-                        <span className="font-bold text-xl text-primary-dark">
-                          {event.price === 0 
-                            ? t('events.details.free')
-                            : formatPrice(event.price, event.currency)}
-                        </span>
-                        <Button size="sm">
-                          {t('common.moreInfo')}
-                        </Button>
-                      </div>
-                    </div>
-                  </Card>
-                </Link>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
+export default async function EventsPage() {
+  const events = await getEvents();
+  return <EventsClient initialEvents={events} />;
 }

frontend/src/app/(public)/faq/FaqClient.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { useState } from 'react';
+import { useLanguage } from '@/context/LanguageContext';
+import { FaqItem } from '@/lib/api';
+import Card from '@/components/ui/Card';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+
+// Receives the FAQ list already fetched on the server so the questions and
+// answers are present in the initial HTML for crawlers. The accordion below is
+// purely a visual toggle; the answer text stays in the DOM either way.
+export default function FaqClient({ initialFaqs }: { initialFaqs: FaqItem[] }) {
+  const { locale } = useLanguage();
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  const toggleFAQ = (index: number) => {
+    setOpenIndex(openIndex === index ? null : index);
+  };
+
+  return (
+    <div className="section-padding">
+      <div className="container-page max-w-3xl">
+        <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold text-primary-dark mb-4">
+            {locale === 'es' ? 'Preguntas Frecuentes' : 'Frequently Asked Questions'}
+          </h1>
+          <p className="text-gray-600">
+            {locale === 'es'
+              ? 'Encuentra respuestas a las preguntas más comunes sobre Spanglish'
+              : 'Find answers to the most common questions about Spanglish'}
+          </p>
+        </div>
+
+        {initialFaqs.length === 0 ? (
+          <Card className="p-8 text-center">
+            <p className="text-gray-600">
+              {locale === 'es'
+                ? 'No hay preguntas frecuentes publicadas en este momento.'
+                : 'No FAQ questions are published at the moment.'}
+            </p>
+          </Card>
+        ) : (
+          <div className="space-y-4">
+            {initialFaqs.map((faq, index) => (
+              <Card key={faq.id} className="overflow-hidden">
+                <button
+                  onClick={() => toggleFAQ(index)}
+                  className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 transition-colors"
+                >
+                  <span className="font-semibold text-primary-dark pr-4">
+                    {locale === 'es' && faq.questionEs ? faq.questionEs : faq.question}
+                  </span>
+                  <ChevronDownIcon
+                    className={clsx(
+                      'w-5 h-5 text-gray-500 flex-shrink-0 transition-transform duration-200',
+                      openIndex === index && 'transform rotate-180'
+                    )}
+                  />
+                </button>
+                <div
+                  className={clsx(
+                    'overflow-hidden transition-all duration-200',
+                    openIndex === index ? 'max-h-96' : 'max-h-0'
+                  )}
+                >
+                  <div className="px-6 pb-4 text-gray-600">
+                    {locale === 'es' && faq.answerEs ? faq.answerEs : faq.answer}
+                  </div>
+                </div>
+              </Card>
+            ))}
+          </div>
+        )}
+
+        <Card className="mt-12 p-8 text-center bg-primary-yellow/10">
+          <h2 className="text-xl font-semibold text-primary-dark mb-2">
+            {locale === 'es' ? '¿Todavía tienes preguntas?' : 'Still have questions?'}
+          </h2>
+          <p className="text-gray-600 mb-4">
+            {locale === 'es'
+              ? 'No dudes en contactarnos. ¡Estamos aquí para ayudarte!'
+              : "Don't hesitate to reach out. We're here to help!"}
+          </p>
+          <a
+            href="/contact"
+            className="inline-flex items-center justify-center px-6 py-3 bg-primary-yellow text-primary-dark font-semibold rounded-btn hover:bg-primary-yellow/90 transition-colors"
+          >
+            {locale === 'es' ? 'Contáctanos' : 'Contact Us'}
+          </a>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/src/app/(public)/faq/layout.tsx

@@ -20,6 +20,9 @@ async function getFaqForSchema(): Promise<{ question: string; answer: string }[]
 export const metadata: Metadata = {
   title: 'Frequently Asked Questions',
   description: 'Find answers to common questions about Spanglish language exchange events in Asunción. Learn about how events work, who can attend, and more.',
+  alternates: {
+    canonical: '/faq',
+  },
   openGraph: {
     title: 'Frequently Asked Questions – Spanglish',
     description: 'Find answers to common questions about Spanglish language exchange events in Asunción.',

frontend/src/app/(public)/faq/loading.tsx

@@ -0,0 +1,16 @@
+import { Skeleton, FaqListSkeleton } from '@/components/ui/Skeleton';
+
+// Route-level skeleton for the FAQ page: centered header + accordion rows.
+export default function FaqLoading() {
+  return (
+    <div className="section-padding">
+      <div className="container-page max-w-3xl">
+        <div className="text-center mb-12">
+          <Skeleton className="h-10 w-80 max-w-full mx-auto" />
+          <Skeleton className="mt-4 h-4 w-96 max-w-full mx-auto" />
+        </div>
+        <FaqListSkeleton count={6} />
+      </div>
+    </div>
+  );
+}

frontend/src/app/(public)/faq/page.tsx

@@ -1,116 +1,22 @@
-'use client';
+import { FaqItem } from '@/lib/api';
+import FaqClient from './FaqClient';
 
-import { useState, useEffect } from 'react';
-import { useLanguage } from '@/context/LanguageContext';
-import { faqApi, FaqItem } from '@/lib/api';
-import Card from '@/components/ui/Card';
-import { ChevronDownIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
 
-export default function FAQPage() {
-  const { locale } = useLanguage();
-  const [faqs, setFaqs] = useState<FaqItem[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [openIndex, setOpenIndex] = useState<number | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    faqApi.getList().then((res) => {
-      if (!cancelled) {
-        setFaqs(res.faqs);
-      }
-    }).finally(() => {
-      if (!cancelled) setLoading(false);
-    });
-    return () => { cancelled = true; };
-  }, []);
-
-  const toggleFAQ = (index: number) => {
-    setOpenIndex(openIndex === index ? null : index);
-  };
-
-  if (loading) {
-    return (
-      <div className="section-padding">
-        <div className="container-page max-w-3xl flex justify-center py-20">
-          <div className="animate-spin w-10 h-10 border-4 border-primary-yellow border-t-transparent rounded-full" />
-        </div>
-      </div>
-    );
+// Fetch the published FAQ list on the server so the questions and answers are
+// rendered into the initial HTML (crawlers see the content without running JS).
+async function getFaqs(): Promise<FaqItem[]> {
+  try {
+    const res = await fetch(`${apiUrl}/api/faq`, { next: { revalidate: 60 } });
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.faqs || [];
+  } catch {
+    return [];
   }
+}
 
-  return (
-    <div className="section-padding">
-      <div className="container-page max-w-3xl">
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-primary-dark mb-4">
-            {locale === 'es' ? 'Preguntas Frecuentes' : 'Frequently Asked Questions'}
-          </h1>
-          <p className="text-gray-600">
-            {locale === 'es'
-              ? 'Encuentra respuestas a las preguntas más comunes sobre Spanglish'
-              : 'Find answers to the most common questions about Spanglish'}
-          </p>
-        </div>
-
-        {faqs.length === 0 ? (
-          <Card className="p-8 text-center">
-            <p className="text-gray-600">
-              {locale === 'es'
-                ? 'No hay preguntas frecuentes publicadas en este momento.'
-                : 'No FAQ questions are published at the moment.'}
-            </p>
-          </Card>
-        ) : (
-          <div className="space-y-4">
-            {faqs.map((faq, index) => (
-              <Card key={faq.id} className="overflow-hidden">
-                <button
-                  onClick={() => toggleFAQ(index)}
-                  className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 transition-colors"
-                >
-                  <span className="font-semibold text-primary-dark pr-4">
-                    {locale === 'es' && faq.questionEs ? faq.questionEs : faq.question}
-                  </span>
-                  <ChevronDownIcon
-                    className={clsx(
-                      'w-5 h-5 text-gray-500 flex-shrink-0 transition-transform duration-200',
-                      openIndex === index && 'transform rotate-180'
-                    )}
-                  />
-                </button>
-                <div
-                  className={clsx(
-                    'overflow-hidden transition-all duration-200',
-                    openIndex === index ? 'max-h-96' : 'max-h-0'
-                  )}
-                >
-                  <div className="px-6 pb-4 text-gray-600">
-                    {locale === 'es' && faq.answerEs ? faq.answerEs : faq.answer}
-                  </div>
-                </div>
-              </Card>
-            ))}
-          </div>
-        )}
-
-        <Card className="mt-12 p-8 text-center bg-primary-yellow/10">
-          <h2 className="text-xl font-semibold text-primary-dark mb-2">
-            {locale === 'es' ? '¿Todavía tienes preguntas?' : 'Still have questions?'}
-          </h2>
-          <p className="text-gray-600 mb-4">
-            {locale === 'es'
-              ? 'No dudes en contactarnos. ¡Estamos aquí para ayudarte!'
-              : "Don't hesitate to reach out. We're here to help!"}
-          </p>
-          <a
-            href="/contact"
-            className="inline-flex items-center justify-center px-6 py-3 bg-primary-yellow text-primary-dark font-semibold rounded-btn hover:bg-primary-yellow/90 transition-colors"
-          >
-            {locale === 'es' ? 'Contáctanos' : 'Contact Us'}
-          </a>
-        </Card>
-      </div>
-    </div>
-  );
+export default async function FAQPage() {
+  const faqs = await getFaqs();
+  return <FaqClient initialFaqs={faqs} />;
 }

frontend/src/app/(public)/featured/page.tsx

@@ -0,0 +1,23 @@
+import { redirect } from 'next/navigation';
+
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+
+async function getFeaturedEventSlug(): Promise<string | null> {
+  try {
+    const revalidateSeconds =
+      parseInt(process.env.NEXT_EVENT_REVALIDATE_SECONDS || '3600', 10) || 3600;
+    const response = await fetch(`${apiUrl}/api/events/next/upcoming`, {
+      next: { tags: ['next-event'], revalidate: revalidateSeconds },
+    });
+    if (!response.ok) return null;
+    const data = await response.json();
+    return data.event?.slug || null;
+  } catch {
+    return null;
+  }
+}
+
+export default async function FeaturedEventPage() {
+  const slug = await getFeaturedEventSlug();
+  redirect(slug ? `/events/${slug}` : '/events');
+}

frontend/src/app/(public)/legal/[slug]/loading.tsx

@@ -0,0 +1,25 @@
+import { Skeleton, SkeletonGroup, SkeletonText } from '@/components/ui/Skeleton';
+
+// Route-level skeleton for legal pages: back link, bordered header, prose body.
+export default function LegalPageLoading() {
+  return (
+    <div className="section-padding">
+      <div className="container-page max-w-4xl">
+        <SkeletonGroup>
+          <Skeleton className="h-5 w-32 mb-8" />
+          <div className="mb-8 pb-6 border-b border-gray-200">
+            <Skeleton className="h-10 w-2/3" />
+            <Skeleton className="mt-3 h-4 w-44" />
+          </div>
+          <div className="space-y-6">
+            <SkeletonText lines={4} />
+            <Skeleton className="h-6 w-1/3" />
+            <SkeletonText lines={5} />
+            <Skeleton className="h-6 w-2/5" />
+            <SkeletonText lines={4} />
+          </div>
+        </SkeletonGroup>
+      </div>
+    </div>
+  );
+}

frontend/src/app/(public)/legal/[slug]/page.tsx

@@ -40,7 +40,8 @@ export async function generateMetadata({ params, searchParams }: PageProps): Pro
   }
   
   return {
-    title: `${legalPage.title} – Spanglish`,
+    // The root layout's title template appends " – Spanglish"; do not repeat it here.
+    title: legalPage.title,
     description: `${legalPage.title} for Spanglish language exchange events in Asunción, Paraguay.`,
     robots: {
       index: true,

frontend/src/app/(public)/login/page.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
 import GoogleSignInButton from '@/components/GoogleSignInButton';
 import { authApi } from '@/lib/api';
+import { safeInternalPath } from '@/lib/safeRedirect';
 import toast from 'react-hot-toast';
 
 function LoginContent() {
@@ -25,8 +26,8 @@ function LoginContent() {
     password: '',
   });
 
-  // Check for redirect after login
-  const redirectTo = searchParams.get('redirect') || '/dashboard';
+  // Check for redirect after login (only same-origin relative paths are honoured)
+  const redirectTo = safeInternalPath(searchParams.get('redirect'), '/dashboard');
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();

frontend/src/app/(public)/next/page.tsx

@@ -0,0 +1,23 @@
+import { redirect } from 'next/navigation';
+
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+
+async function getNextEventSlug(): Promise<string | null> {
+  try {
+    const revalidateSeconds =
+      parseInt(process.env.NEXT_EVENT_REVALIDATE_SECONDS || '3600', 10) || 3600;
+    const response = await fetch(`${apiUrl}/api/events/next`, {
+      next: { tags: ['next-event'], revalidate: revalidateSeconds },
+    });
+    if (!response.ok) return null;
+    const data = await response.json();
+    return data.event?.slug || null;
+  } catch {
+    return null;
+  }
+}
+
+export default async function NextEventPage() {
+  const slug = await getNextEventSlug();
+  redirect(slug ? `/events/${slug}` : '/events');
+}

frontend/src/app/(public)/page.tsx

@@ -59,7 +59,9 @@ export async function generateMetadata(): Promise<Metadata> {
 
   if (!event) {
     return {
-      title: 'Spanglish – Language Exchange Events in Asunción',
+      // Title already carries the brand, so bypass the "%s – Spanglish"
+      // template to avoid doubling it.
+      title: { absolute: 'Spanglish – Language Exchange Events in Asunción' },
       description:
         'Practice English and Spanish at relaxed social events in Asunción. Meet locals and internationals. Join the next Spanglish meetup.',
     };
@@ -76,7 +78,9 @@ export async function generateMetadata(): Promise<Metadata> {
   const description = `Next event: ${eventDate} – ${event.title}. Practice English and Spanish at relaxed social events in Asunción. Meet locals and internationals.`;
 
   return {
-    title: 'Spanglish – Language Exchange Events in Asunción',
+    // Title already carries the brand, so bypass the "%s – Spanglish"
+    // template to avoid doubling it.
+    title: { absolute: 'Spanglish – Language Exchange Events in Asunción' },
     description,
     openGraph: {
       title: 'Spanglish – Language Exchange Events in Asunción',
@@ -142,7 +146,9 @@ function generateNextEventJsonLd(event: NextEvent) {
           : 'https://schema.org/SoldOut',
       url: `${siteUrl}/events/${event.slug}`,
     },
-    image: event.bannerUrl || `${siteUrl}/images/og-image.jpg`,
+    image: event.bannerUrl
+      ? (event.bannerUrl.startsWith('http') ? event.bannerUrl : `${siteUrl}${event.bannerUrl}`)
+      : `${siteUrl}/images/og-image.jpg`,
     url: `${siteUrl}/events/${event.slug}`,
   };
 }

frontend/src/app/admin/[...notFound]/page.tsx

@@ -0,0 +1,5 @@
+import { notFound } from 'next/navigation';
+
+export default function AdminCatchAll() {
+  notFound();
+}

frontend/src/app/admin/bookings/page.tsx

@@ -2,10 +2,11 @@
 
 import { useState, useEffect } from 'react';
 import { useLanguage } from '@/context/LanguageContext';
-import { ticketsApi, eventsApi, Ticket, Event } from '@/lib/api';
-import { parseDate } from '@/lib/utils';
+import { ticketsApi, eventsApi, paymentsApi, Ticket, Event } from '@/lib/api';
+import { parseDate, formatRucDisplay } from '@/lib/utils';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
+import { AdminPageSkeleton } from '@/components/ui/Skeleton';
 import { BottomSheet, MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
 import { 
   TicketIcon, 
@@ -17,6 +18,7 @@ import {
   PhoneIcon,
   FunnelIcon,
   MagnifyingGlassIcon,
+  ArrowPathIcon,
 } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
 import clsx from 'clsx';
@@ -101,6 +103,20 @@ export default function AdminBookingsPage() {
     }
   };
 
+  const handleReactivate = async (ticket: TicketWithDetails) => {
+    if (!ticket.payment?.id) return;
+    setProcessing(ticket.id);
+    try {
+      await paymentsApi.reactivate(ticket.payment.id);
+      toast.success('Booking reactivated');
+      loadData();
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to reactivate booking');
+    } finally {
+      setProcessing(null);
+    }
+  };
+
   const handleCancel = async (ticketId: string) => {
     if (!confirm('Are you sure you want to cancel this booking?')) return;
     
@@ -133,6 +149,7 @@ export default function AdminBookingsPage() {
       case 'pending': return 'bg-yellow-100 text-yellow-800';
       case 'cancelled': return 'bg-red-100 text-red-800';
       case 'checked_in': return 'bg-blue-100 text-blue-800';
+      case 'on_hold': return 'bg-slate-100 text-slate-600';
       default: return 'bg-gray-100 text-gray-800';
     }
   };
@@ -144,6 +161,7 @@ export default function AdminBookingsPage() {
       case 'failed':
       case 'cancelled': return 'bg-red-100 text-red-800';
       case 'refunded': return 'bg-purple-100 text-purple-800';
+      case 'on_hold': return 'bg-slate-100 text-slate-600';
       default: return 'bg-gray-100 text-gray-800';
     }
   };
@@ -191,6 +209,7 @@ export default function AdminBookingsPage() {
     confirmed: tickets.filter(t => t.status === 'confirmed').length,
     checkedIn: tickets.filter(t => t.status === 'checked_in').length,
     cancelled: tickets.filter(t => t.status === 'cancelled').length,
+    onHold: tickets.filter(t => t.status === 'on_hold').length,
     pendingPayment: tickets.filter(t => t.payment?.status === 'pending').length,
   };
 
@@ -218,6 +237,9 @@ export default function AdminBookingsPage() {
     if (ticket.status === 'pending' && ticket.payment?.status === 'pending') {
       return { label: 'Mark Paid', onClick: () => handleMarkPaid(ticket.id), color: 'text-green-600' };
     }
+    if (ticket.status === 'on_hold') {
+      return { label: 'Mark Paid', onClick: () => handleMarkPaid(ticket.id), color: 'text-green-600' };
+    }
     if (ticket.status === 'confirmed') {
       return { label: 'Check In', onClick: () => handleCheckin(ticket.id), color: 'text-blue-600' };
     }
@@ -225,11 +247,7 @@ export default function AdminBookingsPage() {
   };
 
   if (loading) {
-    return (
-      <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>
-    );
+    return <AdminPageSkeleton cols={7} />;
   }
 
   return (
@@ -239,7 +257,7 @@ export default function AdminBookingsPage() {
       </div>
 
       {/* Stats Cards */}
-      <div className="grid grid-cols-3 md:grid-cols-3 lg:grid-cols-6 gap-2 md:gap-4 mb-6">
+      <div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-2 md:gap-4 mb-6">
         <Card className="p-3 md:p-4 text-center">
           <p className="text-xl md:text-2xl font-bold text-primary-dark">{stats.total}</p>
           <p className="text-xs md:text-sm text-gray-500">Total</p>
@@ -260,6 +278,10 @@ export default function AdminBookingsPage() {
           <p className="text-xl md:text-2xl font-bold text-red-600">{stats.cancelled}</p>
           <p className="text-xs md:text-sm text-gray-500">Cancelled</p>
         </Card>
+        <Card className="p-3 md:p-4 text-center border-l-4 border-slate-400">
+          <p className="text-xl md:text-2xl font-bold text-slate-600">{stats.onHold}</p>
+          <p className="text-xs md:text-sm text-gray-500">On Hold</p>
+        </Card>
         <Card className="p-3 md:p-4 text-center border-l-4 border-orange-400">
           <p className="text-xl md:text-2xl font-bold text-orange-600">{stats.pendingPayment}</p>
           <p className="text-xs md:text-sm text-gray-500">Pending Pay</p>
@@ -305,6 +327,7 @@ export default function AdminBookingsPage() {
               <option value="confirmed">Confirmed</option>
               <option value="checked_in">Checked In</option>
               <option value="cancelled">Cancelled</option>
+              <option value="on_hold">On Hold</option>
             </select>
           </div>
           <div>
@@ -316,6 +339,7 @@ export default function AdminBookingsPage() {
               <option value="paid">Paid</option>
               <option value="refunded">Refunded</option>
               <option value="failed">Failed</option>
+              <option value="on_hold">On Hold</option>
             </select>
           </div>
         </div>
@@ -368,6 +392,7 @@ export default function AdminBookingsPage() {
             <thead className="bg-secondary-gray">
               <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">RUC</th>
                 <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Event</th>
                 <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Payment</th>
                 <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
@@ -378,7 +403,7 @@ export default function AdminBookingsPage() {
             <tbody className="divide-y divide-secondary-light-gray">
               {sortedTickets.length === 0 ? (
                 <tr>
-                  <td colSpan={6} className="px-4 py-12 text-center text-gray-500 text-sm">
+                  <td colSpan={7} className="px-4 py-12 text-center text-gray-500 text-sm">
                     No bookings found.
                   </td>
                 </tr>
@@ -392,6 +417,7 @@ export default function AdminBookingsPage() {
                         <p className="text-xs text-gray-500 truncate max-w-[200px]">{ticket.attendeeEmail || 'N/A'}</p>
                         {ticket.attendeePhone && <p className="text-xs text-gray-400">{ticket.attendeePhone}</p>}
                       </td>
+                      <td className="px-4 py-3 text-sm text-gray-600">{formatRucDisplay(ticket.attendeeRuc) || '-'}</td>
                       <td className="px-4 py-3">
                         <span className="text-sm truncate max-w-[150px] block">
                           {ticket.event?.title || events.find(e => e.id === ticket.eventId)?.title || 'Unknown'}
@@ -431,6 +457,18 @@ export default function AdminBookingsPage() {
                               Check In
                             </Button>
                           )}
+                          {ticket.status === 'on_hold' && (
+                            <>
+                              <Button size="sm" variant="outline" onClick={() => handleMarkPaid(ticket.id)}
+                                isLoading={processing === ticket.id} className="text-xs px-2 py-1">
+                                Mark Paid
+                              </Button>
+                              <Button size="sm" variant="outline" onClick={() => handleReactivate(ticket)}
+                                isLoading={processing === ticket.id} className="text-xs px-2 py-1">
+                                Reactivate
+                              </Button>
+                            </>
+                          )}
                           {(ticket.status === 'pending' || ticket.status === 'confirmed') && (
                             <MoreMenu>
                               <DropdownItem onClick={() => handleCancel(ticket.id)} className="text-red-600">
@@ -519,6 +557,13 @@ export default function AdminBookingsPage() {
                         </DropdownItem>
                       </MoreMenu>
                     )}
+                    {ticket.status === 'on_hold' && (
+                      <MoreMenu>
+                        <DropdownItem onClick={() => handleReactivate(ticket)}>
+                          <ArrowPathIcon className="w-4 h-4 mr-2" /> Reactivate
+                        </DropdownItem>
+                      </MoreMenu>
+                    )}
                     {ticket.status === 'checked_in' && (
                       <span className="text-[10px] text-green-600 flex items-center gap-1">
                         <CheckCircleIcon className="w-3.5 h-3.5" /> Attended
@@ -557,6 +602,7 @@ export default function AdminBookingsPage() {
                 { value: 'confirmed', label: `Confirmed (${stats.confirmed})` },
                 { value: 'checked_in', label: `Checked In (${stats.checkedIn})` },
                 { value: 'cancelled', label: `Cancelled (${stats.cancelled})` },
+                { value: 'on_hold', label: `On Hold (${stats.onHold})` },
               ].map((opt) => (
                 <button
                   key={opt.value}
@@ -581,6 +627,7 @@ export default function AdminBookingsPage() {
                 { value: 'paid', label: 'Paid' },
                 { value: 'refunded', label: 'Refunded' },
                 { value: 'failed', label: 'Failed' },
+                { value: 'on_hold', label: 'On Hold' },
               ].map((opt) => (
                 <button
                   key={opt.value}

frontend/src/app/admin/contacts/page.tsx

@@ -5,6 +5,7 @@ import { useLanguage } from '@/context/LanguageContext';
 import { contactsApi, Contact } from '@/lib/api';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
+import { Skeleton, SkeletonText, CardListSkeleton } from '@/components/ui/Skeleton';
 import { EnvelopeIcon, EnvelopeOpenIcon, CheckIcon } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
 import { parseDate } from '@/lib/utils';
@@ -65,8 +66,21 @@ export default function AdminContactsPage() {
 
   if (loading) {
     return (
-      <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>
+        <div className="flex items-center justify-between mb-6">
+          <Skeleton className="h-8 w-48" />
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div className="lg:col-span-1">
+            <CardListSkeleton count={5} />
+          </div>
+          <div className="lg:col-span-2">
+            <div className="bg-white rounded-card shadow-card p-6">
+              <Skeleton className="h-6 w-1/3" />
+              <SkeletonText lines={4} className="mt-6" />
+            </div>
+          </div>
+        </div>
       </div>
     );
   }

frontend/src/app/admin/emails/page.tsx

@@ -6,6 +6,7 @@ import { emailsApi, EmailTemplate, EmailLog, EmailStats } from '@/lib/api';
 import { parseDate } from '@/lib/utils';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
+import { AdminPageSkeleton } from '@/components/ui/Skeleton';
 import Input from '@/components/ui/Input';
 import { MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
 import {
@@ -418,11 +419,7 @@ export default function AdminEmailsPage() {
   };
 
   if (loading) {
-    return (
-      <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>
-    );
+    return <AdminPageSkeleton cols={5} />;
   }
 
   return (
@@ -1047,6 +1044,7 @@ export default function AdminEmailsPage() {
             <div className="flex-1 overflow-auto">
               <iframe
                 srcDoc={previewHtml}
+                sandbox=""
                 className="w-full h-full min-h-[500px]"
                 title="Email Preview"
               />
@@ -1100,6 +1098,7 @@ export default function AdminEmailsPage() {
               {selectedLog.bodyHtml ? (
                 <iframe
                   srcDoc={selectedLog.bodyHtml}
+                  sandbox=""
                   className="w-full h-full min-h-[400px]"
                   title="Email Content"
                 />

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

@@ -0,0 +1,20 @@
+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',
+    on_hold: 'bg-slate-100 text-slate-600',
+  };
+  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>;