Merge pull request 'Bug fixes and improvements' (#14) from dev into main

Reviewed-on: #14

.gitignore

@@ -37,6 +37,7 @@ backend/uploads/
 # Tooling
 .turbo/
 .cursor/
+.npm-cache/
 
 # OS
 .DS_Store

README.md

@@ -64,6 +64,8 @@ npm run start
 npm run db:generate
 npm run db:migrate
 npm run db:studio
+npm run db:export   # Backup database
+npm run db:import   # Restore from backup
 ```
 
 You can also run per workspace:
@@ -117,6 +119,25 @@ Then run:
 npm run db:migrate
 ```
 
+### Backups (export / import)
+
+Create backups and restore if needed:
+
+```bash
+# Export (creates timestamped file in backend/data/backups/)
+npm run db:export
+
+# Export to custom path
+npm run db:export -- -o ./my-backup.db    # SQLite
+npm run db:export -- -o ./my-backup.sql   # PostgreSQL
+
+# Import (stop the backend server first)
+npm run db:import -- ./data/backups/spanglish-2025-03-07-143022.db
+npm run db:import -- --yes ./data/backups/spanglish-2025-03-07.sql   # Skip confirmation
+```
+
+**Note:** Stop the backend before importing so the database file is not locked.
+
 ## Production deployment (nginx + systemd)
 
 This repo includes example configs in `deploy/`:

backend/.env.example

@@ -19,7 +19,11 @@ GOOGLE_CLIENT_ID=
 # Server Configuration
 PORT=3001
 API_URL=http://localhost:3001
-FRONTEND_URL=http://localhost:3002
+FRONTEND_URL=http://localhost:3019
+
+# Revalidation secret (shared with frontend for on-demand cache revalidation)
+# Must match the REVALIDATE_SECRET in frontend/.env
+REVALIDATE_SECRET=change-me-to-a-random-secret
 
 # Payment Providers (optional)
 STRIPE_SECRET_KEY=
@@ -63,3 +67,9 @@ SMTP_TLS_REJECT_UNAUTHORIZED=true
 # SendGrid: SMTP_HOST=smtp.sendgrid.net, SMTP_PORT=587, SMTP_USER=apikey, SMTP_PASS=your_api_key
 # Mailgun: SMTP_HOST=smtp.mailgun.org, SMTP_PORT=587
 # Amazon SES: SMTP_HOST=email-smtp.us-east-1.amazonaws.com, SMTP_PORT=587
+
+# Email Queue Rate Limiting
+# Maximum number of emails that can be sent per hour (default: 30)
+# If the limit is reached, queued emails will pause and resume automatically
+MAX_EMAILS_PER_HOUR=30
+

backend/drizzle/0000_steady_wendell_vaughn.sql

@@ -0,0 +1,270 @@
+CREATE TABLE `audit_logs` (
+	`id` text PRIMARY KEY NOT NULL,
+	`user_id` text,
+	`action` text NOT NULL,
+	`target` text,
+	`target_id` text,
+	`details` text,
+	`timestamp` text NOT NULL,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `contacts` (
+	`id` text PRIMARY KEY NOT NULL,
+	`name` text NOT NULL,
+	`email` text NOT NULL,
+	`message` text NOT NULL,
+	`status` text DEFAULT 'new' NOT NULL,
+	`created_at` text NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE `email_logs` (
+	`id` text PRIMARY KEY NOT NULL,
+	`template_id` text,
+	`event_id` text,
+	`recipient_email` text NOT NULL,
+	`recipient_name` text,
+	`subject` text NOT NULL,
+	`body_html` text,
+	`status` text DEFAULT 'pending' NOT NULL,
+	`error_message` text,
+	`sent_at` text,
+	`sent_by` text,
+	`created_at` text NOT NULL,
+	FOREIGN KEY (`template_id`) REFERENCES `email_templates`(`id`) ON UPDATE no action ON DELETE no action,
+	FOREIGN KEY (`event_id`) REFERENCES `events`(`id`) ON UPDATE no action ON DELETE no action,
+	FOREIGN KEY (`sent_by`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `email_settings` (
+	`id` text PRIMARY KEY NOT NULL,
+	`key` text NOT NULL,
+	`value` text NOT NULL,
+	`updated_at` text NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE `email_subscribers` (
+	`id` text PRIMARY KEY NOT NULL,
+	`email` text NOT NULL,
+	`name` text,
+	`status` text DEFAULT 'active' NOT NULL,
+	`created_at` text NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE `email_templates` (
+	`id` text PRIMARY KEY NOT NULL,
+	`name` text NOT NULL,
+	`slug` text NOT NULL,
+	`subject` text NOT NULL,
+	`subject_es` text,
+	`body_html` text NOT NULL,
+	`body_html_es` text,
+	`body_text` text,
+	`body_text_es` text,
+	`description` text,
+	`variables` text,
+	`is_system` integer DEFAULT false NOT NULL,
+	`is_active` integer DEFAULT true NOT NULL,
+	`created_at` text NOT NULL,
+	`updated_at` text NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE `event_payment_overrides` (
+	`id` text PRIMARY KEY NOT NULL,
+	`event_id` text NOT NULL,
+	`tpago_enabled` integer,
+	`tpago_link` text,
+	`tpago_instructions` text,
+	`tpago_instructions_es` text,
+	`bank_transfer_enabled` integer,
+	`bank_name` text,
+	`bank_account_holder` text,
+	`bank_account_number` text,
+	`bank_alias` text,
+	`bank_phone` text,
+	`bank_notes` text,
+	`bank_notes_es` text,
+	`lightning_enabled` integer,
+	`cash_enabled` integer,
+	`cash_instructions` text,
+	`cash_instructions_es` text,
+	`created_at` text NOT NULL,
+	`updated_at` text NOT NULL,
+	FOREIGN KEY (`event_id`) REFERENCES `events`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `events` (
+	`id` text PRIMARY KEY NOT NULL,
+	`title` text NOT NULL,
+	`title_es` text,
+	`description` text NOT NULL,
+	`description_es` text,
+	`start_datetime` text NOT NULL,
+	`end_datetime` text,
+	`location` text NOT NULL,
+	`location_url` text,
+	`price` real DEFAULT 0 NOT NULL,
+	`currency` text DEFAULT 'PYG' NOT NULL,
+	`capacity` integer DEFAULT 50 NOT NULL,
+	`status` text DEFAULT 'draft' NOT NULL,
+	`banner_url` text,
+	`external_booking_enabled` integer DEFAULT false NOT NULL,
+	`external_booking_url` text,
+	`created_at` text NOT NULL,
+	`updated_at` text NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE `invoices` (
+	`id` text PRIMARY KEY NOT NULL,
+	`payment_id` text NOT NULL,
+	`user_id` text NOT NULL,
+	`invoice_number` text NOT NULL,
+	`ruc_number` text,
+	`legal_name` text,
+	`amount` real NOT NULL,
+	`currency` text DEFAULT 'PYG' NOT NULL,
+	`pdf_url` text,
+	`status` text DEFAULT 'generated' NOT NULL,
+	`created_at` text NOT NULL,
+	FOREIGN KEY (`payment_id`) REFERENCES `payments`(`id`) ON UPDATE no action ON DELETE no action,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `magic_link_tokens` (
+	`id` text PRIMARY KEY NOT NULL,
+	`user_id` text NOT NULL,
+	`token` text NOT NULL,
+	`type` text NOT NULL,
+	`expires_at` text NOT NULL,
+	`used_at` text,
+	`created_at` text NOT NULL,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `media` (
+	`id` text PRIMARY KEY NOT NULL,
+	`file_url` text NOT NULL,
+	`type` text NOT NULL,
+	`related_id` text,
+	`related_type` text,
+	`created_at` text NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE `payment_options` (
+	`id` text PRIMARY KEY NOT NULL,
+	`tpago_enabled` integer DEFAULT false NOT NULL,
+	`tpago_link` text,
+	`tpago_instructions` text,
+	`tpago_instructions_es` text,
+	`bank_transfer_enabled` integer DEFAULT false NOT NULL,
+	`bank_name` text,
+	`bank_account_holder` text,
+	`bank_account_number` text,
+	`bank_alias` text,
+	`bank_phone` text,
+	`bank_notes` text,
+	`bank_notes_es` text,
+	`lightning_enabled` integer DEFAULT true NOT NULL,
+	`cash_enabled` integer DEFAULT true NOT NULL,
+	`cash_instructions` text,
+	`cash_instructions_es` text,
+	`allow_duplicate_bookings` integer DEFAULT false NOT NULL,
+	`updated_at` text NOT NULL,
+	`updated_by` text,
+	FOREIGN KEY (`updated_by`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `payments` (
+	`id` text PRIMARY KEY NOT NULL,
+	`ticket_id` text NOT NULL,
+	`provider` text NOT NULL,
+	`amount` real NOT NULL,
+	`currency` text DEFAULT 'PYG' NOT NULL,
+	`status` text DEFAULT 'pending' NOT NULL,
+	`reference` text,
+	`user_marked_paid_at` text,
+	`paid_at` text,
+	`paid_by_admin_id` text,
+	`admin_note` text,
+	`created_at` text NOT NULL,
+	`updated_at` text NOT NULL,
+	FOREIGN KEY (`ticket_id`) REFERENCES `tickets`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `site_settings` (
+	`id` text PRIMARY KEY NOT NULL,
+	`timezone` text DEFAULT 'America/Asuncion' NOT NULL,
+	`site_name` text DEFAULT 'Spanglish' NOT NULL,
+	`site_description` text,
+	`site_description_es` text,
+	`contact_email` text,
+	`contact_phone` text,
+	`facebook_url` text,
+	`instagram_url` text,
+	`twitter_url` text,
+	`linkedin_url` text,
+	`maintenance_mode` integer DEFAULT false NOT NULL,
+	`maintenance_message` text,
+	`maintenance_message_es` text,
+	`updated_at` text NOT NULL,
+	`updated_by` text,
+	FOREIGN KEY (`updated_by`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `tickets` (
+	`id` text PRIMARY KEY NOT NULL,
+	`user_id` text NOT NULL,
+	`event_id` text NOT NULL,
+	`attendee_first_name` text NOT NULL,
+	`attendee_last_name` text,
+	`attendee_email` text,
+	`attendee_phone` text,
+	`attendee_ruc` text,
+	`preferred_language` text,
+	`status` text DEFAULT 'pending' NOT NULL,
+	`checkin_at` text,
+	`checked_in_by_admin_id` text,
+	`qr_code` text,
+	`admin_note` text,
+	`created_at` text NOT NULL,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action,
+	FOREIGN KEY (`event_id`) REFERENCES `events`(`id`) ON UPDATE no action ON DELETE no action,
+	FOREIGN KEY (`checked_in_by_admin_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `user_sessions` (
+	`id` text PRIMARY KEY NOT NULL,
+	`user_id` text NOT NULL,
+	`token` text NOT NULL,
+	`user_agent` text,
+	`ip_address` text,
+	`last_active_at` text NOT NULL,
+	`expires_at` text NOT NULL,
+	`created_at` text NOT NULL,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `users` (
+	`id` text PRIMARY KEY NOT NULL,
+	`email` text NOT NULL,
+	`password` text,
+	`name` text NOT NULL,
+	`phone` text,
+	`role` text DEFAULT 'user' NOT NULL,
+	`language_preference` text,
+	`is_claimed` integer DEFAULT true NOT NULL,
+	`google_id` text,
+	`ruc_number` text,
+	`account_status` text DEFAULT 'active' NOT NULL,
+	`created_at` text NOT NULL,
+	`updated_at` text NOT NULL
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `email_settings_key_unique` ON `email_settings` (`key`);--> statement-breakpoint
+CREATE UNIQUE INDEX `email_subscribers_email_unique` ON `email_subscribers` (`email`);--> statement-breakpoint
+CREATE UNIQUE INDEX `email_templates_name_unique` ON `email_templates` (`name`);--> statement-breakpoint
+CREATE UNIQUE INDEX `email_templates_slug_unique` ON `email_templates` (`slug`);--> statement-breakpoint
+CREATE UNIQUE INDEX `invoices_invoice_number_unique` ON `invoices` (`invoice_number`);--> statement-breakpoint
+CREATE UNIQUE INDEX `magic_link_tokens_token_unique` ON `magic_link_tokens` (`token`);--> statement-breakpoint
+CREATE UNIQUE INDEX `user_sessions_token_unique` ON `user_sessions` (`token`);--> statement-breakpoint
+CREATE UNIQUE INDEX `users_email_unique` ON `users` (`email`);

backend/drizzle/meta/_journal.json

@@ -0,0 +1,13 @@
+{
+  "version": "7",
+  "dialect": "sqlite",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "6",
+      "when": 1769975033554,
+      "tag": "0000_steady_wendell_vaughn",
+      "breakpoints": true
+    }
+  ]
+}

backend/package.json

@@ -8,7 +8,9 @@
     "start": "NODE_ENV=production node dist/index.js",
     "db:generate": "drizzle-kit generate",
     "db:migrate": "tsx src/db/migrate.ts",
-    "db:studio": "drizzle-kit studio"
+    "db:studio": "drizzle-kit studio",
+    "db:export": "tsx src/db/export.ts",
+    "db:import": "tsx src/db/import.ts"
   },
   "dependencies": {
     "@hono/node-server": "^1.11.4",

backend/src/db/export.ts

@@ -0,0 +1,96 @@
+import 'dotenv/config';
+import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { dirname, resolve } from 'path';
+import { spawnSync } from 'child_process';
+import Database from 'better-sqlite3';
+
+const dbType = process.env.DB_TYPE || 'sqlite';
+const dbPath = process.env.DATABASE_URL || './data/spanglish.db';
+const BACKUP_DIR = resolve(process.cwd(), 'data', 'backups');
+
+function parseArgs(): { output?: string } {
+  const args = process.argv.slice(2);
+  const result: { output?: string } = {};
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === '-o' || args[i] === '--output') {
+      result.output = args[i + 1];
+      i++;
+    }
+  }
+  return result;
+}
+
+function getTimestamp(): string {
+  const now = new Date();
+  const y = now.getFullYear();
+  const m = String(now.getMonth() + 1).padStart(2, '0');
+  const d = String(now.getDate()).padStart(2, '0');
+  const h = String(now.getHours()).padStart(2, '0');
+  const min = String(now.getMinutes()).padStart(2, '0');
+  const s = String(now.getSeconds()).padStart(2, '0');
+  return `${y}-${m}-${d}-${h}${min}${s}`;
+}
+
+function exportSqlite(outputPath: string): void {
+  const db = new Database(resolve(process.cwd(), dbPath), { readonly: true });
+  try {
+    db.backup(outputPath);
+    console.log(`Exported to ${outputPath}`);
+  } finally {
+    db.close();
+  }
+}
+
+function exportPostgres(outputPath: string): void {
+  const connString = process.env.DATABASE_URL || 'postgresql://localhost:5432/spanglish';
+  const result = spawnSync(
+    'pg_dump',
+    ['--clean', '--if-exists', connString],
+    {
+      stdio: ['ignore', 'pipe', 'pipe'],
+      encoding: 'utf-8',
+    }
+  );
+
+  if (result.error) {
+    console.error('pg_dump failed. Ensure pg_dump is installed and in PATH.');
+    console.error(result.error.message);
+    process.exit(1);
+  }
+
+  if (result.status !== 0) {
+    console.error('pg_dump failed:', result.stderr);
+    process.exit(1);
+  }
+
+  writeFileSync(outputPath, result.stdout);
+  console.log(`Exported to ${outputPath}`);
+}
+
+async function main() {
+  const { output } = parseArgs();
+  const ext = dbType === 'postgres' ? '.sql' : '.db';
+  const defaultName = `spanglish-${getTimestamp()}${ext}`;
+
+  const outputPath = output
+    ? resolve(process.cwd(), output)
+    : resolve(BACKUP_DIR, defaultName);
+
+  const dir = dirname(outputPath);
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
+  }
+
+  console.log(`Database type: ${dbType}`);
+  if (dbType === 'sqlite') {
+    exportSqlite(outputPath);
+  } else {
+    exportPostgres(outputPath);
+  }
+  process.exit(0);
+}
+
+main().catch((err) => {
+  console.error('Export failed:', err);
+  process.exit(1);
+});

backend/src/db/import.ts

@@ -0,0 +1,91 @@
+import 'dotenv/config';
+import { copyFileSync, existsSync, readFileSync } from 'fs';
+import { resolve } from 'path';
+import { spawnSync } from 'child_process';
+
+const dbType = process.env.DB_TYPE || 'sqlite';
+const dbPath = process.env.DATABASE_URL || './data/spanglish.db';
+
+function parseArgs(): { file?: string; yes?: boolean } {
+  const args = process.argv.slice(2);
+  const result: { file?: string; yes?: boolean } = {};
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === '-y' || args[i] === '--yes') {
+      result.yes = true;
+    } else if (!args[i].startsWith('-')) {
+      result.file = args[i];
+    }
+  }
+  return result;
+}
+
+function importSqlite(backupPath: string): void {
+  const targetPath = resolve(process.cwd(), dbPath);
+  copyFileSync(backupPath, targetPath);
+  console.log(`Restored from ${backupPath} to ${targetPath}`);
+}
+
+function importPostgres(backupPath: string): void {
+  const connString = process.env.DATABASE_URL || 'postgresql://localhost:5432/spanglish';
+  const sql = readFileSync(backupPath, 'utf-8');
+
+  const result = spawnSync(
+    'psql',
+    [connString],
+    {
+      stdio: ['pipe', 'inherit', 'inherit'],
+      input: sql,
+    }
+  );
+
+  if (result.error) {
+    console.error('psql failed. Ensure psql is installed and in PATH.');
+    console.error(result.error.message);
+    process.exit(1);
+  }
+
+  if (result.status !== 0) {
+    process.exit(1);
+  }
+
+  console.log(`Restored from ${backupPath}`);
+}
+
+async function main() {
+  const { file, yes } = parseArgs();
+
+  if (!file) {
+    console.error('Usage: npm run db:import -- <backup-file> [--yes]');
+    console.error('Example: npm run db:import -- ./data/backups/spanglish-2025-03-07.db');
+    process.exit(1);
+  }
+
+  const backupPath = resolve(process.cwd(), file);
+  if (!existsSync(backupPath)) {
+    console.error(`Backup file not found: ${backupPath}`);
+    process.exit(1);
+  }
+
+  if (!yes) {
+    console.log('WARNING: Import will overwrite the current database.');
+    console.log('Stop the backend server before importing.');
+    console.log('Press Ctrl+C to cancel, or run with --yes to skip this warning.');
+    await new Promise((r) => setTimeout(r, 3000));
+  }
+
+  console.log(`Database type: ${dbType}`);
+  if (dbType === 'sqlite') {
+    importSqlite(backupPath);
+  } else if (dbType === 'postgres') {
+    importPostgres(backupPath);
+  } else {
+    console.error('Unknown DB_TYPE. Use sqlite or postgres.');
+    process.exit(1);
+  }
+  process.exit(0);
+}
+
+main().catch((err) => {
+  console.error('Import failed:', err);
+  process.exit(1);
+});

backend/src/db/index.ts

@@ -1,3 +1,4 @@
+import 'dotenv/config';
 import { drizzle as drizzleSqlite } from 'drizzle-orm/better-sqlite3';
 import { drizzle as drizzlePg } from 'drizzle-orm/node-postgres';
 import Database from 'better-sqlite3';
@@ -29,5 +30,51 @@ if (dbType === 'postgres') {
   db = drizzleSqlite(sqlite, { schema });
 }
 
-export { db };
+// ==================== Database Compatibility Helpers ====================
+// These functions abstract the differences between SQLite and PostgreSQL Drizzle drivers:
+// - SQLite uses .get() for single result, .all() for multiple
+// - PostgreSQL returns arrays directly (no .get()/.all() methods)
+
+/**
+ * Get a single result from a query (works with both SQLite and PostgreSQL)
+ * @param query - A Drizzle query builder (e.g., db.select().from(table).where(...))
+ * @returns The first result or null
+ */
+export async function dbGet<T>(query: any): Promise<T | null> {
+  if (dbType === 'postgres') {
+    const results = await query;
+    return results[0] || null;
+  }
+  // SQLite - use .get()
+  return query.get() || null;
+}
+
+/**
+ * Get all results from a query (works with both SQLite and PostgreSQL)
+ * @param query - A Drizzle query builder (e.g., db.select().from(table).where(...))
+ * @returns Array of results
+ */
+export async function dbAll<T>(query: any): Promise<T[]> {
+  if (dbType === 'postgres') {
+    return await query;
+  }
+  // SQLite - use .all()
+  return query.all();
+}
+
+/**
+ * Check if using PostgreSQL
+ */
+export function isPostgres(): boolean {
+  return dbType === 'postgres';
+}
+
+/**
+ * Check if using SQLite
+ */
+export function isSqlite(): boolean {
+  return dbType === 'sqlite';
+}
+
+export { db, dbType };
 export * from './schema.js';

backend/src/db/migrate.ts

@@ -1,7 +1,10 @@
+import 'dotenv/config';
 import { db } from './index.js';
 import { sql } from 'drizzle-orm';
 
 const dbType = process.env.DB_TYPE || 'sqlite';
+console.log(`Database type: ${dbType}`);
+console.log(`Database URL: ${process.env.DATABASE_URL?.substring(0, 30)}...`);
 
 async function migrate() {
   console.log('Running migrations...');
@@ -166,6 +169,11 @@ async function migrate() {
       await (db as any).run(sql`ALTER TABLE tickets ADD COLUMN checked_in_by_admin_id TEXT REFERENCES users(id)`);
     } catch (e) { /* column may already exist */ }
     
+    // Migration: Add booking_id column to tickets for multi-ticket bookings
+    try {
+      await (db as any).run(sql`ALTER TABLE tickets ADD COLUMN booking_id TEXT`);
+    } catch (e) { /* column may already exist */ }
+    
     // Make attendee_email and attendee_phone nullable (recreate table if needed or just allow nulls for new entries)
     // SQLite doesn't support altering column constraints, so we'll just ensure new entries work
 
@@ -198,6 +206,12 @@ async function migrate() {
     try {
       await (db as any).run(sql`ALTER TABLE payments ADD COLUMN admin_note TEXT`);
     } catch (e) { /* column may already exist */ }
+    try {
+      await (db as any).run(sql`ALTER TABLE payments ADD COLUMN payer_name TEXT`);
+    } catch (e) { /* column may already exist */ }
+    try {
+      await (db as any).run(sql`ALTER TABLE payments ADD COLUMN reminder_sent_at TEXT`);
+    } catch (e) { /* column may already exist */ }
 
     // Invoices table
     await (db as any).run(sql`
@@ -377,6 +391,7 @@ async function migrate() {
         instagram_url TEXT,
         twitter_url TEXT,
         linkedin_url TEXT,
+        featured_event_id TEXT REFERENCES events(id),
         maintenance_mode INTEGER NOT NULL DEFAULT 0,
         maintenance_message TEXT,
         maintenance_message_es TEXT,
@@ -384,6 +399,63 @@ async function migrate() {
         updated_by TEXT REFERENCES users(id)
       )
     `);
+
+    // Add featured_event_id column to site_settings if it doesn't exist
+    try {
+      await (db as any).run(sql`ALTER TABLE site_settings ADD COLUMN featured_event_id TEXT REFERENCES events(id)`);
+    } catch (e) { /* column may already exist */ }
+
+    // Legal pages table for admin-editable legal content
+    await (db as any).run(sql`
+      CREATE TABLE IF NOT EXISTS legal_pages (
+        id TEXT PRIMARY KEY,
+        slug TEXT NOT NULL UNIQUE,
+        title TEXT NOT NULL,
+        title_es TEXT,
+        content_text TEXT NOT NULL,
+        content_text_es TEXT,
+        content_markdown TEXT NOT NULL,
+        content_markdown_es TEXT,
+        updated_at TEXT NOT NULL,
+        updated_by TEXT REFERENCES users(id),
+        created_at TEXT NOT NULL
+      )
+    `);
+
+    // FAQ questions table
+    await (db as any).run(sql`
+      CREATE TABLE IF NOT EXISTS faq_questions (
+        id TEXT PRIMARY KEY,
+        question TEXT NOT NULL,
+        question_es TEXT,
+        answer TEXT NOT NULL,
+        answer_es TEXT,
+        enabled INTEGER NOT NULL DEFAULT 1,
+        show_on_homepage INTEGER NOT NULL DEFAULT 0,
+        rank INTEGER NOT NULL DEFAULT 0,
+        created_at TEXT NOT NULL,
+        updated_at TEXT NOT NULL
+      )
+    `);
+
+    // Legal settings table for legal page placeholder values
+    await (db as any).run(sql`
+      CREATE TABLE IF NOT EXISTS legal_settings (
+        id TEXT PRIMARY KEY,
+        company_name TEXT,
+        legal_entity_name TEXT,
+        ruc_number TEXT,
+        company_address TEXT,
+        company_city TEXT,
+        company_country TEXT,
+        support_email TEXT,
+        legal_email TEXT,
+        governing_law TEXT,
+        jurisdiction_city TEXT,
+        updated_at TEXT NOT NULL,
+        updated_by TEXT REFERENCES users(id)
+      )
+    `);
   } else {
     // PostgreSQL migrations
     await (db as any).execute(sql`
@@ -515,6 +587,11 @@ async function migrate() {
       await (db as any).execute(sql`ALTER TABLE tickets ADD COLUMN checked_in_by_admin_id UUID REFERENCES users(id)`);
     } catch (e) { /* column may already exist */ }
     
+    // Migration: Add booking_id column to tickets for multi-ticket bookings
+    try {
+      await (db as any).execute(sql`ALTER TABLE tickets ADD COLUMN booking_id UUID`);
+    } catch (e) { /* column may already exist */ }
+
     await (db as any).execute(sql`
       CREATE TABLE IF NOT EXISTS payments (
         id UUID PRIMARY KEY,
@@ -525,6 +602,7 @@ async function migrate() {
         status VARCHAR(20) NOT NULL DEFAULT 'pending',
         reference VARCHAR(255),
         user_marked_paid_at TIMESTAMP,
+        payer_name VARCHAR(255),
         paid_at TIMESTAMP,
         paid_by_admin_id UUID,
         admin_note TEXT,
@@ -533,6 +611,14 @@ async function migrate() {
       )
     `);
     
+    // Add payer_name column if it doesn't exist
+    try {
+      await (db as any).execute(sql`ALTER TABLE payments ADD COLUMN payer_name VARCHAR(255)`);
+    } catch (e) { /* column may already exist */ }
+    try {
+      await (db as any).execute(sql`ALTER TABLE payments ADD COLUMN reminder_sent_at TIMESTAMP`);
+    } catch (e) { /* column may already exist */ }
+
     // Invoices table
     await (db as any).execute(sql`
       CREATE TABLE IF NOT EXISTS invoices (
@@ -709,6 +795,7 @@ async function migrate() {
         instagram_url VARCHAR(500),
         twitter_url VARCHAR(500),
         linkedin_url VARCHAR(500),
+        featured_event_id UUID REFERENCES events(id),
         maintenance_mode INTEGER NOT NULL DEFAULT 0,
         maintenance_message TEXT,
         maintenance_message_es TEXT,
@@ -716,6 +803,63 @@ async function migrate() {
         updated_by UUID REFERENCES users(id)
       )
     `);
+
+    // Add featured_event_id column to site_settings if it doesn't exist
+    try {
+      await (db as any).execute(sql`ALTER TABLE site_settings ADD COLUMN featured_event_id UUID REFERENCES events(id)`);
+    } catch (e) { /* column may already exist */ }
+
+    // Legal pages table for admin-editable legal content
+    await (db as any).execute(sql`
+      CREATE TABLE IF NOT EXISTS legal_pages (
+        id UUID PRIMARY KEY,
+        slug VARCHAR(100) NOT NULL UNIQUE,
+        title VARCHAR(255) NOT NULL,
+        title_es VARCHAR(255),
+        content_text TEXT NOT NULL,
+        content_text_es TEXT,
+        content_markdown TEXT NOT NULL,
+        content_markdown_es TEXT,
+        updated_at TIMESTAMP NOT NULL,
+        updated_by UUID REFERENCES users(id),
+        created_at TIMESTAMP NOT NULL
+      )
+    `);
+
+    // FAQ questions table
+    await (db as any).execute(sql`
+      CREATE TABLE IF NOT EXISTS faq_questions (
+        id UUID PRIMARY KEY,
+        question TEXT NOT NULL,
+        question_es TEXT,
+        answer TEXT NOT NULL,
+        answer_es TEXT,
+        enabled INTEGER NOT NULL DEFAULT 1,
+        show_on_homepage INTEGER NOT NULL DEFAULT 0,
+        rank INTEGER NOT NULL DEFAULT 0,
+        created_at TIMESTAMP NOT NULL,
+        updated_at TIMESTAMP NOT NULL
+      )
+    `);
+
+    // Legal settings table for legal page placeholder values
+    await (db as any).execute(sql`
+      CREATE TABLE IF NOT EXISTS legal_settings (
+        id UUID PRIMARY KEY,
+        company_name VARCHAR(255),
+        legal_entity_name VARCHAR(255),
+        ruc_number VARCHAR(50),
+        company_address TEXT,
+        company_city VARCHAR(100),
+        company_country VARCHAR(100),
+        support_email VARCHAR(255),
+        legal_email VARCHAR(255),
+        governing_law VARCHAR(255),
+        jurisdiction_city VARCHAR(100),
+        updated_at TIMESTAMP NOT NULL,
+        updated_by UUID REFERENCES users(id)
+      )
+    `);
   }
 
   console.log('Migrations completed successfully!');

backend/src/db/schema.ts

@@ -75,7 +75,7 @@ export const sqliteEvents = sqliteTable('events', {
   price: real('price').notNull().default(0),
   currency: text('currency').notNull().default('PYG'),
   capacity: integer('capacity').notNull().default(50),
-  status: text('status', { enum: ['draft', 'published', 'cancelled', 'completed', 'archived'] }).notNull().default('draft'),
+  status: text('status', { enum: ['draft', 'published', 'unlisted', 'cancelled', 'completed', 'archived'] }).notNull().default('draft'),
   bannerUrl: text('banner_url'),
   externalBookingEnabled: integer('external_booking_enabled', { mode: 'boolean' }).notNull().default(false),
   externalBookingUrl: text('external_booking_url'),
@@ -85,6 +85,7 @@ export const sqliteEvents = sqliteTable('events', {
 
 export const sqliteTickets = sqliteTable('tickets', {
   id: text('id').primaryKey(),
+  bookingId: text('booking_id'), // Groups multiple tickets from same booking
   userId: text('user_id').notNull().references(() => sqliteUsers.id),
   eventId: text('event_id').notNull().references(() => sqliteEvents.id),
   attendeeFirstName: text('attendee_first_name').notNull(),
@@ -110,9 +111,11 @@ export const sqlitePayments = sqliteTable('payments', {
   status: text('status', { enum: ['pending', 'pending_approval', 'paid', 'refunded', 'failed', 'cancelled'] }).notNull().default('pending'),
   reference: text('reference'),
   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'),
   paidByAdminId: text('paid_by_admin_id'),
   adminNote: text('admin_note'), // Internal admin notes
+  reminderSentAt: text('reminder_sent_at'), // When payment reminder email was sent
   createdAt: text('created_at').notNull(),
   updatedAt: text('updated_at').notNull(),
 });
@@ -249,6 +252,52 @@ export const sqliteEmailSettings = sqliteTable('email_settings', {
   updatedAt: text('updated_at').notNull(),
 });
 
+// Legal Pages table for admin-editable legal content
+export const sqliteLegalPages = sqliteTable('legal_pages', {
+  id: text('id').primaryKey(),
+  slug: text('slug').notNull().unique(),
+  title: text('title').notNull(), // English title
+  titleEs: text('title_es'), // Spanish title
+  contentText: text('content_text').notNull(), // Plain text edited by admin (English)
+  contentTextEs: text('content_text_es'), // Plain text edited by admin (Spanish)
+  contentMarkdown: text('content_markdown').notNull(), // Generated markdown for public display (English)
+  contentMarkdownEs: text('content_markdown_es'), // Generated markdown for public display (Spanish)
+  updatedAt: text('updated_at').notNull(),
+  updatedBy: text('updated_by').references(() => sqliteUsers.id),
+  createdAt: text('created_at').notNull(),
+});
+
+// FAQ questions table (admin-managed, shown on /faq and optionally on homepage)
+export const sqliteFaqQuestions = sqliteTable('faq_questions', {
+  id: text('id').primaryKey(),
+  question: text('question').notNull(),
+  questionEs: text('question_es'),
+  answer: text('answer').notNull(),
+  answerEs: text('answer_es'),
+  enabled: integer('enabled', { mode: 'boolean' }).notNull().default(true),
+  showOnHomepage: integer('show_on_homepage', { mode: 'boolean' }).notNull().default(false),
+  rank: integer('rank').notNull().default(0),
+  createdAt: text('created_at').notNull(),
+  updatedAt: text('updated_at').notNull(),
+});
+
+// Legal Settings table for legal page placeholder values
+export const sqliteLegalSettings = sqliteTable('legal_settings', {
+  id: text('id').primaryKey(),
+  companyName: text('company_name'),
+  legalEntityName: text('legal_entity_name'),
+  rucNumber: text('ruc_number'),
+  companyAddress: text('company_address'),
+  companyCity: text('company_city'),
+  companyCountry: text('company_country'),
+  supportEmail: text('support_email'),
+  legalEmail: text('legal_email'),
+  governingLaw: text('governing_law'),
+  jurisdictionCity: text('jurisdiction_city'),
+  updatedAt: text('updated_at').notNull(),
+  updatedBy: text('updated_by').references(() => sqliteUsers.id),
+});
+
 // Site Settings table for global website configuration
 export const sqliteSiteSettings = sqliteTable('site_settings', {
   id: text('id').primaryKey(),
@@ -266,6 +315,8 @@ export const sqliteSiteSettings = sqliteTable('site_settings', {
   instagramUrl: text('instagram_url'),
   twitterUrl: text('twitter_url'),
   linkedinUrl: text('linkedin_url'),
+  // Featured event - manually promoted event shown on homepage/linktree
+  featuredEventId: text('featured_event_id').references(() => sqliteEvents.id),
   // Other settings
   maintenanceMode: integer('maintenance_mode', { mode: 'boolean' }).notNull().default(false),
   maintenanceMessage: text('maintenance_message'),
@@ -356,6 +407,7 @@ export const pgEvents = pgTable('events', {
 
 export const pgTickets = pgTable('tickets', {
   id: uuid('id').primaryKey(),
+  bookingId: uuid('booking_id'), // Groups multiple tickets from same booking
   userId: uuid('user_id').notNull().references(() => pgUsers.id),
   eventId: uuid('event_id').notNull().references(() => pgEvents.id),
   attendeeFirstName: varchar('attendee_first_name', { length: 255 }).notNull(),
@@ -381,9 +433,11 @@ export const pgPayments = pgTable('payments', {
   status: varchar('status', { length: 20 }).notNull().default('pending'),
   reference: varchar('reference', { length: 255 }),
   userMarkedPaidAt: timestamp('user_marked_paid_at'),
+  payerName: varchar('payer_name', { length: 255 }), // Name of payer if different from attendee
   paidAt: timestamp('paid_at'),
   paidByAdminId: uuid('paid_by_admin_id'),
   adminNote: pgText('admin_note'),
+  reminderSentAt: timestamp('reminder_sent_at'), // When payment reminder email was sent
   createdAt: timestamp('created_at').notNull(),
   updatedAt: timestamp('updated_at').notNull(),
 });
@@ -512,6 +566,52 @@ export const pgEmailSettings = pgTable('email_settings', {
   updatedAt: timestamp('updated_at').notNull(),
 });
 
+// Legal Pages table for admin-editable legal content
+export const pgLegalPages = pgTable('legal_pages', {
+  id: uuid('id').primaryKey(),
+  slug: varchar('slug', { length: 100 }).notNull().unique(),
+  title: varchar('title', { length: 255 }).notNull(), // English title
+  titleEs: varchar('title_es', { length: 255 }), // Spanish title
+  contentText: pgText('content_text').notNull(), // Plain text edited by admin (English)
+  contentTextEs: pgText('content_text_es'), // Plain text edited by admin (Spanish)
+  contentMarkdown: pgText('content_markdown').notNull(), // Generated markdown for public display (English)
+  contentMarkdownEs: pgText('content_markdown_es'), // Generated markdown for public display (Spanish)
+  updatedAt: timestamp('updated_at').notNull(),
+  updatedBy: uuid('updated_by').references(() => pgUsers.id),
+  createdAt: timestamp('created_at').notNull(),
+});
+
+// FAQ questions table (admin-managed)
+export const pgFaqQuestions = pgTable('faq_questions', {
+  id: uuid('id').primaryKey(),
+  question: pgText('question').notNull(),
+  questionEs: pgText('question_es'),
+  answer: pgText('answer').notNull(),
+  answerEs: pgText('answer_es'),
+  enabled: pgInteger('enabled').notNull().default(1),
+  showOnHomepage: pgInteger('show_on_homepage').notNull().default(0),
+  rank: pgInteger('rank').notNull().default(0),
+  createdAt: timestamp('created_at').notNull(),
+  updatedAt: timestamp('updated_at').notNull(),
+});
+
+// Legal Settings table for legal page placeholder values
+export const pgLegalSettings = pgTable('legal_settings', {
+  id: uuid('id').primaryKey(),
+  companyName: varchar('company_name', { length: 255 }),
+  legalEntityName: varchar('legal_entity_name', { length: 255 }),
+  rucNumber: varchar('ruc_number', { length: 50 }),
+  companyAddress: pgText('company_address'),
+  companyCity: varchar('company_city', { length: 100 }),
+  companyCountry: varchar('company_country', { length: 100 }),
+  supportEmail: varchar('support_email', { length: 255 }),
+  legalEmail: varchar('legal_email', { length: 255 }),
+  governingLaw: varchar('governing_law', { length: 255 }),
+  jurisdictionCity: varchar('jurisdiction_city', { length: 100 }),
+  updatedAt: timestamp('updated_at').notNull(),
+  updatedBy: uuid('updated_by').references(() => pgUsers.id),
+});
+
 // Site Settings table for global website configuration
 export const pgSiteSettings = pgTable('site_settings', {
   id: uuid('id').primaryKey(),
@@ -529,6 +629,8 @@ export const pgSiteSettings = pgTable('site_settings', {
   instagramUrl: varchar('instagram_url', { length: 500 }),
   twitterUrl: varchar('twitter_url', { length: 500 }),
   linkedinUrl: varchar('linkedin_url', { length: 500 }),
+  // Featured event - manually promoted event shown on homepage/linktree
+  featuredEventId: uuid('featured_event_id').references(() => pgEvents.id),
   // Other settings
   maintenanceMode: pgInteger('maintenance_mode').notNull().default(0),
   maintenanceMessage: pgText('maintenance_message'),
@@ -555,7 +657,10 @@ export const eventPaymentOverrides = dbType === 'postgres' ? pgEventPaymentOverr
 export const magicLinkTokens = dbType === 'postgres' ? pgMagicLinkTokens : sqliteMagicLinkTokens;
 export const userSessions = dbType === 'postgres' ? pgUserSessions : sqliteUserSessions;
 export const invoices = dbType === 'postgres' ? pgInvoices : sqliteInvoices;
+export const legalSettings = dbType === 'postgres' ? pgLegalSettings : sqliteLegalSettings;
 export const siteSettings = dbType === 'postgres' ? pgSiteSettings : sqliteSiteSettings;
+export const legalPages = dbType === 'postgres' ? pgLegalPages : sqliteLegalPages;
+export const faqQuestions = dbType === 'postgres' ? pgFaqQuestions : sqliteFaqQuestions;
 
 // Type exports
 export type User = typeof sqliteUsers.$inferSelect;
@@ -584,3 +689,9 @@ export type Invoice = typeof sqliteInvoices.$inferSelect;
 export type NewInvoice = typeof sqliteInvoices.$inferInsert;
 export type SiteSettings = typeof sqliteSiteSettings.$inferSelect;
 export type NewSiteSettings = typeof sqliteSiteSettings.$inferInsert;
+export type LegalPage = typeof sqliteLegalPages.$inferSelect;
+export type NewLegalPage = typeof sqliteLegalPages.$inferInsert;
+export type FaqQuestion = typeof sqliteFaqQuestions.$inferSelect;
+export type NewFaqQuestion = typeof sqliteFaqQuestions.$inferInsert;
+export type LegalSettings = typeof sqliteLegalSettings.$inferSelect;
+export type NewLegalSettings = typeof sqliteLegalSettings.$inferInsert;

backend/src/index.ts

@@ -20,7 +20,11 @@ import emailsRoutes from './routes/emails.js';
 import paymentOptionsRoutes from './routes/payment-options.js';
 import dashboardRoutes from './routes/dashboard.js';
 import siteSettingsRoutes from './routes/site-settings.js';
+import legalPagesRoutes from './routes/legal-pages.js';
+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';
 
 const app = new Hono();
 
@@ -83,6 +87,7 @@ const openApiSpec = {
     { name: 'Media', description: 'File uploads and media management' },
     { name: 'Lightning', description: 'Lightning/Bitcoin payments via LNBits' },
     { name: 'Admin', description: 'Admin dashboard and analytics' },
+    { name: 'FAQ', description: 'FAQ questions (public and admin)' },
   ],
   paths: {
     // ==================== Auth Endpoints ====================
@@ -1586,6 +1591,144 @@ const openApiSpec = {
         },
       },
     },
+
+    // ==================== FAQ Endpoints ====================
+    '/api/faq': {
+      get: {
+        tags: ['FAQ'],
+        summary: 'Get FAQ list (public)',
+        description: 'Returns enabled FAQ questions, ordered by rank. Use ?homepage=true to get only questions enabled for homepage.',
+        parameters: [
+          { name: 'homepage', in: 'query', schema: { type: 'boolean' }, description: 'If true, only return questions with showOnHomepage' },
+        ],
+        responses: {
+          200: { description: 'List of FAQ items (id, question, questionEs, answer, answerEs, rank)' },
+        },
+      },
+    },
+    '/api/faq/admin/list': {
+      get: {
+        tags: ['FAQ'],
+        summary: 'Get all FAQ questions (admin)',
+        description: 'Returns all FAQ questions for management, ordered by rank.',
+        security: [{ bearerAuth: [] }],
+        responses: {
+          200: { description: 'List of all FAQ questions' },
+          401: { description: 'Unauthorized' },
+        },
+      },
+    },
+    '/api/faq/admin/:id': {
+      get: {
+        tags: ['FAQ'],
+        summary: 'Get FAQ by ID (admin)',
+        security: [{ bearerAuth: [] }],
+        parameters: [
+          { name: 'id', in: 'path', required: true, schema: { type: 'string' } },
+        ],
+        responses: {
+          200: { description: 'FAQ details' },
+          404: { description: 'FAQ not found' },
+        },
+      },
+      put: {
+        tags: ['FAQ'],
+        summary: 'Update FAQ (admin)',
+        security: [{ bearerAuth: [] }],
+        parameters: [
+          { name: 'id', in: 'path', required: true, schema: { type: 'string' } },
+        ],
+        requestBody: {
+          content: {
+            'application/json': {
+              schema: {
+                type: 'object',
+                properties: {
+                  question: { type: 'string' },
+                  questionEs: { type: 'string' },
+                  answer: { type: 'string' },
+                  answerEs: { type: 'string' },
+                  enabled: { type: 'boolean' },
+                  showOnHomepage: { type: 'boolean' },
+                },
+              },
+            },
+          },
+        },
+        responses: {
+          200: { description: 'FAQ updated' },
+          404: { description: 'FAQ not found' },
+        },
+      },
+      delete: {
+        tags: ['FAQ'],
+        summary: 'Delete FAQ (admin)',
+        security: [{ bearerAuth: [] }],
+        parameters: [
+          { name: 'id', in: 'path', required: true, schema: { type: 'string' } },
+        ],
+        responses: {
+          200: { description: 'FAQ deleted' },
+          404: { description: 'FAQ not found' },
+        },
+      },
+    },
+    '/api/faq/admin': {
+      post: {
+        tags: ['FAQ'],
+        summary: 'Create FAQ (admin)',
+        security: [{ bearerAuth: [] }],
+        requestBody: {
+          required: true,
+          content: {
+            'application/json': {
+              schema: {
+                type: 'object',
+                required: ['question', 'answer'],
+                properties: {
+                  question: { type: 'string' },
+                  questionEs: { type: 'string' },
+                  answer: { type: 'string' },
+                  answerEs: { type: 'string' },
+                  enabled: { type: 'boolean', default: true },
+                  showOnHomepage: { type: 'boolean', default: false },
+                },
+              },
+            },
+          },
+        },
+        responses: {
+          201: { description: 'FAQ created' },
+          400: { description: 'Validation error' },
+        },
+      },
+    },
+    '/api/faq/admin/reorder': {
+      post: {
+        tags: ['FAQ'],
+        summary: 'Reorder FAQ questions (admin)',
+        description: 'Set order by sending an ordered array of FAQ ids.',
+        security: [{ bearerAuth: [] }],
+        requestBody: {
+          required: true,
+          content: {
+            'application/json': {
+              schema: {
+                type: 'object',
+                required: ['ids'],
+                properties: {
+                  ids: { type: 'array', items: { type: 'string' } },
+                },
+              },
+            },
+          },
+        },
+        responses: {
+          200: { description: 'Order updated, returns full FAQ list' },
+          400: { description: 'ids array required' },
+        },
+      },
+    },
   },
   components: {
     securitySchemes: {
@@ -1714,6 +1857,9 @@ app.route('/api/emails', emailsRoutes);
 app.route('/api/payment-options', paymentOptionsRoutes);
 app.route('/api/dashboard', dashboardRoutes);
 app.route('/api/site-settings', siteSettingsRoutes);
+app.route('/api/legal-pages', legalPagesRoutes);
+app.route('/api/legal-settings', legalSettingsRoutes);
+app.route('/api/faq', faqRoutes);
 
 // 404 handler
 app.notFound((c) => {
@@ -1728,6 +1874,9 @@ app.onError((err, c) => {
 
 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);

backend/src/lib/auth.ts

@@ -3,9 +3,9 @@ import * as argon2 from 'argon2';
 import bcrypt from 'bcryptjs';
 import crypto from 'crypto';
 import { Context } from 'hono';
-import { db, users, magicLinkTokens, userSessions } from '../db/index.js';
+import { db, dbGet, dbAll, users, magicLinkTokens, userSessions } from '../db/index.js';
 import { eq, and, gt } from 'drizzle-orm';
-import { generateId, getNow } from './utils.js';
+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 JWT_ISSUER = 'spanglish';
@@ -51,7 +51,7 @@ export async function createMagicLinkToken(
 ): Promise<string> {
   const token = generateSecureToken();
   const now = getNow();
-  const expiresAt = new Date(Date.now() + expiresInMinutes * 60 * 1000).toISOString();
+  const expiresAt = toDbDate(new Date(Date.now() + expiresInMinutes * 60 * 1000));
 
   await (db as any).insert(magicLinkTokens).values({
     id: generateId(),
@@ -72,7 +72,8 @@ export async function verifyMagicLinkToken(
 ): Promise<{ valid: boolean; userId?: string; error?: string }> {
   const now = getNow();
   
-  const tokenRecord = await (db as any)
+  const tokenRecord = await dbGet<any>(
+    (db as any)
       .select()
       .from(magicLinkTokens)
       .where(
@@ -81,7 +82,7 @@ export async function verifyMagicLinkToken(
           eq((magicLinkTokens as any).type, type)
         )
       )
-    .get();
+  );
 
   if (!tokenRecord) {
     return { valid: false, error: 'Invalid token' };
@@ -112,7 +113,7 @@ export async function createUserSession(
 ): Promise<string> {
   const sessionToken = generateSecureToken();
   const now = getNow();
-  const expiresAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(); // 30 days
+  const expiresAt = toDbDate(new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)); // 30 days
 
   await (db as any).insert(userSessions).values({
     id: generateId(),
@@ -132,7 +133,8 @@ export async function createUserSession(
 export async function getUserSessions(userId: string) {
   const now = getNow();
   
-  return (db as any)
+  return dbAll(
+    (db as any)
       .select()
       .from(userSessions)
       .where(
@@ -141,7 +143,7 @@ export async function getUserSessions(userId: string) {
           gt((userSessions as any).expiresAt, now)
         )
       )
-    .all();
+  );
 }
 
 // Invalidate a specific session
@@ -208,7 +210,7 @@ export async function verifyToken(token: string): Promise<JWTPayload | null> {
   }
 }
 
-export async function getAuthUser(c: Context) {
+export async function getAuthUser(c: Context): Promise<any | null> {
   const authHeader = c.req.header('Authorization');
   if (!authHeader?.startsWith('Bearer ')) {
     return null;
@@ -221,7 +223,9 @@ export async function getAuthUser(c: Context) {
     return null;
   }
   
-  const user = await (db as any).select().from(users).where(eq((users as any).id, payload.sub)).get();
+  const user = await dbGet<any>(
+    (db as any).select().from(users).where(eq((users as any).id, payload.sub))
+  );
   return user || null;
 }
 
@@ -243,6 +247,8 @@ export function requireAuth(roles?: string[]) {
 }
 
 export async function isFirstUser(): Promise<boolean> {
-  const result = await (db as any).select().from(users).limit(1).all();
+  const result = await dbAll(
+    (db as any).select().from(users).limit(1)
+  );
   return !result || result.length === 0;
 }

backend/src/lib/email.ts

@@ -1,16 +1,16 @@
 // Email service for Spanglish platform
 // Supports multiple email providers: Resend, SMTP (Nodemailer)
 
-import { db, emailTemplates, emailLogs, events, tickets, payments, users, paymentOptions, eventPaymentOverrides } from '../db/index.js';
+import { db, dbGet, dbAll, emailTemplates, emailLogs, events, tickets, payments, users, paymentOptions, eventPaymentOverrides, siteSettings } from '../db/index.js';
 import { eq, and } from 'drizzle-orm';
-import { nanoid } from 'nanoid';
+import { getNow, generateId } from './utils.js';
-import { getNow } from './utils.js';
 import { 
   replaceTemplateVariables, 
   wrapInBaseTemplate, 
   defaultTemplates,
   type DefaultTemplate 
 } from './emailTemplates.js';
+import { enqueueBulkEmails, type TemplateEmailJobParams } from './emailQueue.js';
 import nodemailer from 'nodemailer';
 import type { Transporter } from 'nodemailer';
 
@@ -325,26 +325,38 @@ export const emailService = {
   },
   
   /**
-   * Format date for emails
+   * Get the site timezone from settings (cached for performance)
    */
-  formatDate(dateStr: string, locale: string = 'en'): string {
+  async getSiteTimezone(): Promise<string> {
+    const settings = await dbGet<any>(
+      (db as any).select().from(siteSettings).limit(1)
+    );
+    return settings?.timezone || 'America/Asuncion';
+  },
+  
+  /**
+   * Format date for emails using site timezone
+   */
+  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
+   * Format time for emails using site timezone
    */
-  formatTime(dateStr: string, locale: string = 'en'): string {
+  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,
     });
   },
   
@@ -362,11 +374,12 @@ export const emailService = {
    * Get a template by slug
    */
   async getTemplate(slug: string): Promise<any | null> {
-    const template = await (db as any)
+    const template = await dbGet(
+      (db as any)
         .select()
         .from(emailTemplates)
         .where(eq((emailTemplates as any).slug, slug))
-      .get();
+    );
     
     return template || null;
   },
@@ -385,7 +398,7 @@ export const emailService = {
         console.log(`[Email] Creating template: ${template.name}`);
         
         await (db as any).insert(emailTemplates).values({
-          id: nanoid(),
+          id: generateId(),
           name: template.name,
           slug: template.slug,
           subject: template.subject,
@@ -470,7 +483,7 @@ export const emailService = {
     const finalBodyText = bodyText ? replaceTemplateVariables(bodyText, allVariables) : undefined;
     
     // Create log entry
-    const logId = nanoid();
+    const logId = generateId();
     const now = getNow();
     
     await (db as any).insert(emailLogs).values({
@@ -522,37 +535,66 @@ export const emailService = {
   
   /**
    * Send booking confirmation email
+   * Supports multi-ticket bookings - includes all tickets in the booking
    */
   async sendBookingConfirmation(ticketId: string): Promise<{ success: boolean; error?: string }> {
     // Get ticket with event info
-    const ticket = await (db as any)
+    const ticket = await dbGet<any>(
+      (db as any)
         .select()
         .from(tickets)
         .where(eq((tickets as any).id, ticketId))
-      .get();
+    );
     
     if (!ticket) {
       return { success: false, error: 'Ticket not found' };
     }
     
-    const event = await (db as any)
+    const event = await dbGet<any>(
+      (db as any)
         .select()
         .from(events)
         .where(eq((events as any).id, ticket.eventId))
-      .get();
+    );
     
     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
+    // Generate ticket PDF URL (primary ticket, or use combined endpoint for multi)
     const apiUrl = process.env.API_URL || 'http://localhost:3001';
-    const ticketPdfUrl = `${apiUrl}/api/tickets/${ticket.id}/pdf`;
+    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 this.getSiteTimezone();
+    
     return this.sendTemplateEmail({
       templateSlug: 'booking-confirmation',
       to: ticket.attendeeEmail,
@@ -563,14 +605,20 @@ export const emailService = {
         attendeeName: attendeeFullName,
         attendeeEmail: ticket.attendeeEmail,
         ticketId: ticket.id,
+        bookingId: ticket.bookingId || ticket.id,
         qrCode: ticket.qrCode || '',
         ticketPdfUrl,
         eventTitle,
-        eventDate: this.formatDate(event.startDatetime, locale),
+        eventDate: this.formatDate(event.startDatetime, locale, timezone),
-        eventTime: this.formatTime(event.startDatetime, locale),
+        eventTime: this.formatTime(event.startDatetime, locale, timezone),
         eventLocation: event.location,
         eventLocationUrl: event.locationUrl || '',
         eventPrice: this.formatCurrency(event.price, event.currency),
+        // Multi-ticket specific variables
+        ticketCount: ticketCount.toString(),
+        totalPrice: this.formatCurrency(totalPrice, event.currency),
+        attendeeNames,
+        isMultiTicket: ticketCount > 1 ? 'true' : 'false',
       },
     });
   },
@@ -580,45 +628,84 @@ export const emailService = {
    */
   async sendPaymentReceipt(paymentId: string): Promise<{ success: boolean; error?: string }> {
     // Get payment with ticket and event info
-    const payment = await (db as any)
+    const payment = await dbGet<any>(
+      (db as any)
         .select()
         .from(payments)
         .where(eq((payments as any).id, paymentId))
-      .get();
+    );
     
     if (!payment) {
       return { success: false, error: 'Payment not found' };
     }
     
-    const ticket = await (db as any)
+    const ticket = await dbGet<any>(
+      (db as any)
         .select()
         .from(tickets)
         .where(eq((tickets as any).id, payment.ticketId))
-      .get();
+    );
     
     if (!ticket) {
       return { success: false, error: 'Ticket not found' };
     }
     
-    const event = await (db as any)
+    const event = await dbGet<any>(
+      (db as any)
         .select()
         .from(events)
         .where(eq((events as any).id, ticket.eventId))
-      .get();
+    );
     
     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' },
+      en: { bancard: 'Card', lightning: 'Lightning (Bitcoin)', cash: 'Cash', bank_transfer: 'Bank Transfer', tpago: 'TPago' },
-      es: { bancard: 'Tarjeta', lightning: 'Lightning (Bitcoin)', cash: 'Efectivo' },
+      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 
+      ? `${this.formatCurrency(totalAmount, payment.currency)} (${ticketCount} tickets)`
+      : this.formatCurrency(totalAmount, payment.currency);
+    
+    // Get site timezone for proper date/time formatting
+    const timezone = await this.getSiteTimezone();
+    
     return this.sendTemplateEmail({
       templateSlug: 'payment-receipt',
       to: ticket.attendeeEmail,
@@ -627,13 +714,13 @@ export const emailService = {
       eventId: event.id,
       variables: {
         attendeeName: receiptFullName,
-        ticketId: ticket.id,
+        ticketId: ticket.bookingId || ticket.id,
         eventTitle,
-        eventDate: this.formatDate(event.startDatetime, locale),
+        eventDate: this.formatDate(event.startDatetime, locale, timezone),
-        paymentAmount: this.formatCurrency(payment.amount, payment.currency),
+        paymentAmount: amountDisplay,
         paymentMethod: paymentMethodNames[locale]?.[payment.provider] || payment.provider,
         paymentReference: payment.reference || payment.id,
-        paymentDate: this.formatDate(payment.paidAt || payment.createdAt, locale),
+        paymentDate: this.formatDate(payment.paidAt || payment.createdAt, locale, timezone),
       },
     });
   },
@@ -643,17 +730,19 @@ export const emailService = {
    */
   async getPaymentConfig(eventId: string): Promise<Record<string, any>> {
     // Get global options
-    const globalOptions = await (db as any)
+    const globalOptions = await dbGet<any>(
+      (db as any)
         .select()
         .from(paymentOptions)
-      .get();
+    );
 
     // Get event overrides
-    const overrides = await (db as any)
+    const overrides = await dbGet<any>(
+      (db as any)
         .select()
         .from(eventPaymentOverrides)
         .where(eq((eventPaymentOverrides as any).eventId, eventId))
-      .get();
+    );
 
     // Defaults
     const defaults = {
@@ -696,33 +785,36 @@ export const emailService = {
    */
   async sendPaymentInstructions(ticketId: string): Promise<{ success: boolean; error?: string }> {
     // Get ticket
-    const ticket = await (db as any)
+    const ticket = await dbGet<any>(
+      (db as any)
         .select()
         .from(tickets)
         .where(eq((tickets as any).id, ticketId))
-      .get();
+    );
 
     if (!ticket) {
       return { success: false, error: 'Ticket not found' };
     }
 
     // Get event
-    const event = await (db as any)
+    const event = await dbGet<any>(
+      (db as any)
         .select()
         .from(events)
         .where(eq((events as any).id, ticket.eventId))
-      .get();
+    );
 
     if (!event) {
       return { success: false, error: 'Event not found' };
     }
 
     // Get payment
-    const payment = await (db as any)
+    const payment = await dbGet<any>(
+      (db as any)
         .select()
         .from(payments)
         .where(eq((payments as any).ticketId, ticketId))
-      .get();
+    );
 
     if (!payment) {
       return { success: false, error: 'Payment not found' };
@@ -740,8 +832,24 @@ export const emailService = {
     const eventTitle = locale === 'es' && event.titleEs ? event.titleEs : event.title;
     const attendeeFullName = `${ticket.attendeeFirstName} ${ticket.attendeeLastName || ''}`.trim();
 
-    // Generate a payment reference using ticket ID
+    // Calculate total price for multi-ticket bookings
-    const paymentReference = `SPG-${ticket.id.substring(0, 8).toUpperCase()}`;
+    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';
@@ -752,17 +860,25 @@ export const emailService = {
       ? 'payment-instructions-tpago' 
       : 'payment-instructions-bank-transfer';
 
+    // Format amount with ticket count info for multi-ticket bookings
+    const amountDisplay = ticketCount > 1 
+      ? `${this.formatCurrency(totalPrice, event.currency)} (${ticketCount} tickets)`
+      : this.formatCurrency(totalPrice, event.currency);
+
+    // Get site timezone for proper date/time formatting
+    const timezone = await this.getSiteTimezone();
+
     // Build variables based on payment method
     const variables: Record<string, any> = {
       attendeeName: attendeeFullName,
       attendeeEmail: ticket.attendeeEmail,
-      ticketId: ticket.id,
+      ticketId: ticket.bookingId || ticket.id,
       eventTitle,
-      eventDate: this.formatDate(event.startDatetime, locale),
+      eventDate: this.formatDate(event.startDatetime, locale, timezone),
-      eventTime: this.formatTime(event.startDatetime, locale),
+      eventTime: this.formatTime(event.startDatetime, locale, timezone),
       eventLocation: event.location,
       eventLocationUrl: event.locationUrl || '',
-      paymentAmount: this.formatCurrency(event.price, event.currency),
+      paymentAmount: amountDisplay,
       paymentReference,
       bookingUrl,
     };
@@ -797,33 +913,36 @@ export const emailService = {
    */
   async sendPaymentRejectionEmail(paymentId: string): Promise<{ success: boolean; error?: string }> {
     // Get payment
-    const payment = await (db as any)
+    const payment = await dbGet<any>(
+      (db as any)
         .select()
         .from(payments)
         .where(eq((payments as any).id, paymentId))
-      .get();
+    );
 
     if (!payment) {
       return { success: false, error: 'Payment not found' };
     }
 
     // Get ticket
-    const ticket = await (db as any)
+    const ticket = await dbGet<any>(
+      (db as any)
         .select()
         .from(tickets)
         .where(eq((tickets as any).id, payment.ticketId))
-      .get();
+    );
 
     if (!ticket) {
       return { success: false, error: 'Ticket not found' };
     }
 
     // Get event
-    const event = await (db as any)
+    const event = await dbGet<any>(
+      (db as any)
         .select()
         .from(events)
         .where(eq((events as any).id, ticket.eventId))
-      .get();
+    );
 
     if (!event) {
       return { success: false, error: 'Event not found' };
@@ -837,6 +956,9 @@ export const emailService = {
     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 this.getSiteTimezone();
+
     console.log(`[Email] Sending payment rejection email to ${ticket.attendeeEmail}`);
 
     return this.sendTemplateEmail({
@@ -850,8 +972,8 @@ export const emailService = {
         attendeeEmail: ticket.attendeeEmail,
         ticketId: ticket.id,
         eventTitle,
-        eventDate: this.formatDate(event.startDatetime, locale),
+        eventDate: this.formatDate(event.startDatetime, locale, timezone),
-        eventTime: this.formatTime(event.startDatetime, locale),
+        eventTime: this.formatTime(event.startDatetime, locale, timezone),
         eventLocation: event.location,
         eventLocationUrl: event.locationUrl || '',
         newBookingUrl,
@@ -859,6 +981,106 @@ export const emailService = {
     });
   },
 
+  /**
+   * Send payment reminder email
+   * This email is sent when admin wants to remind attendee about pending payment
+   */
+  async 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 
+      ? `${this.formatCurrency(totalPrice, event.currency)} (${ticketCount} tickets)`
+      : this.formatCurrency(totalPrice, event.currency);
+
+    // Get site timezone for proper date/time formatting
+    const timezone = await this.getSiteTimezone();
+
+    console.log(`[Email] Sending payment reminder email to ${ticket.attendeeEmail}`);
+
+    return this.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: this.formatDate(event.startDatetime, locale, timezone),
+        eventTime: this.formatTime(event.startDatetime, locale, timezone),
+        eventLocation: event.location,
+        eventLocationUrl: event.locationUrl || '',
+        paymentAmount: amountDisplay,
+        bookingUrl,
+      },
+    });
+  },
+
   /**
    * Send custom email to event attendees
    */
@@ -872,11 +1094,12 @@ export const emailService = {
     const { eventId, templateSlug, customVariables = {}, recipientFilter = 'confirmed', sentBy } = params;
     
     // Get event
-    const event = await (db as any)
+    const event = await dbGet<any>(
+      (db as any)
         .select()
         .from(events)
         .where(eq((events as any).id, eventId))
-      .get();
+    );
     
     if (!event) {
       return { success: false, sentCount: 0, failedCount: 0, errors: ['Event not found'] };
@@ -897,12 +1120,15 @@ export const emailService = {
       );
     }
     
-    const eventTickets = await ticketQuery.all();
+    const eventTickets = await dbAll<any>(ticketQuery);
     
     if (eventTickets.length === 0) {
       return { success: true, sentCount: 0, failedCount: 0, errors: ['No recipients found'] };
     }
     
+    // Get site timezone for proper date/time formatting
+    const timezone = await this.getSiteTimezone();
+    
     let sentCount = 0;
     let failedCount = 0;
     const errors: string[] = [];
@@ -925,8 +1151,8 @@ export const emailService = {
           attendeeEmail: ticket.attendeeEmail,
           ticketId: ticket.id,
           eventTitle,
-          eventDate: this.formatDate(event.startDatetime, locale),
+          eventDate: this.formatDate(event.startDatetime, locale, timezone),
-          eventTime: this.formatTime(event.startDatetime, locale),
+          eventTime: this.formatTime(event.startDatetime, locale, timezone),
           eventLocation: event.location,
           eventLocationUrl: event.locationUrl || '',
           ...customVariables,
@@ -949,6 +1175,100 @@ export const emailService = {
     };
   },
 
+  /**
+   * 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.
+   */
+  async 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 this.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 this.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: this.formatDate(event.startDatetime, locale, timezone),
+          eventTime: this.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,
+    };
+  },
+  
   /**
    * Send a custom email (not from template)
    */
@@ -958,10 +1278,11 @@ export const emailService = {
     subject: string;
     bodyHtml: string;
     bodyText?: string;
+    replyTo?: string;
     eventId?: string;
-    sentBy: string;
+    sentBy?: string | null;
   }): Promise<{ success: boolean; logId?: string; error?: string }> {
-    const { to, toName, subject, bodyHtml, bodyText, eventId, sentBy } = params;
+    const { to, toName, subject, bodyHtml, bodyText, replyTo, eventId, sentBy = null } = params;
     
     const allVariables = {
       ...this.getCommonVariables(),
@@ -971,7 +1292,7 @@ export const emailService = {
     const finalBodyHtml = wrapInBaseTemplate(bodyHtml, allVariables);
     
     // Create log entry
-    const logId = nanoid();
+    const logId = generateId();
     const now = getNow();
     
     await (db as any).insert(emailLogs).values({
@@ -983,7 +1304,7 @@ export const emailService = {
       subject,
       bodyHtml: finalBodyHtml,
       status: 'pending',
-      sentBy,
+      sentBy: sentBy || null,
       createdAt: now,
     });
     
@@ -993,6 +1314,7 @@ export const emailService = {
       subject,
       html: finalBodyHtml,
       text: bodyText,
+      replyTo,
     });
     
     // Update log

backend/src/lib/emailQueue.ts

@@ -0,0 +1,194 @@
+// In-memory email queue with rate limiting
+// Processes emails asynchronously in the background without blocking the request thread
+
+import { generateId } from './utils.js';
+
+// ==================== Types ====================
+
+export interface EmailJob {
+  id: string;
+  type: 'template';
+  params: TemplateEmailJobParams;
+  addedAt: number;
+}
+
+export interface TemplateEmailJobParams {
+  templateSlug: string;
+  to: string;
+  toName?: string;
+  variables: Record<string, any>;
+  locale?: string;
+  eventId?: string;
+  sentBy?: string;
+}
+
+export interface QueueStatus {
+  queued: number;
+  processing: boolean;
+  sentInLastHour: number;
+  maxPerHour: number;
+}
+
+// ==================== Queue State ====================
+
+const queue: EmailJob[] = [];
+const sentTimestamps: number[] = [];
+let processing = false;
+let processTimer: ReturnType<typeof setTimeout> | null = null;
+
+// Lazy reference to emailService to avoid circular imports
+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;
+}
+
+/**
+ * Initialize the email queue with a reference to the email service.
+ * Must be called once at startup.
+ */
+export function initEmailQueue(emailService: any): void {
+  _emailService = emailService;
+  console.log('[EmailQueue] Initialized');
+}
+
+// ==================== Rate Limiting ====================
+
+function getMaxPerHour(): number {
+  return parseInt(process.env.MAX_EMAILS_PER_HOUR || '30', 10);
+}
+
+/**
+ * Clean up timestamps older than 1 hour
+ */
+function cleanOldTimestamps(): void {
+  const oneHourAgo = Date.now() - 3_600_000;
+  while (sentTimestamps.length > 0 && sentTimestamps[0] <= oneHourAgo) {
+    sentTimestamps.shift();
+  }
+}
+
+// ==================== Queue Operations ====================
+
+/**
+ * Add a single email job to the queue.
+ * Returns the job ID.
+ */
+export function enqueueEmail(params: TemplateEmailJobParams): string {
+  const id = generateId();
+  queue.push({
+    id,
+    type: 'template',
+    params,
+    addedAt: Date.now(),
+  });
+  scheduleProcessing();
+  return id;
+}
+
+/**
+ * Add multiple email jobs to the queue at once.
+ * 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();
+  }
+  return ids;
+}
+
+/**
+ * Get current queue status
+ */
+export function getQueueStatus(): QueueStatus {
+  cleanOldTimestamps();
+  return {
+    queued: queue.length,
+    processing,
+    sentInLastHour: sentTimestamps.length,
+    maxPerHour: getMaxPerHour(),
+  };
+}
+
+// ==================== Processing ====================
+
+function scheduleProcessing(): void {
+  if (processing) return;
+  processing = true;
+  // Start processing on next tick to not block the caller
+  setImmediate(() => processNext());
+}
+
+async function processNext(): Promise<void> {
+  if (queue.length === 0) {
+    processing = false;
+    console.log('[EmailQueue] Queue empty. Processing stopped.');
+    return;
+  }
+
+  // Rate limit check
+  cleanOldTimestamps();
+  const maxPerHour = getMaxPerHour();
+
+  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
+    console.log(
+      `[EmailQueue] Rate limit reached (${maxPerHour}/hr). ` +
+      `Pausing for ${Math.ceil(waitMs / 1000)}s. ${queue.length} email(s) remaining.`
+    );
+    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());
+    console.log(
+      `[EmailQueue] Sent email ${job.id} to ${job.params.to}. ` +
+      `Queue: ${queue.length} remaining. Sent this hour: ${sentTimestamps.length}/${maxPerHour}`
+    );
+  } catch (error: any) {
+    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.
+  }
+
+  // Small delay between sends to be gentle on the email server
+  processTimer = setTimeout(() => processNext(), 200);
+}
+
+/**
+ * Stop processing (for graceful shutdown)
+ */
+export function stopQueue(): void {
+  if (processTimer) {
+    clearTimeout(processTimer);
+    processTimer = null;
+  }
+  processing = false;
+  console.log(`[EmailQueue] Stopped. ${queue.length} email(s) remaining in queue.`);
+}

backend/src/lib/emailTemplates.ts

@@ -991,6 +991,118 @@ Spanglish`,
     ],
     isSystem: true,
   },
+  {
+    name: 'Payment Reminder',
+    slug: 'payment-reminder',
+    subject: 'Reminder: Complete your payment for Spanglish',
+    subjectEs: 'Recordatorio: Completa tu pago para Spanglish',
+    bodyHtml: `
+      <h2>Payment Reminder</h2>
+      <p>Hi {{attendeeName}},</p>
+      <p>We wanted to follow up on your booking for <strong>{{eventTitle}}</strong>.</p>
+      <p>We haven't been able to locate your payment yet. To receive your ticket and confirm your spot, please complete your payment.</p>
+      
+      <div class="event-card">
+        <h3>📅 Event Details</h3>
+        <div class="event-detail"><strong>Event:</strong> {{eventTitle}}</div>
+        <div class="event-detail"><strong>Date:</strong> {{eventDate}}</div>
+        <div class="event-detail"><strong>Time:</strong> {{eventTime}}</div>
+        <div class="event-detail"><strong>Location:</strong> {{eventLocation}}</div>
+        <div class="event-detail"><strong>Amount Due:</strong> {{paymentAmount}}</div>
+      </div>
+      
+      <p style="text-align: center; margin: 24px 0;">
+        <a href="{{bookingUrl}}" class="btn">Complete Payment</a>
+      </p>
+      
+      <div class="note">
+        <strong>Already paid?</strong><br>
+        If you have already completed your payment and believe this is an error, please reply to this email with your payment details (date, amount, and method used) and we'll be happy to look into it.
+      </div>
+      
+      <p>We hope to see you at the event!</p>
+      <p>The Spanglish Team</p>
+    `,
+    bodyHtmlEs: `
+      <h2>Recordatorio de Pago</h2>
+      <p>Hola {{attendeeName}},</p>
+      <p>Queríamos dar seguimiento a tu reserva para <strong>{{eventTitle}}</strong>.</p>
+      <p>Aún no hemos podido localizar tu pago. Para recibir tu entrada y confirmar tu lugar, por favor completa tu pago.</p>
+      
+      <div class="event-card">
+        <h3>📅 Detalles del Evento</h3>
+        <div class="event-detail"><strong>Evento:</strong> {{eventTitle}}</div>
+        <div class="event-detail"><strong>Fecha:</strong> {{eventDate}}</div>
+        <div class="event-detail"><strong>Hora:</strong> {{eventTime}}</div>
+        <div class="event-detail"><strong>Ubicación:</strong> {{eventLocation}}</div>
+        <div class="event-detail"><strong>Monto a Pagar:</strong> {{paymentAmount}}</div>
+      </div>
+      
+      <p style="text-align: center; margin: 24px 0;">
+        <a href="{{bookingUrl}}" class="btn">Completar Pago</a>
+      </p>
+      
+      <div class="note">
+        <strong>¿Ya pagaste?</strong><br>
+        Si ya completaste tu pago y crees que esto es un error, por favor responde a este correo con los detalles de tu pago (fecha, monto y método utilizado) y con gusto lo revisaremos.
+      </div>
+      
+      <p>¡Esperamos verte en el evento!</p>
+      <p>El Equipo de Spanglish</p>
+    `,
+    bodyText: `Payment Reminder
+
+Hi {{attendeeName}},
+
+We wanted to follow up on your booking for {{eventTitle}}.
+
+We haven't been able to locate your payment yet. To receive your ticket and confirm your spot, please complete your payment.
+
+Event Details:
+- Event: {{eventTitle}}
+- Date: {{eventDate}}
+- Time: {{eventTime}}
+- Location: {{eventLocation}}
+- Amount Due: {{paymentAmount}}
+
+Complete your payment here: {{bookingUrl}}
+
+Already paid?
+If you have already completed your payment and believe this is an error, please reply to this email with your payment details (date, amount, and method used) and we'll be happy to look into it.
+
+We hope to see you at the event!
+The Spanglish Team`,
+    bodyTextEs: `Recordatorio de Pago
+
+Hola {{attendeeName}},
+
+Queríamos dar seguimiento a tu reserva para {{eventTitle}}.
+
+Aún no hemos podido localizar tu pago. Para recibir tu entrada y confirmar tu lugar, por favor completa tu pago.
+
+Detalles del Evento:
+- Evento: {{eventTitle}}
+- Fecha: {{eventDate}}
+- Hora: {{eventTime}}
+- Ubicación: {{eventLocation}}
+- Monto a Pagar: {{paymentAmount}}
+
+Completa tu pago aquí: {{bookingUrl}}
+
+¿Ya pagaste?
+Si ya completaste tu pago y crees que esto es un error, por favor responde a este correo con los detalles de tu pago (fecha, monto y método utilizado) y con gusto lo revisaremos.
+
+¡Esperamos verte en el evento!
+El Equipo de Spanglish`,
+    description: 'Sent to remind attendees to complete their pending payment',
+    variables: [
+      ...commonVariables, 
+      ...bookingVariables,
+      { name: 'paymentAmount', description: 'Payment amount with currency', example: '50,000 PYG' },
+      { name: 'bookingUrl', description: 'URL to complete payment', example: 'https://spanglish.com/booking/abc123?step=payment' },
+    ],
+    isSystem: true,
+  },
   {
     name: 'Payment Rejected',
     slug: 'payment-rejected',

backend/src/lib/legal-placeholders.ts

@@ -0,0 +1,80 @@
+import { getLegalSettingsValues } from '../routes/legal-settings.js';
+
+/**
+ * Strict whitelist of supported placeholders.
+ * Only these placeholders will be replaced in legal page content.
+ * Unknown placeholders remain unchanged.
+ */
+const SUPPORTED_PLACEHOLDERS = new Set([
+  'COMPANY_NAME',
+  'LEGAL_ENTITY_NAME',
+  'RUC_NUMBER',
+  'COMPANY_ADDRESS',
+  'COMPANY_CITY',
+  'COMPANY_COUNTRY',
+  'SUPPORT_EMAIL',
+  'LEGAL_EMAIL',
+  'GOVERNING_LAW',
+  'JURISDICTION_CITY',
+  'CURRENT_YEAR',
+  'LAST_UPDATED_DATE',
+]);
+
+/**
+ * Replace legal placeholders in content using strict whitelist mapping.
+ *
+ * Rules:
+ * - Only supported placeholders are replaced
+ * - Unknown placeholders remain unchanged
+ * - Missing values are replaced with empty string
+ * - No code execution or dynamic evaluation
+ * - Replacement is pure string substitution
+ *
+ * @param content - The markdown/text content containing {{PLACEHOLDER}} tokens
+ * @param updatedAt - The page's updated_at timestamp (for LAST_UPDATED_DATE)
+ * @returns Content with placeholders replaced
+ */
+export async function replaceLegalPlaceholders(
+  content: string,
+  updatedAt?: string
+): Promise<string> {
+  if (!content) return content;
+
+  // Fetch legal settings values from DB
+  const settingsValues = await getLegalSettingsValues();
+
+  // Build the full replacement map
+  const replacements: Record<string, string> = { ...settingsValues };
+
+  // Dynamic values
+  replacements['CURRENT_YEAR'] = new Date().getFullYear().toString();
+
+  if (updatedAt) {
+    try {
+      const date = new Date(updatedAt);
+      if (!isNaN(date.getTime())) {
+        replacements['LAST_UPDATED_DATE'] = date.toLocaleDateString('en-US', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        });
+      } else {
+        replacements['LAST_UPDATED_DATE'] = updatedAt;
+      }
+    } catch {
+      replacements['LAST_UPDATED_DATE'] = updatedAt;
+    }
+  }
+
+  // Replace only whitelisted placeholders using a single regex pass
+  // Matches {{PLACEHOLDER_NAME}} where PLACEHOLDER_NAME is uppercase letters and underscores
+  return content.replace(/\{\{([A-Z_]+)\}\}/g, (match, placeholderName) => {
+    // Only replace if the placeholder is in the whitelist
+    if (!SUPPORTED_PLACEHOLDERS.has(placeholderName)) {
+      return match; // Unknown placeholder - leave unchanged
+    }
+
+    // Return the value or empty string if missing
+    return replacements[placeholderName] ?? '';
+  });
+}

backend/src/lib/pdf.ts

@@ -14,6 +14,7 @@ interface TicketData {
     location: string;
     locationUrl?: string;
   };
+  timezone?: string;
 }
 
 /**
@@ -29,27 +30,29 @@ async function generateQRCode(data: string): Promise<Buffer> {
 }
 
 /**
- * Format date for display
+ * Format date for display using site timezone
  */
-function formatDate(dateStr: string): string {
+function formatDate(dateStr: string, timezone: string = 'America/Asuncion'): string {
   const date = new Date(dateStr);
   return date.toLocaleDateString('en-US', {
     weekday: 'long',
     year: 'numeric',
     month: 'long',
     day: 'numeric',
+    timeZone: timezone,
   });
 }
 
 /**
- * Format time for display
+ * Format time for display using site timezone
  */
-function formatTime(dateStr: string): string {
+function formatTime(dateStr: string, timezone: string = 'America/Asuncion'): string {
   const date = new Date(dateStr);
   return date.toLocaleTimeString('en-US', {
     hour: '2-digit',
     minute: '2-digit',
     hour12: true,
+    timeZone: timezone,
   });
 }
 
@@ -89,12 +92,13 @@ export async function generateTicketPDF(ticket: TicketData): Promise<Buffer> {
       doc.fontSize(22).fillColor('#1a1a1a').text(ticket.event.title, { align: 'center' });
       doc.moveDown(0.5);
       
-      // Date and time
+      // Date and time (using site timezone)
+      const tz = ticket.timezone || 'America/Asuncion';
       doc.fontSize(14).fillColor('#333');
-      doc.text(formatDate(ticket.event.startDatetime), { align: 'center' });
+      doc.text(formatDate(ticket.event.startDatetime, tz), { align: 'center' });
       
-      const startTime = formatTime(ticket.event.startDatetime);
+      const startTime = formatTime(ticket.event.startDatetime, tz);
-      const endTime = ticket.event.endDatetime ? formatTime(ticket.event.endDatetime) : null;
+      const endTime = ticket.event.endDatetime ? formatTime(ticket.event.endDatetime, tz) : null;
       const timeRange = endTime ? `${startTime} - ${endTime}` : startTime;
       doc.text(timeRange, { align: 'center' });
       
@@ -184,11 +188,13 @@ export async function generateCombinedTicketsPDF(tickets: TicketData[]): Promise
         doc.fontSize(22).fillColor('#1a1a1a').text(ticket.event.title, { align: 'center' });
         doc.moveDown(0.5);
         
+        // Date and time (using site timezone)
+        const tz = ticket.timezone || 'America/Asuncion';
         doc.fontSize(14).fillColor('#333');
-        doc.text(formatDate(ticket.event.startDatetime), { align: 'center' });
+        doc.text(formatDate(ticket.event.startDatetime, tz), { align: 'center' });
         
-        const startTime = formatTime(ticket.event.startDatetime);
+        const startTime = formatTime(ticket.event.startDatetime, tz);
-        const endTime = ticket.event.endDatetime ? formatTime(ticket.event.endDatetime) : null;
+        const endTime = ticket.event.endDatetime ? formatTime(ticket.event.endDatetime, tz) : null;
         const timeRange = endTime ? `${startTime} - ${endTime}` : startTime;
         doc.text(timeRange, { align: 'center' });
         

backend/src/lib/revalidate.ts

@@ -0,0 +1,22 @@
+// Trigger frontend cache revalidation (fire-and-forget)
+// Revalidates both the sitemap and the next-event data (homepage, llms.txt)
+export function revalidateFrontendCache() {
+  const frontendUrl = process.env.FRONTEND_URL || 'http://localhost:3002';
+  const secret = process.env.REVALIDATE_SECRET;
+  if (!secret) {
+    console.warn('REVALIDATE_SECRET not set, skipping frontend revalidation');
+    return;
+  }
+  fetch(`${frontendUrl}/api/revalidate`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ secret, tag: ['events-sitemap', 'next-event'] }),
+  })
+    .then((res) => {
+      if (!res.ok) console.error('Frontend revalidation failed:', res.status);
+      else console.log('Frontend revalidation triggered (sitemap + next-event)');
+    })
+    .catch((err) => {
+      console.error('Frontend revalidation error:', err.message);
+    });
+}

backend/src/lib/utils.ts

@@ -1,15 +1,71 @@
 import { nanoid } from 'nanoid';
+import { randomUUID } from 'crypto';
 
+/**
+ * Get database type (reads env var each time to handle module loading order)
+ */
+function getDbType(): string {
+  return process.env.DB_TYPE || 'sqlite';
+}
+
+/**
+ * Generate a unique ID appropriate for the database type.
+ * - SQLite: returns nanoid (21-char alphanumeric)
+ * - PostgreSQL: returns UUID v4
+ */
 export function generateId(): string {
-  return nanoid(21);
+  return getDbType() === 'postgres' ? randomUUID() : nanoid(21);
 }
 
 export function generateTicketCode(): string {
   return `TKT-${nanoid(8).toUpperCase()}`;
 }
 
-export function getNow(): string {
+/**
-  return new Date().toISOString();
+ * Get current timestamp in the format appropriate for the database type.
+ * - SQLite: returns ISO string
+ * - PostgreSQL: returns Date object
+ */
+export function getNow(): string | Date {
+  const now = new Date();
+  return getDbType() === 'postgres' ? now : now.toISOString();
+}
+
+/**
+ * Convert a date value to the appropriate format for the database type.
+ * - SQLite: returns ISO string
+ * - PostgreSQL: returns Date object
+ */
+export function toDbDate(date: Date | string): string | Date {
+  const d = typeof date === 'string' ? new Date(date) : date;
+  return getDbType() === 'postgres' ? d : d.toISOString();
+}
+
+/**
+ * Convert a boolean value to the appropriate format for the database type.
+ * - SQLite: returns boolean (true/false) for mode: 'boolean'
+ * - PostgreSQL: returns integer (1/0) for pgInteger columns
+ */
+export function toDbBool(value: boolean): boolean | number {
+  return getDbType() === 'postgres' ? (value ? 1 : 0) : value;
+}
+
+/**
+ * Convert all boolean values in an object to the appropriate database format.
+ * Useful for converting request data before database insert/update.
+ */
+export function convertBooleansForDb<T extends Record<string, any>>(obj: T): T {
+  if (getDbType() !== 'postgres') {
+    return obj; // SQLite handles booleans automatically
+  }
+  
+  const result = { ...obj };
+  for (const key in result) {
+    if (typeof result[key] === 'boolean') {
+      (result as any)[key] = result[key] ? 1 : 0;
+    }
+  }
+  return result;
 }
 
 export function formatCurrency(amount: number, currency: string = 'PYG'): string {

backend/src/routes/admin.ts

@@ -1,6 +1,6 @@
 import { Hono } from 'hono';
-import { db, users, events, tickets, payments, contacts, emailSubscribers } from '../db/index.js';
+import { db, dbGet, dbAll, users, events, tickets, payments, contacts, emailSubscribers } from '../db/index.js';
-import { eq, and, gte, sql, desc } from 'drizzle-orm';
+import { eq, and, gte, sql, desc, inArray } from 'drizzle-orm';
 import { requireAuth } from '../lib/auth.js';
 import { getNow } from '../lib/utils.js';
 
@@ -11,7 +11,8 @@ adminRouter.get('/dashboard', requireAuth(['admin', 'organizer']), async (c) =>
   const now = getNow();
   
   // Get upcoming events
-  const upcomingEvents = await (db as any)
+  const upcomingEvents = await dbAll(
+    (db as any)
       .select()
       .from(events)
       .where(
@@ -22,63 +23,72 @@ adminRouter.get('/dashboard', requireAuth(['admin', 'organizer']), async (c) =>
       )
       .orderBy((events as any).startDatetime)
       .limit(5)
-    .all();
+  );
   
   // Get recent tickets
-  const recentTickets = await (db as any)
+  const recentTickets = await dbAll(
+    (db as any)
       .select()
       .from(tickets)
       .orderBy(desc((tickets as any).createdAt))
       .limit(10)
-    .all();
+  );
   
   // Get total stats
-  const totalUsers = await (db as any)
+  const totalUsers = await dbGet<any>(
+    (db as any)
       .select({ count: sql<number>`count(*)` })
       .from(users)
-    .get();
+  );
   
-  const totalEvents = await (db as any)
+  const totalEvents = await dbGet<any>(
+    (db as any)
       .select({ count: sql<number>`count(*)` })
       .from(events)
-    .get();
+  );
   
-  const totalTickets = await (db as any)
+  const totalTickets = await dbGet<any>(
+    (db as any)
       .select({ count: sql<number>`count(*)` })
       .from(tickets)
-    .get();
+  );
   
-  const confirmedTickets = await (db as any)
+  const confirmedTickets = await dbGet<any>(
+    (db as any)
       .select({ count: sql<number>`count(*)` })
       .from(tickets)
       .where(eq((tickets as any).status, 'confirmed'))
-    .get();
+  );
   
-  const pendingPayments = await (db as any)
+  const pendingPayments = await dbGet<any>(
+    (db as any)
       .select({ count: sql<number>`count(*)` })
       .from(payments)
       .where(eq((payments as any).status, 'pending'))
-    .get();
+  );
   
-  const paidPayments = await (db as any)
+  const paidPayments = await dbAll<any>(
+    (db as any)
       .select()
       .from(payments)
       .where(eq((payments as any).status, 'paid'))
-    .all();
+  );
   
-  const totalRevenue = paidPayments.reduce((sum: number, p: any) => sum + (p.amount || 0), 0);
+  const totalRevenue = paidPayments.reduce((sum: number, p: any) => sum + Number(p.amount || 0), 0);
   
-  const newContacts = await (db as any)
+  const newContacts = await dbGet<any>(
+    (db as any)
       .select({ count: sql<number>`count(*)` })
       .from(contacts)
       .where(eq((contacts as any).status, 'new'))
-    .get();
+  );
   
-  const totalSubscribers = await (db as any)
+  const totalSubscribers = await dbGet<any>(
+    (db as any)
       .select({ count: sql<number>`count(*)` })
       .from(emailSubscribers)
       .where(eq((emailSubscribers as any).status, 'active'))
-    .get();
+  );
   
   return c.json({
     dashboard: {
@@ -101,17 +111,19 @@ adminRouter.get('/dashboard', requireAuth(['admin', 'organizer']), async (c) =>
 // Get analytics data (admin)
 adminRouter.get('/analytics', requireAuth(['admin']), async (c) => {
   // Get events with ticket counts
-  const allEvents = await (db as any).select().from(events).all();
+  const allEvents = await dbAll<any>((db as any).select().from(events));
   
   const eventStats = await Promise.all(
     allEvents.map(async (event: any) => {
-      const ticketCount = await (db as any)
+      const ticketCount = await dbGet<any>(
+        (db as any)
           .select({ count: sql<number>`count(*)` })
           .from(tickets)
           .where(eq((tickets as any).eventId, event.id))
-        .get();
+      );
       
-      const confirmedCount = await (db as any)
+      const confirmedCount = await dbGet<any>(
+        (db as any)
           .select({ count: sql<number>`count(*)` })
           .from(tickets)
           .where(
@@ -120,9 +132,10 @@ adminRouter.get('/analytics', requireAuth(['admin']), async (c) => {
               eq((tickets as any).status, 'confirmed')
             )
           )
-        .get();
+      );
       
-      const checkedInCount = await (db as any)
+      const checkedInCount = await dbGet<any>(
+        (db as any)
           .select({ count: sql<number>`count(*)` })
           .from(tickets)
           .where(
@@ -131,7 +144,7 @@ adminRouter.get('/analytics', requireAuth(['admin']), async (c) => {
               eq((tickets as any).status, 'checked_in')
             )
           )
-        .get();
+      );
       
       return {
         id: event.id,
@@ -163,28 +176,31 @@ adminRouter.get('/export/tickets', requireAuth(['admin']), async (c) => {
     query = query.where(eq((tickets as any).eventId, eventId));
   }
   
-  const ticketList = await query.all();
+  const ticketList = await dbAll<any>(query);
   
   // Get user and event details for each ticket
   const enrichedTickets = await Promise.all(
     ticketList.map(async (ticket: any) => {
-      const user = await (db as any)
+      const user = await dbGet<any>(
+        (db as any)
           .select()
           .from(users)
           .where(eq((users as any).id, ticket.userId))
-        .get();
+      );
       
-      const event = await (db as any)
+      const event = await dbGet<any>(
+        (db as any)
           .select()
           .from(events)
           .where(eq((events as any).id, ticket.eventId))
-        .get();
+      );
       
-      const payment = await (db as any)
+      const payment = await dbGet<any>(
+        (db as any)
           .select()
           .from(payments)
           .where(eq((payments as any).ticketId, ticket.id))
-        .get();
+      );
       
       return {
         ticketId: ticket.id,
@@ -206,6 +222,211 @@ adminRouter.get('/export/tickets', requireAuth(['admin']), async (c) => {
   return c.json({ tickets: enrichedTickets });
 });
 
+// Export attendees for a specific event (admin) — CSV download
+adminRouter.get('/events/:eventId/attendees/export', requireAuth(['admin']), async (c) => {
+  const eventId = c.req.param('eventId');
+  const status = c.req.query('status') || 'all'; // confirmed | checked_in | confirmed_pending | all
+  const q = c.req.query('q') || '';
+
+  // Verify event exists
+  const event = await dbGet<any>(
+    (db as any).select().from(events).where(eq((events as any).id, eventId))
+  );
+  if (!event) {
+    return c.json({ error: 'Event not found' }, 404);
+  }
+
+  // Build query for tickets belonging to this event
+  let conditions: any[] = [eq((tickets as any).eventId, eventId)];
+
+  if (status === 'confirmed') {
+    conditions.push(eq((tickets as any).status, 'confirmed'));
+  } else if (status === 'checked_in') {
+    conditions.push(eq((tickets as any).status, 'checked_in'));
+  } else if (status === 'confirmed_pending') {
+    conditions.push(inArray((tickets as any).status, ['confirmed', 'pending']));
+  } else {
+    // "all" — include everything
+  }
+
+  let ticketList = await dbAll<any>(
+    (db as any)
+      .select()
+      .from(tickets)
+      .where(conditions.length === 1 ? conditions[0] : and(...conditions))
+      .orderBy(desc((tickets as any).createdAt))
+  );
+
+  // Apply text search filter in-memory
+  if (q) {
+    const query = q.toLowerCase();
+    ticketList = ticketList.filter((t: any) => {
+      const fullName = `${t.attendeeFirstName || ''} ${t.attendeeLastName || ''}`.toLowerCase();
+      return (
+        fullName.includes(query) ||
+        (t.attendeeEmail || '').toLowerCase().includes(query) ||
+        (t.attendeePhone || '').toLowerCase().includes(query) ||
+        t.id.toLowerCase().includes(query)
+      );
+    });
+  }
+
+  // Enrich each ticket with payment data
+  const rows = await Promise.all(
+    ticketList.map(async (ticket: any) => {
+      const payment = await dbGet<any>(
+        (db as any)
+          .select()
+          .from(payments)
+          .where(eq((payments as any).ticketId, ticket.id))
+      );
+
+      const fullName = [ticket.attendeeFirstName, ticket.attendeeLastName].filter(Boolean).join(' ');
+      const isCheckedIn = ticket.status === 'checked_in';
+
+      return {
+        'Ticket ID': ticket.id,
+        'Full Name': fullName,
+        'Email': ticket.attendeeEmail || '',
+        'Phone': ticket.attendeePhone || '',
+        'Status': ticket.status,
+        'Checked In': isCheckedIn ? 'true' : 'false',
+        'Check-in Time': ticket.checkinAt || '',
+        'Payment Status': payment?.status || '',
+        'Booked At': ticket.createdAt || '',
+        'Notes': ticket.adminNote || '',
+      };
+    })
+  );
+
+  // Generate CSV
+  const csvEscape = (value: string) => {
+    if (value == null) return '';
+    const str = String(value);
+    if (str.includes(',') || str.includes('"') || str.includes('\n') || str.includes('\r')) {
+      return '"' + str.replace(/"/g, '""') + '"';
+    }
+    return str;
+  };
+
+  const columns = [
+    'Ticket ID', 'Full Name', 'Email', 'Phone',
+    'Status', 'Checked In', 'Check-in Time', 'Payment Status',
+    'Booked At', 'Notes',
+  ];
+
+  const headerLine = columns.map(csvEscape).join(',');
+  const dataLines = rows.map((row: any) =>
+    columns.map((col) => csvEscape(row[col])).join(',')
+  );
+
+  const csvContent = '\uFEFF' + [headerLine, ...dataLines].join('\r\n'); // BOM for UTF-8
+
+  // Build filename: event-slug-attendees-YYYY-MM-DD.csv
+  const slug = (event.title || 'event')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '');
+  const dateStr = new Date().toISOString().split('T')[0];
+  const filename = `${slug}-attendees-${dateStr}.csv`;
+
+  c.header('Content-Type', 'text/csv; charset=utf-8');
+  c.header('Content-Disposition', `attachment; filename="${filename}"`);
+  return c.body(csvContent);
+});
+
+// Legacy alias — keep old path working
+adminRouter.get('/events/:eventId/export', requireAuth(['admin']), async (c) => {
+  const newUrl = new URL(c.req.url);
+  newUrl.pathname = newUrl.pathname.replace('/export', '/attendees/export');
+  return c.redirect(newUrl.toString(), 301);
+});
+
+// Export tickets for a specific event (admin) — CSV download (confirmed/checked_in only)
+adminRouter.get('/events/:eventId/tickets/export', requireAuth(['admin']), async (c) => {
+  const eventId = c.req.param('eventId');
+  const status = c.req.query('status') || 'all'; // confirmed | checked_in | all
+  const q = c.req.query('q') || '';
+
+  // Verify event exists
+  const event = await dbGet<any>(
+    (db as any).select().from(events).where(eq((events as any).id, eventId))
+  );
+  if (!event) {
+    return c.json({ error: 'Event not found' }, 404);
+  }
+
+  // Only confirmed/checked_in for tickets export
+  let conditions: any[] = [
+    eq((tickets as any).eventId, eventId),
+    inArray((tickets as any).status, ['confirmed', 'checked_in']),
+  ];
+
+  if (status === 'confirmed') {
+    conditions = [eq((tickets as any).eventId, eventId), eq((tickets as any).status, 'confirmed')];
+  } else if (status === 'checked_in') {
+    conditions = [eq((tickets as any).eventId, eventId), eq((tickets as any).status, 'checked_in')];
+  }
+
+  let ticketList = await dbAll<any>(
+    (db as any)
+      .select()
+      .from(tickets)
+      .where(and(...conditions))
+      .orderBy(desc((tickets as any).createdAt))
+  );
+
+  // Apply text search filter
+  if (q) {
+    const query = q.toLowerCase();
+    ticketList = ticketList.filter((t: any) => {
+      const fullName = `${t.attendeeFirstName || ''} ${t.attendeeLastName || ''}`.toLowerCase();
+      return (
+        fullName.includes(query) ||
+        t.id.toLowerCase().includes(query)
+      );
+    });
+  }
+
+  const csvEscape = (value: string) => {
+    if (value == null) return '';
+    const str = String(value);
+    if (str.includes(',') || str.includes('"') || str.includes('\n') || str.includes('\r')) {
+      return '"' + str.replace(/"/g, '""') + '"';
+    }
+    return str;
+  };
+
+  const columns = ['Ticket ID', 'Booking ID', 'Attendee Name', 'Status', 'Check-in Time', 'Booked At'];
+
+  const rows = ticketList.map((ticket: any) => ({
+    'Ticket ID': ticket.id,
+    'Booking ID': ticket.bookingId || '',
+    'Attendee Name': [ticket.attendeeFirstName, ticket.attendeeLastName].filter(Boolean).join(' '),
+    'Status': ticket.status,
+    'Check-in Time': ticket.checkinAt || '',
+    'Booked At': ticket.createdAt || '',
+  }));
+
+  const headerLine = columns.map(csvEscape).join(',');
+  const dataLines = rows.map((row: any) =>
+    columns.map((col: string) => csvEscape(row[col])).join(',')
+  );
+
+  const csvContent = '\uFEFF' + [headerLine, ...dataLines].join('\r\n');
+
+  const slug = (event.title || 'event')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '');
+  const dateStr = new Date().toISOString().split('T')[0];
+  const filename = `${slug}-tickets-${dateStr}.csv`;
+
+  c.header('Content-Type', 'text/csv; charset=utf-8');
+  c.header('Content-Disposition', `attachment; filename="${filename}"`);
+  return c.body(csvContent);
+});
+
 // Export financial data (admin)
 adminRouter.get('/export/financial', requireAuth(['admin']), async (c) => {
   const startDate = c.req.query('startDate');
@@ -215,24 +436,26 @@ adminRouter.get('/export/financial', requireAuth(['admin']), async (c) => {
   // Get all payments
   let query = (db as any).select().from(payments);
   
-  const allPayments = await query.all();
+  const allPayments = await dbAll<any>(query);
   
   // Enrich with event and ticket data
   const enrichedPayments = await Promise.all(
     allPayments.map(async (payment: any) => {
-      const ticket = await (db as any)
+      const ticket = await dbGet<any>(
+        (db as any)
           .select()
           .from(tickets)
           .where(eq((tickets as any).id, payment.ticketId))
-        .get();
+      );
       
       if (!ticket) return null;
       
-      const event = await (db as any)
+      const event = await dbGet<any>(
+        (db as any)
           .select()
           .from(events)
           .where(eq((events as any).id, ticket.eventId))
-        .get();
+      );
       
       // Apply filters
       if (eventId && ticket.eventId !== eventId) return null;

backend/src/routes/auth.ts

@@ -1,7 +1,7 @@
 import { Hono } from 'hono';
 import { zValidator } from '@hono/zod-validator';
 import { z } from 'zod';
-import { db, users, magicLinkTokens, User } from '../db/index.js';
+import { db, dbGet, users, magicLinkTokens, User } from '../db/index.js';
 import { eq } from 'drizzle-orm';
 import {
   hashPassword,
@@ -16,7 +16,7 @@ import {
   invalidateAllUserSessions,
   requireAuth,
 } from '../lib/auth.js';
-import { generateId, getNow } from '../lib/utils.js';
+import { generateId, getNow, toDbBool } from '../lib/utils.js';
 import { sendEmail } from '../lib/email.js';
 
 // User type that includes all fields (some added in schema updates)
@@ -121,7 +121,9 @@ auth.post('/register', zValidator('json', registerSchema), async (c) => {
   }
   
   // Check if email exists
-  const existing = await (db as any).select().from(users).where(eq((users as any).email, data.email)).get();
+  const existing = await dbGet<any>(
+    (db as any).select().from(users).where(eq((users as any).email, data.email))
+  );
   if (existing) {
     // If user exists but is unclaimed, allow claiming
     if (!existing.isClaimed || existing.accountStatus === 'unclaimed') {
@@ -149,7 +151,7 @@ auth.post('/register', zValidator('json', registerSchema), async (c) => {
     phone: data.phone || null,
     role: firstUser ? 'admin' : 'user',
     languagePreference: data.languagePreference || null,
-    isClaimed: true,
+    isClaimed: toDbBool(true),
     googleId: null,
     rucNumber: null,
     accountStatus: 'active',
@@ -189,7 +191,9 @@ auth.post('/login', zValidator('json', loginSchema), async (c) => {
     }, 429);
   }
   
-  const user = await (db as any).select().from(users).where(eq((users as any).email, data.email)).get();
+  const user = await dbGet<any>(
+    (db as any).select().from(users).where(eq((users as any).email, data.email))
+  );
   if (!user) {
     recordFailedAttempt(data.email);
     return c.json({ error: 'Invalid credentials' }, 401);
@@ -243,7 +247,9 @@ auth.post('/login', zValidator('json', loginSchema), async (c) => {
 auth.post('/magic-link/request', zValidator('json', magicLinkRequestSchema), async (c) => {
   const { email } = c.req.valid('json');
   
-  const user = await (db as any).select().from(users).where(eq((users as any).email, email)).get();
+  const user = await dbGet<any>(
+    (db as any).select().from(users).where(eq((users as any).email, email))
+  );
   
   if (!user) {
     // Don't reveal if email exists
@@ -288,7 +294,9 @@ auth.post('/magic-link/verify', zValidator('json', magicLinkVerifySchema), async
     return c.json({ error: verification.error }, 400);
   }
   
-  const user = await (db as any).select().from(users).where(eq((users as any).id, verification.userId)).get();
+  const user = await dbGet<any>(
+    (db as any).select().from(users).where(eq((users as any).id, verification.userId))
+  );
   
   if (!user || user.accountStatus === 'suspended') {
     return c.json({ error: 'Invalid token' }, 400);
@@ -317,7 +325,9 @@ auth.post('/magic-link/verify', zValidator('json', magicLinkVerifySchema), async
 auth.post('/password-reset/request', zValidator('json', passwordResetRequestSchema), async (c) => {
   const { email } = c.req.valid('json');
   
-  const user = await (db as any).select().from(users).where(eq((users as any).email, email)).get();
+  const user = await dbGet<any>(
+    (db as any).select().from(users).where(eq((users as any).email, email))
+  );
   
   if (!user) {
     // Don't reveal if email exists
@@ -389,7 +399,9 @@ auth.post('/password-reset/confirm', zValidator('json', passwordResetSchema), as
 auth.post('/claim-account/request', zValidator('json', magicLinkRequestSchema), async (c) => {
   const { email } = c.req.valid('json');
   
-  const user = await (db as any).select().from(users).where(eq((users as any).email, email)).get();
+  const user = await dbGet<any>(
+    (db as any).select().from(users).where(eq((users as any).email, email))
+  );
   
   if (!user) {
     return c.json({ message: 'If an unclaimed account exists with this email, a claim link has been sent.' });
@@ -439,7 +451,7 @@ auth.post('/claim-account/confirm', zValidator('json', claimAccountSchema), asyn
   
   const now = getNow();
   const updates: Record<string, any> = {
-    isClaimed: true,
+    isClaimed: toDbBool(true),
     accountStatus: 'active',
     updatedAt: now,
   };
@@ -461,7 +473,9 @@ auth.post('/claim-account/confirm', zValidator('json', claimAccountSchema), asyn
     .set(updates)
     .where(eq((users as any).id, verification.userId));
   
-  const user = await (db as any).select().from(users).where(eq((users as any).id, verification.userId)).get();
+  const user = await dbGet<any>(
+    (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 refreshToken = await createRefreshToken(user.id);
@@ -510,11 +524,15 @@ auth.post('/google', zValidator('json', googleAuthSchema), async (c) => {
     const { sub: googleId, email, name } = googleData;
     
     // Check if user exists by email or google_id
-    let user = await (db as any).select().from(users).where(eq((users as any).email, email)).get();
+    let user = await dbGet<any>(
+      (db as any).select().from(users).where(eq((users as any).email, email))
+    );
     
     if (!user) {
       // Check by google_id
-      user = await (db as any).select().from(users).where(eq((users as any).googleId, googleId)).get();
+      user = await dbGet<any>(
+        (db as any).select().from(users).where(eq((users as any).googleId, googleId))
+      );
     }
     
     const now = getNow();
@@ -530,7 +548,7 @@ auth.post('/google', zValidator('json', googleAuthSchema), async (c) => {
           .update(users)
           .set({ 
             googleId,
-            isClaimed: true,
+            isClaimed: toDbBool(true),
             accountStatus: 'active',
             updatedAt: now,
           })
@@ -538,7 +556,9 @@ auth.post('/google', zValidator('json', googleAuthSchema), async (c) => {
       }
       
       // Refresh user data
-      user = await (db as any).select().from(users).where(eq((users as any).id, user.id)).get();
+      user = await dbGet<any>(
+        (db as any).select().from(users).where(eq((users as any).id, user.id))
+      );
     } else {
       // Create new user
       const firstUser = await isFirstUser();
@@ -552,7 +572,7 @@ auth.post('/google', zValidator('json', googleAuthSchema), async (c) => {
         phone: null,
         role: firstUser ? 'admin' : 'user',
         languagePreference: null,
-        isClaimed: true,
+        isClaimed: toDbBool(true),
         googleId,
         rucNumber: null,
         accountStatus: 'active',

backend/src/routes/contacts.ts

@@ -1,13 +1,37 @@
 import { Hono } from 'hono';
 import { zValidator } from '@hono/zod-validator';
 import { z } from 'zod';
-import { db, contacts, emailSubscribers } from '../db/index.js';
+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 { emailService } from '../lib/email.js';
 
 const contactsRouter = new Hono();
 
+// ==================== Sanitization Helpers ====================
+
+/**
+ * Sanitize a string to prevent HTML injection
+ * Escapes HTML special characters
+ */
+function sanitizeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#x27;');
+}
+
+/**
+ * Sanitize email header values to prevent email header injection
+ * Strips newlines and carriage returns that could be used to inject headers
+ */
+function sanitizeHeaderValue(str: string): string {
+  return str.replace(/[\r\n]/g, '').trim();
+}
+
 const createContactSchema = z.object({
   name: z.string().min(2),
   email: z.string().email(),
@@ -29,17 +53,74 @@ contactsRouter.post('/', zValidator('json', createContactSchema), async (c) => {
   const now = getNow();
   const id = generateId();
   
+  // Sanitize header-sensitive values to prevent email header injection
+  const sanitizedEmail = sanitizeHeaderValue(data.email);
+  const sanitizedName = sanitizeHeaderValue(data.name);
+  
   const newContact = {
     id,
-    name: data.name,
+    name: sanitizedName,
-    email: data.email,
+    email: sanitizedEmail,
     message: data.message,
     status: 'new' as const,
     createdAt: now,
   };
   
+  // Always store the message in admin, regardless of email outcome
   await (db as any).insert(contacts).values(newContact);
   
+  // Send email notification to support email (non-blocking)
+  try {
+    // Retrieve support_email from legal_settings
+    const settings = await dbGet<any>(
+      (db as any).select().from(legalSettings).limit(1)
+    );
+    
+    const supportEmail = settings?.supportEmail;
+    
+    if (supportEmail) {
+      const websiteUrl = process.env.FRONTEND_URL || 'https://spanglish.com';
+      
+      // Sanitize all values for HTML display
+      const safeName = sanitizeHtml(sanitizedName);
+      const safeEmail = sanitizeHtml(sanitizedEmail);
+      const safeMessage = sanitizeHtml(data.message);
+      
+      const subject = `New Contact Form Message – ${websiteUrl}`;
+      
+      const bodyHtml = `
+        <p><strong>${safeName}</strong> (${safeEmail}) sent a message:</p>
+        <div style="padding: 16px 20px; background-color: #f8fafc; border-left: 4px solid #3b82f6; margin: 16px 0; white-space: pre-wrap; font-size: 15px; line-height: 1.6;">${safeMessage}</div>
+        <p style="color: #64748b; font-size: 13px;">Reply directly to this email to respond to ${safeName}.</p>
+      `;
+      
+      const bodyText = [
+        `${sanitizedName} (${sanitizedEmail}) sent a message:`,
+        '',
+        data.message,
+        '',
+        `Reply directly to this email to respond to ${sanitizedName}.`,
+      ].join('\n');
+      
+      const emailResult = await emailService.sendCustomEmail({
+        to: supportEmail,
+        subject,
+        bodyHtml,
+        bodyText,
+        replyTo: sanitizedEmail,
+      });
+      
+      if (!emailResult.success) {
+        console.error('[Contact Form] Failed to send email notification:', emailResult.error);
+      }
+    } else {
+      console.warn('[Contact Form] No support email configured in legal settings – skipping email notification');
+    }
+  } catch (emailError: any) {
+    // Log the error but do NOT break the contact form UX
+    console.error('[Contact Form] Error sending email notification:', emailError?.message || emailError);
+  }
+  
   return c.json({ message: 'Message sent successfully' }, 201);
 });
 
@@ -48,11 +129,12 @@ contactsRouter.post('/subscribe', zValidator('json', subscribeSchema), async (c)
   const data = c.req.valid('json');
   
   // Check if already subscribed
-  const existing = await (db as any)
+  const existing = await dbGet<any>(
+    (db as any)
       .select()
       .from(emailSubscribers)
       .where(eq((emailSubscribers as any).email, data.email))
-    .get();
+  );
   
   if (existing) {
     if (existing.status === 'unsubscribed') {
@@ -87,11 +169,9 @@ contactsRouter.post('/subscribe', zValidator('json', subscribeSchema), async (c)
 contactsRouter.post('/unsubscribe', zValidator('json', z.object({ email: z.string().email() })), async (c) => {
   const { email } = c.req.valid('json');
   
-  const existing = await (db as any)
+  const existing = await dbGet<any>(
-    .select()
+    (db as any).select().from(emailSubscribers).where(eq((emailSubscribers as any).email, email))
-    .from(emailSubscribers)
+  );
-    .where(eq((emailSubscribers as any).email, email))
-    .get();
   
   if (!existing) {
     return c.json({ error: 'Email not found' }, 404);
@@ -115,7 +195,7 @@ contactsRouter.get('/', requireAuth(['admin', 'organizer']), async (c) => {
     query = query.where(eq((contacts as any).status, status));
   }
   
-  const result = await query.orderBy(desc((contacts as any).createdAt)).all();
+  const result = await dbAll(query.orderBy(desc((contacts as any).createdAt)));
   
   return c.json({ contacts: result });
 });
@@ -124,11 +204,12 @@ contactsRouter.get('/', requireAuth(['admin', 'organizer']), async (c) => {
 contactsRouter.get('/:id', requireAuth(['admin', 'organizer']), async (c) => {
   const id = c.req.param('id');
   
-  const contact = await (db as any)
+  const contact = await dbGet(
+    (db as any)
       .select()
       .from(contacts)
       .where(eq((contacts as any).id, id))
-    .get();
+  );
   
   if (!contact) {
     return c.json({ error: 'Contact not found' }, 404);
@@ -142,11 +223,9 @@ contactsRouter.put('/:id', requireAuth(['admin', 'organizer']), zValidator('json
   const id = c.req.param('id');
   const data = c.req.valid('json');
   
-  const existing = await (db as any)
+  const existing = await dbGet<any>(
-    .select()
+    (db as any).select().from(contacts).where(eq((contacts as any).id, id))
-    .from(contacts)
+  );
-    .where(eq((contacts as any).id, id))
-    .get();
   
   if (!existing) {
     return c.json({ error: 'Contact not found' }, 404);
@@ -157,11 +236,9 @@ contactsRouter.put('/:id', requireAuth(['admin', 'organizer']), zValidator('json
     .set({ status: data.status })
     .where(eq((contacts as any).id, id));
   
-  const updated = await (db as any)
+  const updated = await dbGet<any>(
-    .select()
+    (db as any).select().from(contacts).where(eq((contacts as any).id, id))
-    .from(contacts)
+  );
-    .where(eq((contacts as any).id, id))
-    .get();
   
   return c.json({ contact: updated });
 });
@@ -185,7 +262,7 @@ contactsRouter.get('/subscribers/list', requireAuth(['admin', 'marketing']), asy
     query = query.where(eq((emailSubscribers as any).status, status));
   }
   
-  const result = await query.orderBy(desc((emailSubscribers as any).createdAt)).all();
+  const result = await dbAll(query.orderBy(desc((emailSubscribers as any).createdAt)));
   
   return c.json({ subscribers: result });
 });

backend/src/routes/dashboard.ts

@@ -1,7 +1,7 @@
 import { Hono } from 'hono';
 import { zValidator } from '@hono/zod-validator';
 import { z } from 'zod';
-import { db, users, tickets, payments, events, invoices, User } from '../db/index.js';
+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 { generateId, getNow } from '../lib/utils.js';
@@ -70,11 +70,12 @@ dashboard.put('/profile', zValidator('json', updateProfileSchema), async (c) =>
     })
     .where(eq((users as any).id, user.id));
   
-  const updatedUser = await (db as any)
+  const updatedUser = await dbGet<any>(
+    (db as any)
       .select()
       .from(users)
       .where(eq((users as any).id, user.id))
-    .get();
+  );
   
   return c.json({
     profile: {
@@ -95,36 +96,40 @@ dashboard.put('/profile', zValidator('json', updateProfileSchema), async (c) =>
 dashboard.get('/tickets', async (c) => {
   const user = (c as any).get('user') as AuthUser;
   
-  const userTickets = await (db as any)
+  const userTickets = await dbAll<any>(
+    (db as any)
       .select()
       .from(tickets)
       .where(eq((tickets as any).userId, user.id))
       .orderBy(desc((tickets as any).createdAt))
-    .all();
+  );
   
   // Get event details for each ticket
   const ticketsWithEvents = await Promise.all(
     userTickets.map(async (ticket: any) => {
-      const event = await (db as any)
+      const event = await dbGet<any>(
+        (db as any)
           .select()
           .from(events)
           .where(eq((events as any).id, ticket.eventId))
-        .get();
+      );
       
-      const payment = await (db as any)
+      const payment = await dbGet<any>(
+        (db as any)
           .select()
           .from(payments)
           .where(eq((payments as any).ticketId, ticket.id))
-        .get();
+      );
       
       // Check for invoice
-      let invoice = null;
+      let invoice: any = null;
       if (payment && payment.status === 'paid') {
-        invoice = await (db as any)
+        invoice = await dbGet<any>(
+          (db as any)
             .select()
             .from(invoices)
             .where(eq((invoices as any).paymentId, payment.id))
-          .get();
+        );
       }
       
       return {
@@ -168,7 +173,8 @@ dashboard.get('/tickets/:id', async (c) => {
   const user = (c as any).get('user') as AuthUser;
   const ticketId = c.req.param('id');
   
-  const ticket = await (db as any)
+  const ticket = await dbGet<any>(
+    (db as any)
       .select()
       .from(tickets)
       .where(
@@ -177,31 +183,34 @@ dashboard.get('/tickets/:id', async (c) => {
           eq((tickets as any).userId, user.id)
         )
       )
-    .get();
+  );
   
   if (!ticket) {
     return c.json({ error: 'Ticket not found' }, 404);
   }
   
-  const event = await (db as any)
+  const event = await dbGet(
+    (db as any)
       .select()
       .from(events)
       .where(eq((events as any).id, ticket.eventId))
-    .get();
+  );
   
-  const payment = await (db as any)
+  const payment = await dbGet<any>(
+    (db as any)
       .select()
       .from(payments)
       .where(eq((payments as any).ticketId, ticket.id))
-    .get();
+  );
   
   let invoice = null;
   if (payment && payment.status === 'paid') {
-    invoice = await (db as any)
+    invoice = await dbGet(
+      (db as any)
         .select()
         .from(invoices)
         .where(eq((invoices as any).paymentId, payment.id))
-      .get();
+    );
   }
   
   return c.json({
@@ -222,11 +231,12 @@ dashboard.get('/next-event', async (c) => {
   const now = getNow();
   
   // Get user's tickets for upcoming events
-  const userTickets = await (db as any)
+  const userTickets = await dbAll<any>(
+    (db as any)
       .select()
       .from(tickets)
       .where(eq((tickets as any).userId, user.id))
-    .all();
+  );
   
   if (userTickets.length === 0) {
     return c.json({ nextEvent: null });
@@ -240,11 +250,12 @@ dashboard.get('/next-event', async (c) => {
   for (const ticket of userTickets) {
     if (ticket.status === 'cancelled') continue;
     
-    const event = await (db as any)
+    const event = await dbGet<any>(
+      (db as any)
         .select()
         .from(events)
         .where(eq((events as any).id, ticket.eventId))
-      .get();
+    );
     
     if (!event) continue;
     
@@ -253,11 +264,12 @@ dashboard.get('/next-event', async (c) => {
       if (!nextEvent || new Date(event.startDatetime) < new Date(nextEvent.startDatetime)) {
         nextEvent = event;
         nextTicket = ticket;
-        nextPayment = await (db as any)
+        nextPayment = await dbGet(
+          (db as any)
             .select()
             .from(payments)
             .where(eq((payments as any).ticketId, ticket.id))
-          .get();
+        );
       }
     }
   }
@@ -282,11 +294,12 @@ dashboard.get('/payments', async (c) => {
   const user = (c as any).get('user') as AuthUser;
   
   // Get all user's tickets first
-  const userTickets = await (db as any)
+  const userTickets = await dbAll<any>(
+    (db as any)
       .select()
       .from(tickets)
       .where(eq((tickets as any).userId, user.id))
-    .all();
+  );
   
   const ticketIds = userTickets.map((t: any) => t.id);
   
@@ -297,29 +310,32 @@ dashboard.get('/payments', async (c) => {
   // Get all payments for user's tickets
   const allPayments = [];
   for (const ticketId of ticketIds) {
-    const ticketPayments = await (db as any)
+    const ticketPayments = await dbAll<any>(
+      (db as any)
         .select()
         .from(payments)
         .where(eq((payments as any).ticketId, ticketId))
-      .all();
+    );
     
     for (const payment of ticketPayments) {
       const ticket = userTickets.find((t: any) => t.id === payment.ticketId);
       const event = ticket
-        ? await (db as any)
+        ? await dbGet<any>(
+            (db as any)
               .select()
               .from(events)
               .where(eq((events as any).id, ticket.eventId))
-            .get()
+          )
         : null;
       
-      let invoice = null;
+      let invoice: any = null;
       if (payment.status === 'paid') {
-        invoice = await (db as any)
+        invoice = await dbGet<any>(
+          (db as any)
             .select()
             .from(invoices)
             .where(eq((invoices as any).paymentId, payment.id))
-          .get();
+        );
       }
       
       allPayments.push({
@@ -355,36 +371,40 @@ dashboard.get('/payments', async (c) => {
 dashboard.get('/invoices', async (c) => {
   const user = (c as any).get('user') as AuthUser;
   
-  const userInvoices = await (db as any)
+  const userInvoices = await dbAll<any>(
+    (db as any)
       .select()
       .from(invoices)
       .where(eq((invoices as any).userId, user.id))
       .orderBy(desc((invoices as any).createdAt))
-    .all();
+  );
   
   // Get payment and event details for each invoice
   const invoicesWithDetails = await Promise.all(
     userInvoices.map(async (invoice: any) => {
-      const payment = await (db as any)
+      const payment = await dbGet<any>(
+        (db as any)
           .select()
           .from(payments)
           .where(eq((payments as any).id, invoice.paymentId))
-        .get();
+      );
       
-      let event = null;
+      let event: any = null;
       if (payment) {
-        const ticket = await (db as any)
+        const ticket = await dbGet<any>(
+          (db as any)
             .select()
             .from(tickets)
             .where(eq((tickets as any).id, payment.ticketId))
-          .get();
+        );
         
         if (ticket) {
-          event = await (db as any)
+          event = await dbGet<any>(
+            (db as any)
               .select()
               .from(events)
               .where(eq((events as any).id, ticket.eventId))
-            .get();
+          );
         }
       }
       
@@ -511,11 +531,12 @@ dashboard.get('/summary', async (c) => {
   const membershipDays = Math.floor((now.getTime() - createdDate.getTime()) / (1000 * 60 * 60 * 24));
   
   // Get ticket count
-  const userTickets = await (db as any)
+  const userTickets = await dbAll<any>(
+    (db as any)
       .select()
       .from(tickets)
       .where(eq((tickets as any).userId, user.id))
-    .all();
+  );
   
   const totalTickets = userTickets.length;
   const confirmedTickets = userTickets.filter((t: any) => t.status === 'confirmed' || t.status === 'checked_in').length;
@@ -524,11 +545,12 @@ dashboard.get('/summary', async (c) => {
   for (const ticket of userTickets) {
     if (ticket.status === 'cancelled') continue;
     
-    const event = await (db as any)
+    const event = await dbGet<any>(
+      (db as any)
         .select()
         .from(events)
         .where(eq((events as any).id, ticket.eventId))
-      .get();
+    );
     
     if (event && new Date(event.startDatetime) > now) {
       upcomingTickets.push({ ticket, event });
@@ -540,7 +562,8 @@ dashboard.get('/summary', async (c) => {
   let pendingPayments = 0;
   
   for (const ticketId of ticketIds) {
-    const payment = await (db as any)
+    const payment = await dbGet(
+      (db as any)
         .select()
         .from(payments)
         .where(
@@ -549,7 +572,7 @@ dashboard.get('/summary', async (c) => {
             eq((payments as any).status, 'pending_approval')
           )
         )
-      .get();
+    );
     
     if (payment) pendingPayments++;
   }

backend/src/routes/emails.ts

@@ -1,11 +1,11 @@
 import { Hono } from 'hono';
-import { db, emailTemplates, emailLogs, events, tickets } from '../db/index.js';
+import { db, dbGet, dbAll, emailTemplates, emailLogs, events, tickets } from '../db/index.js';
 import { eq, desc, and, sql } from 'drizzle-orm';
 import { requireAuth } from '../lib/auth.js';
-import { getNow } from '../lib/utils.js';
+import { getNow, generateId } from '../lib/utils.js';
-import { nanoid } from 'nanoid';
 import emailService from '../lib/email.js';
 import { getTemplateVariables, defaultTemplates } from '../lib/emailTemplates.js';
+import { getQueueStatus } from '../lib/emailQueue.js';
 
 const emailsRouter = new Hono();
 
@@ -13,11 +13,9 @@ const emailsRouter = new Hono();
 
 // Get all email templates
 emailsRouter.get('/templates', requireAuth(['admin', 'organizer']), async (c) => {
-  const templates = await (db as any)
+  const templates = await dbAll<any>(
-    .select()
+    (db as any).select().from(emailTemplates).orderBy(desc((emailTemplates as any).createdAt))
-    .from(emailTemplates)
+  );
-    .orderBy(desc((emailTemplates as any).createdAt))
-    .all();
   
   // Parse variables JSON for each template
   const parsedTemplates = templates.map((t: any) => ({
@@ -34,11 +32,12 @@ emailsRouter.get('/templates', requireAuth(['admin', 'organizer']), async (c) =>
 emailsRouter.get('/templates/:id', requireAuth(['admin', 'organizer']), async (c) => {
   const { id } = c.req.param();
   
-  const template = await (db as any)
+  const template = await dbGet<any>(
+    (db as any)
       .select()
       .from(emailTemplates)
       .where(eq((emailTemplates as any).id, id))
-    .get();
+  );
   
   if (!template) {
     return c.json({ error: 'Template not found' }, 404);
@@ -64,11 +63,9 @@ emailsRouter.post('/templates', requireAuth(['admin']), async (c) => {
   }
   
   // Check if slug already exists
-  const existing = await (db as any)
+  const existing = await dbGet<any>(
-    .select()
+    (db as any).select().from(emailTemplates).where(eq((emailTemplates as any).slug, slug))
-    .from(emailTemplates)
+  );
-    .where(eq((emailTemplates as any).slug, slug))
-    .get();
   
   if (existing) {
     return c.json({ error: 'Template with this slug already exists' }, 400);
@@ -76,7 +73,7 @@ emailsRouter.post('/templates', requireAuth(['admin']), async (c) => {
   
   const now = getNow();
   const template = {
-    id: nanoid(),
+    id: generateId(),
     name,
     slug,
     subject,
@@ -111,11 +108,12 @@ emailsRouter.put('/templates/:id', requireAuth(['admin']), async (c) => {
   const { id } = c.req.param();
   const body = await c.req.json();
   
-  const existing = await (db as any)
+  const existing = await dbGet<any>(
+    (db as any)
       .select()
       .from(emailTemplates)
       .where(eq((emailTemplates as any).id, id))
-    .get();
+  );
   
   if (!existing) {
     return c.json({ error: 'Template not found' }, 404);
@@ -148,11 +146,12 @@ emailsRouter.put('/templates/:id', requireAuth(['admin']), async (c) => {
     .set(updateData)
     .where(eq((emailTemplates as any).id, id));
   
-  const updated = await (db as any)
+  const updated = await dbGet<any>(
+    (db as any)
       .select()
       .from(emailTemplates)
       .where(eq((emailTemplates as any).id, id))
-    .get();
+  );
   
   return c.json({ 
     template: {
@@ -169,11 +168,9 @@ emailsRouter.put('/templates/:id', requireAuth(['admin']), async (c) => {
 emailsRouter.delete('/templates/:id', requireAuth(['admin']), async (c) => {
   const { id } = c.req.param();
   
-  const template = await (db as any)
+  const template = await dbGet<any>(
-    .select()
+    (db as any).select().from(emailTemplates).where(eq((emailTemplates as any).id, id))
-    .from(emailTemplates)
+  );
-    .where(eq((emailTemplates as any).id, id))
-    .get();
   
   if (!template) {
     return c.json({ error: 'Template not found' }, 404);
@@ -199,7 +196,7 @@ emailsRouter.get('/templates/:slug/variables', requireAuth(['admin', 'organizer'
 
 // ==================== Email Sending Routes ====================
 
-// Send email using template to event attendees
+// Send email using template to event attendees (non-blocking, queued)
 emailsRouter.post('/send/event/:eventId', requireAuth(['admin', 'organizer']), async (c) => {
   const { eventId } = c.req.param();
   const user = (c as any).get('user');
@@ -210,7 +207,8 @@ emailsRouter.post('/send/event/:eventId', requireAuth(['admin', 'organizer']), a
     return c.json({ error: 'Template slug is required' }, 400);
   }
   
-  const result = await emailService.sendToEventAttendees({
+  // Queue emails for background processing instead of sending synchronously
+  const result = await emailService.queueEventEmails({
     eventId,
     templateSlug,
     customVariables,
@@ -306,11 +304,12 @@ emailsRouter.get('/logs', requireAuth(['admin', 'organizer']), async (c) => {
     query = query.where(and(...conditions));
   }
   
-  const logs = await query
+  const logs = await dbAll(
+    query
       .orderBy(desc((emailLogs as any).createdAt))
       .limit(limit)
       .offset(offset)
-    .all();
+  );
   
   // Get total count
   let countQuery = (db as any)
@@ -321,7 +320,7 @@ emailsRouter.get('/logs', requireAuth(['admin', 'organizer']), async (c) => {
     countQuery = countQuery.where(and(...conditions));
   }
   
-  const totalResult = await countQuery.get();
+  const totalResult = await dbGet<any>(countQuery);
   const total = totalResult?.count || 0;
   
   return c.json({ 
@@ -339,11 +338,9 @@ emailsRouter.get('/logs', requireAuth(['admin', 'organizer']), async (c) => {
 emailsRouter.get('/logs/:id', requireAuth(['admin', 'organizer']), async (c) => {
   const { id } = c.req.param();
   
-  const log = await (db as any)
+  const log = await dbGet<any>(
-    .select()
+    (db as any).select().from(emailLogs).where(eq((emailLogs as any).id, id))
-    .from(emailLogs)
+  );
-    .where(eq((emailLogs as any).id, id))
-    .get();
   
   if (!log) {
     return c.json({ error: 'Email log not found' }, 404);
@@ -362,22 +359,22 @@ emailsRouter.get('/stats', requireAuth(['admin', 'organizer']), async (c) => {
     ? (db as any).select({ count: sql<number>`count(*)` }).from(emailLogs).where(baseCondition)
     : (db as any).select({ count: sql<number>`count(*)` }).from(emailLogs);
   
-  const total = (await totalQuery.get())?.count || 0;
+  const total = (await dbGet<any>(totalQuery))?.count || 0;
   
   const sentCondition = baseCondition
     ? and(baseCondition, eq((emailLogs as any).status, 'sent'))
     : eq((emailLogs as any).status, 'sent');
-  const sent = (await (db as any).select({ count: sql<number>`count(*)` }).from(emailLogs).where(sentCondition).get())?.count || 0;
+  const sent = (await dbGet<any>((db as any).select({ count: sql<number>`count(*)` }).from(emailLogs).where(sentCondition)))?.count || 0;
   
   const failedCondition = baseCondition
     ? and(baseCondition, eq((emailLogs as any).status, 'failed'))
     : eq((emailLogs as any).status, 'failed');
-  const failed = (await (db as any).select({ count: sql<number>`count(*)` }).from(emailLogs).where(failedCondition).get())?.count || 0;
+  const failed = (await dbGet<any>((db as any).select({ count: sql<number>`count(*)` }).from(emailLogs).where(failedCondition)))?.count || 0;
   
   const pendingCondition = baseCondition
     ? and(baseCondition, eq((emailLogs as any).status, 'pending'))
     : eq((emailLogs as any).status, 'pending');
-  const pending = (await (db as any).select({ count: sql<number>`count(*)` }).from(emailLogs).where(pendingCondition).get())?.count || 0;
+  const pending = (await dbGet<any>((db as any).select({ count: sql<number>`count(*)` }).from(emailLogs).where(pendingCondition)))?.count || 0;
   
   return c.json({
     stats: {
@@ -416,4 +413,10 @@ emailsRouter.post('/test', requireAuth(['admin']), async (c) => {
   return c.json(result);
 });
 
+// Get email queue status
+emailsRouter.get('/queue/status', requireAuth(['admin']), async (c) => {
+  const status = getQueueStatus();
+  return c.json({ status });
+});
+
 export default emailsRouter;

backend/src/routes/events.ts

@@ -1,10 +1,11 @@
 import { Hono } from 'hono';
 import { zValidator } from '@hono/zod-validator';
 import { z } from 'zod';
-import { db, events, tickets, payments, eventPaymentOverrides, emailLogs, invoices } from '../db/index.js';
+import { db, dbGet, dbAll, events, tickets, payments, eventPaymentOverrides, emailLogs, invoices, siteSettings } from '../db/index.js';
 import { eq, desc, and, gte, sql } from 'drizzle-orm';
 import { requireAuth, getAuthUser } from '../lib/auth.js';
-import { generateId, getNow } from '../lib/utils.js';
+import { generateId, getNow, convertBooleansForDb, toDbDate, calculateAvailableSeats } from '../lib/utils.js';
+import { revalidateFrontendCache } from '../lib/revalidate.js';
 
 interface UserContext {
   id: string;
@@ -15,6 +16,21 @@ interface UserContext {
 
 const eventsRouter = new Hono<{ Variables: { user: UserContext } }>();
 
+// Helper to normalize event data for API response
+// PostgreSQL decimal returns strings, booleans are stored as integers
+function normalizeEvent(event: any) {
+  if (!event) return event;
+  return {
+    ...event,
+    // Convert price from string/decimal to clean number
+    price: typeof event.price === 'string' ? parseFloat(event.price) : Number(event.price),
+    // Convert capacity from string to number if needed
+    capacity: typeof event.capacity === 'string' ? parseInt(event.capacity, 10) : Number(event.capacity),
+    // Convert boolean integers to actual booleans for frontend
+    externalBookingEnabled: Boolean(event.externalBookingEnabled),
+  };
+}
+
 // Custom validation error handler
 const validationHook = (result: any, c: any) => {
   if (!result.success) {
@@ -23,6 +39,27 @@ const validationHook = (result: any, c: any) => {
   }
 };
 
+// Helper to parse price from string (handles both "45000" and "41,44" formats)
+const parsePrice = (val: unknown): number => {
+  if (typeof val === 'number') return val;
+  if (typeof val === 'string') {
+    // Replace comma with dot for decimal parsing (European format)
+    const normalized = val.replace(',', '.');
+    const parsed = parseFloat(normalized);
+    return isNaN(parsed) ? 0 : parsed;
+  }
+  return 0;
+};
+
+// Helper to normalize boolean (handles true/false and 0/1)
+const normalizeBoolean = (val: unknown): boolean => {
+  if (typeof val === 'boolean') return val;
+  if (typeof val === 'number') return val !== 0;
+  if (val === 'true') return true;
+  if (val === 'false') return false;
+  return false;
+};
+
 const baseEventSchema = z.object({
   title: z.string().min(1),
   titleEs: z.string().optional().nullable(),
@@ -34,14 +71,15 @@ const baseEventSchema = z.object({
   endDatetime: z.string().optional().nullable(),
   location: z.string().min(1),
   locationUrl: z.string().url().optional().nullable().or(z.literal('')),
-  price: z.number().min(0).default(0),
+  // Accept price as number or string (handles "45000" and "41,44" formats)
+  price: z.union([z.number(), z.string()]).transform(parsePrice).pipe(z.number().min(0)).default(0),
   currency: z.string().default('PYG'),
-  capacity: z.number().min(1).default(50),
+  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', 'cancelled', 'completed', 'archived']).default('draft'),
+  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('')),
-  // External booking support
+  // External booking support - accept boolean or number (0/1 from DB)
-  externalBookingEnabled: z.boolean().default(false),
+  externalBookingEnabled: z.union([z.boolean(), z.number()]).transform(normalizeBoolean).default(false),
   externalBookingUrl: z.string().url().optional().nullable().or(z.literal('')),
 });
 
@@ -94,26 +132,31 @@ eventsRouter.get('/', async (c) => {
     );
   }
   
-  const result = await query.orderBy(desc((events as any).startDatetime)).all();
+  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) => {
-      const ticketCount = await (db as 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),
-            eq((tickets as any).status, 'confirmed')
+              sql`${(tickets as any).status} IN ('confirmed', 'checked_in')`
             )
           )
-        .get();
+      );
       
+      const normalized = normalizeEvent(event);
+      const bookedCount = ticketCount?.count || 0;
       return {
-        ...event,
+        ...normalized,
-        bookedCount: ticketCount?.count || 0,
+        bookedCount,
-        availableSeats: event.capacity - (ticketCount?.count || 0),
+        availableSeats: calculateAvailableSeats(normalized.capacity, bookedCount),
       };
     })
   );
@@ -125,38 +168,120 @@ eventsRouter.get('/', async (c) => {
 eventsRouter.get('/:id', async (c) => {
   const id = c.req.param('id');
   
-  const event = await (db as any).select().from(events).where(eq((events as any).id, id)).get();
+  const event = await dbGet<any>(
+    (db as any).select().from(events).where(eq((events as any).id, id))
+  );
   
   if (!event) {
     return c.json({ error: 'Event not found' }, 404);
   }
   
-  // Get ticket count
+  // Count confirmed AND checked_in tickets (checked_in were previously confirmed)
-  const ticketCount = await (db as any)
+  // 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, id),
-        eq((tickets as any).status, 'confirmed')
+          sql`${(tickets as any).status} IN ('confirmed', 'checked_in')`
         )
       )
-    .get();
+  );
   
+  const normalized = normalizeEvent(event);
+  const bookedCount = ticketCount?.count || 0;
   return c.json({
     event: {
-      ...event,
+      ...normalized,
-      bookedCount: ticketCount?.count || 0,
+      bookedCount,
-      availableSeats: event.capacity - (ticketCount?.count || 0),
+      availableSeats: calculateAvailableSeats(normalized.capacity, bookedCount),
     },
   });
 });
 
-// Get next upcoming event (public)
+// Helper function to get ticket count for an event
+async function getEventTicketCount(eventId: string): Promise<number> {
+  const ticketCount = await dbGet<any>(
+    (db as any)
+      .select({ count: sql<number>`count(*)` })
+      .from(tickets)
+      .where(
+        and(
+          eq((tickets as any).eventId, eventId),
+          sql`${(tickets as any).status} IN ('confirmed', 'checked_in')`
+        )
+      )
+  );
+  return ticketCount?.count || 0;
+}
+
+// Get next upcoming event (public) - returns featured event if valid, otherwise next upcoming
 eventsRouter.get('/next/upcoming', async (c) => {
   const now = getNow();
+  const nowMs = Date.now();
   
-  const event = await (db as any)
+  // First, check if there's a featured event in site settings
+  const settings = await dbGet<any>(
+    (db as any).select().from(siteSettings).limit(1)
+  );
+  
+  let featuredEvent = null;
+  let shouldUnsetFeatured = false;
+  
+  if (settings?.featuredEventId) {
+    featuredEvent = await dbGet<any>(
+      (db as any)
+        .select()
+        .from(events)
+        .where(eq((events as any).id, settings.featuredEventId))
+    );
+    
+    if (featuredEvent) {
+      const eventEndTime = featuredEvent.endDatetime || featuredEvent.startDatetime;
+      const isPublished = featuredEvent.status === 'published';
+      const hasNotEnded = new Date(eventEndTime).getTime() > nowMs;
+      
+      if (!isPublished || !hasNotEnded) {
+        shouldUnsetFeatured = true;
+        featuredEvent = null;
+      }
+    } else {
+      shouldUnsetFeatured = true;
+    }
+  }
+  
+  if (shouldUnsetFeatured && settings) {
+    try {
+      await (db as any)
+        .update(siteSettings)
+        .set({ featuredEventId: null, updatedAt: now })
+        .where(eq((siteSettings as any).id, settings.id));
+      console.log('Featured event auto-cleared (event ended or unpublished)');
+      revalidateFrontendCache();
+    } catch (err: any) {
+      console.error('Failed to clear featured event:', err);
+    }
+  }
+  
+  // If we have a valid featured event, return it
+  if (featuredEvent) {
+    const bookedCount = await getEventTicketCount(featuredEvent.id);
+    const normalized = normalizeEvent(featuredEvent);
+    return c.json({
+      event: {
+        ...normalized,
+        bookedCount,
+        availableSeats: calculateAvailableSeats(normalized.capacity, bookedCount),
+        isFeatured: true,
+      },
+    });
+  }
+  
+  // Fallback: get the next upcoming published event
+  const event = await dbGet<any>(
+    (db as any)
       .select()
       .from(events)
       .where(
@@ -167,28 +292,20 @@ eventsRouter.get('/next/upcoming', async (c) => {
       )
       .orderBy((events as any).startDatetime)
       .limit(1)
-    .get();
+  );
   
   if (!event) {
     return c.json({ event: null });
   }
   
-  const ticketCount = await (db as any)
+  const bookedCount = await getEventTicketCount(event.id);
-    .select({ count: sql<number>`count(*)` })
+  const normalized = normalizeEvent(event);
-    .from(tickets)
-    .where(
-      and(
-        eq((tickets as any).eventId, event.id),
-        eq((tickets as any).status, 'confirmed')
-      )
-    )
-    .get();
-  
   return c.json({
     event: {
-      ...event,
+      ...normalized,
-      bookedCount: ticketCount?.count || 0,
+      bookedCount,
-      availableSeats: event.capacity - (ticketCount?.count || 0),
+      availableSeats: calculateAvailableSeats(normalized.capacity, bookedCount),
+      isFeatured: false,
     },
   });
 });
@@ -200,16 +317,25 @@ eventsRouter.post('/', requireAuth(['admin', 'organizer']), zValidator('json', c
   const now = getNow();
   const id = generateId();
   
+  // Convert data for database compatibility
+  const dbData = convertBooleansForDb(data);
+  
   const newEvent = {
     id,
-    ...data,
+    ...dbData,
+    startDatetime: toDbDate(data.startDatetime),
+    endDatetime: data.endDatetime ? toDbDate(data.endDatetime) : null,
     createdAt: now,
     updatedAt: now,
   };
   
   await (db as any).insert(events).values(newEvent);
   
-  return c.json({ event: newEvent }, 201);
+  // Revalidate sitemap when a new event is created
+  revalidateFrontendCache();
+  
+  // Return normalized event data
+  return c.json({ event: normalizeEvent(newEvent) }, 201);
 });
 
 // Update event (admin/organizer only)
@@ -217,46 +343,67 @@ eventsRouter.put('/:id', requireAuth(['admin', 'organizer']), zValidator('json',
   const id = c.req.param('id');
   const data = c.req.valid('json');
   
-  const existing = await (db as any).select().from(events).where(eq((events as any).id, id)).get();
+  const existing = await dbGet(
+    (db as any).select().from(events).where(eq((events as any).id, id))
+  );
   if (!existing) {
     return c.json({ error: 'Event not found' }, 404);
   }
   
   const now = getNow();
+  // Convert data for database compatibility
+  const updateData: Record<string, any> = { ...convertBooleansForDb(data), updatedAt: now };
+  // Convert datetime fields if present
+  if (data.startDatetime) {
+    updateData.startDatetime = toDbDate(data.startDatetime);
+  }
+  if (data.endDatetime !== undefined) {
+    updateData.endDatetime = data.endDatetime ? toDbDate(data.endDatetime) : null;
+  }
+  
   await (db as any)
     .update(events)
-    .set({ ...data, updatedAt: now })
+    .set(updateData)
     .where(eq((events as any).id, id));
   
-  const updated = await (db as any).select().from(events).where(eq((events as any).id, id)).get();
+  const updated = await dbGet(
+    (db as any).select().from(events).where(eq((events as any).id, id))
+  );
   
-  return c.json({ event: updated });
+  // Revalidate sitemap when an event is updated (status/dates may have changed)
+  revalidateFrontendCache();
+  
+  return c.json({ event: normalizeEvent(updated) });
 });
 
 // Delete event (admin only)
 eventsRouter.delete('/:id', requireAuth(['admin']), async (c) => {
   const id = c.req.param('id');
   
-  const existing = await (db as any).select().from(events).where(eq((events as any).id, id)).get();
+  const existing = await dbGet(
+    (db as any).select().from(events).where(eq((events as any).id, id))
+  );
   if (!existing) {
     return c.json({ error: 'Event not found' }, 404);
   }
   
   // Get all tickets for this event
-  const eventTickets = await (db as any)
+  const eventTickets = await dbAll<any>(
+    (db as any)
       .select()
       .from(tickets)
       .where(eq((tickets as any).eventId, id))
-    .all();
+  );
   
   // Delete invoices and payments for all tickets of this event
   for (const ticket of eventTickets) {
     // Get payments for this ticket
-    const ticketPayments = await (db as any)
+    const ticketPayments = await dbAll<any>(
+      (db as any)
         .select()
         .from(payments)
         .where(eq((payments as any).ticketId, ticket.id))
-      .all();
+    );
     
     // Delete invoices for each payment
     for (const payment of ticketPayments) {
@@ -282,6 +429,9 @@ eventsRouter.delete('/:id', requireAuth(['admin']), async (c) => {
   // Finally delete the event
   await (db as any).delete(events).where(eq((events as any).id, id));
   
+  // Revalidate sitemap when an event is deleted
+  revalidateFrontendCache();
+  
   return c.json({ message: 'Event deleted successfully' });
 });
 
@@ -289,11 +439,12 @@ eventsRouter.delete('/:id', requireAuth(['admin']), async (c) => {
 eventsRouter.get('/:id/attendees', requireAuth(['admin', 'organizer', 'staff']), async (c) => {
   const id = c.req.param('id');
   
-  const attendees = await (db as any)
+  const attendees = await dbAll(
+    (db as any)
       .select()
       .from(tickets)
       .where(eq((tickets as any).eventId, id))
-    .all();
+  );
   
   return c.json({ attendees });
 });
@@ -302,7 +453,9 @@ eventsRouter.get('/:id/attendees', requireAuth(['admin', 'organizer', 'staff']),
 eventsRouter.post('/:id/duplicate', requireAuth(['admin', 'organizer']), async (c) => {
   const id = c.req.param('id');
   
-  const existing = await (db as any).select().from(events).where(eq((events as any).id, id)).get();
+  const existing = await dbGet<any>(
+    (db as any).select().from(events).where(eq((events as any).id, id))
+  );
   if (!existing) {
     return c.json({ error: 'Event not found' }, 404);
   }
@@ -319,7 +472,7 @@ eventsRouter.post('/:id/duplicate', requireAuth(['admin', 'organizer']), async (
     descriptionEs: existing.descriptionEs,
     shortDescription: existing.shortDescription,
     shortDescriptionEs: existing.shortDescriptionEs,
-    startDatetime: existing.startDatetime,
+    startDatetime: existing.startDatetime, // Already in DB format from existing record
     endDatetime: existing.endDatetime,
     location: existing.location,
     locationUrl: existing.locationUrl,
@@ -328,7 +481,7 @@ eventsRouter.post('/:id/duplicate', requireAuth(['admin', 'organizer']), async (
     capacity: existing.capacity,
     status: 'draft',
     bannerUrl: existing.bannerUrl,
-    externalBookingEnabled: existing.externalBookingEnabled || false,
+    externalBookingEnabled: existing.externalBookingEnabled ?? 0, // Already in DB format (0/1)
     externalBookingUrl: existing.externalBookingUrl,
     createdAt: now,
     updatedAt: now,
@@ -336,7 +489,7 @@ eventsRouter.post('/:id/duplicate', requireAuth(['admin', 'organizer']), async (
   
   await (db as any).insert(events).values(duplicatedEvent);
   
-  return c.json({ event: duplicatedEvent, message: 'Event duplicated successfully' }, 201);
+  return c.json({ event: normalizeEvent(duplicatedEvent), message: 'Event duplicated successfully' }, 201);
 });
 
 export default eventsRouter;

backend/src/routes/faq.ts

@@ -0,0 +1,242 @@
+import { Hono } from 'hono';
+import { db, dbGet, dbAll, faqQuestions } from '../db/index.js';
+import { eq, asc } from 'drizzle-orm';
+import { requireAuth } from '../lib/auth.js';
+import { getNow, generateId } from '../lib/utils.js';
+
+const faqRouter = new Hono();
+
+// ==================== Public Routes ====================
+
+// Get FAQ list for public (only enabled; optional filter for homepage)
+faqRouter.get('/', async (c) => {
+  const homepage = c.req.query('homepage') === 'true';
+
+  let query = (db as any)
+    .select()
+    .from(faqQuestions)
+    .where(eq((faqQuestions as any).enabled, 1))
+    .orderBy(asc((faqQuestions as any).rank), asc((faqQuestions as any).createdAt));
+
+  const rows = await dbAll<any>(query);
+
+  let items = rows;
+  if (homepage) {
+    items = rows.filter((r: any) => r.showOnHomepage === true || r.showOnHomepage === 1 || r.show_on_homepage === true || r.show_on_homepage === 1);
+  }
+
+  return c.json({
+    faqs: items.map((r: any) => ({
+      id: r.id,
+      question: r.question,
+      questionEs: r.questionEs ?? r.question_es ?? null,
+      answer: r.answer,
+      answerEs: r.answerEs ?? r.answer_es ?? null,
+      rank: r.rank ?? 0,
+    })),
+  });
+});
+
+// ==================== Admin Routes ====================
+
+// Get all FAQ questions for admin (all, ordered by rank)
+faqRouter.get('/admin/list', requireAuth(['admin']), async (c) => {
+  const rows = await dbAll<any>(
+    (db as any)
+      .select()
+      .from(faqQuestions)
+      .orderBy(asc((faqQuestions as any).rank), asc((faqQuestions as any).createdAt))
+  );
+
+  const list = rows.map((r: any) => ({
+    id: r.id,
+    question: r.question,
+    questionEs: r.questionEs ?? r.question_es ?? null,
+    answer: r.answer,
+    answerEs: r.answerEs ?? r.answer_es ?? null,
+    enabled: r.enabled === true || r.enabled === 1,
+    showOnHomepage: r.showOnHomepage === true || r.showOnHomepage === 1 || r.show_on_homepage === true || r.show_on_homepage === 1,
+    rank: r.rank ?? 0,
+    createdAt: r.createdAt,
+    updatedAt: r.updatedAt,
+  }));
+
+  return c.json({ faqs: list });
+});
+
+// Get one FAQ by id (admin)
+faqRouter.get('/admin/:id', requireAuth(['admin']), async (c) => {
+  const { id } = c.req.param();
+  const row = await dbGet<any>(
+    (db as any).select().from(faqQuestions).where(eq((faqQuestions as any).id, id))
+  );
+  if (!row) {
+    return c.json({ error: 'FAQ not found' }, 404);
+  }
+  return c.json({
+    faq: {
+      id: row.id,
+      question: row.question,
+      questionEs: row.questionEs ?? row.question_es ?? null,
+      answer: row.answer,
+      answerEs: row.answerEs ?? row.answer_es ?? null,
+      enabled: row.enabled === true || row.enabled === 1,
+      showOnHomepage: row.showOnHomepage === true || row.showOnHomepage === 1 || row.show_on_homepage === true || row.show_on_homepage === 1,
+      rank: row.rank ?? 0,
+      createdAt: row.createdAt,
+      updatedAt: row.updatedAt,
+    },
+  });
+});
+
+// Create FAQ (admin)
+faqRouter.post('/admin', requireAuth(['admin']), async (c) => {
+  const body = await c.req.json();
+  const { question, questionEs, answer, answerEs, enabled, showOnHomepage } = body;
+
+  if (!question || typeof question !== 'string' || !answer || typeof answer !== 'string') {
+    return c.json({ error: 'Question and answer (EN) are required' }, 400);
+  }
+
+  const now = getNow();
+  const id = generateId();
+
+  const allForRank = await dbAll<any>(
+    (db as any).select({ rank: (faqQuestions as any).rank }).from(faqQuestions)
+  );
+  const maxRank = allForRank.length
+    ? Math.max(...allForRank.map((r: any) => Number(r.rank ?? 0)))
+    : 0;
+  const nextRank = maxRank + 1;
+
+  await (db as any).insert(faqQuestions).values({
+    id,
+    question: String(question).trim(),
+    questionEs: questionEs != null ? String(questionEs).trim() : null,
+    answer: String(answer).trim(),
+    answerEs: answerEs != null ? String(answerEs).trim() : null,
+    enabled: enabled !== false ? 1 : 0,
+    showOnHomepage: showOnHomepage === true ? 1 : 0,
+    rank: nextRank,
+    createdAt: now,
+    updatedAt: now,
+  });
+
+  const created = await dbGet<any>(
+    (db as any).select().from(faqQuestions).where(eq((faqQuestions as any).id, id))
+  );
+  return c.json(
+    {
+      faq: {
+        id: created.id,
+        question: created.question,
+        questionEs: created.questionEs ?? created.question_es ?? null,
+        answer: created.answer,
+        answerEs: created.answerEs ?? created.answer_es ?? null,
+        enabled: created.enabled === true || created.enabled === 1,
+        showOnHomepage: created.showOnHomepage === true || created.showOnHomepage === 1 || created.show_on_homepage === true || created.show_on_homepage === 1,
+        rank: created.rank ?? 0,
+        createdAt: created.createdAt,
+        updatedAt: created.updatedAt,
+      },
+    },
+    201
+  );
+});
+
+// Update FAQ (admin)
+faqRouter.put('/admin/:id', requireAuth(['admin']), async (c) => {
+  const { id } = c.req.param();
+  const body = await c.req.json();
+  const { question, questionEs, answer, answerEs, enabled, showOnHomepage } = body;
+
+  const existing = await dbGet<any>(
+    (db as any).select().from(faqQuestions).where(eq((faqQuestions as any).id, id))
+  );
+  if (!existing) {
+    return c.json({ error: 'FAQ not found' }, 404);
+  }
+
+  const updateData: Record<string, unknown> = {
+    updatedAt: getNow(),
+  };
+  if (question !== undefined) updateData.question = String(question).trim();
+  if (questionEs !== undefined) updateData.questionEs = questionEs == null ? null : String(questionEs).trim();
+  if (answer !== undefined) updateData.answer = String(answer).trim();
+  if (answerEs !== undefined) updateData.answerEs = answerEs == null ? null : String(answerEs).trim();
+  if (typeof enabled === 'boolean') updateData.enabled = enabled ? 1 : 0;
+  if (typeof showOnHomepage === 'boolean') updateData.showOnHomepage = showOnHomepage ? 1 : 0;
+
+  await (db as any).update(faqQuestions).set(updateData).where(eq((faqQuestions as any).id, id));
+
+  const updated = await dbGet<any>(
+    (db as any).select().from(faqQuestions).where(eq((faqQuestions as any).id, id))
+  );
+  return c.json({
+    faq: {
+      id: updated.id,
+      question: updated.question,
+      questionEs: updated.questionEs ?? updated.question_es ?? null,
+      answer: updated.answer,
+      answerEs: updated.answerEs ?? updated.answer_es ?? null,
+      enabled: updated.enabled === true || updated.enabled === 1,
+      showOnHomepage: updated.showOnHomepage === true || updated.showOnHomepage === 1 || updated.show_on_homepage === true || updated.show_on_homepage === 1,
+      rank: updated.rank ?? 0,
+      createdAt: updated.createdAt,
+      updatedAt: updated.updatedAt,
+    },
+  });
+});
+
+// Delete FAQ (admin)
+faqRouter.delete('/admin/:id', requireAuth(['admin']), async (c) => {
+  const { id } = c.req.param();
+  const existing = await dbGet<any>(
+    (db as any).select().from(faqQuestions).where(eq((faqQuestions as any).id, id))
+  );
+  if (!existing) {
+    return c.json({ error: 'FAQ not found' }, 404);
+  }
+  await (db as any).delete(faqQuestions).where(eq((faqQuestions as any).id, id));
+  return c.json({ message: 'FAQ deleted' });
+});
+
+// Reorder FAQs (admin) – body: { ids: string[] } (ordered list of ids)
+faqRouter.post('/admin/reorder', requireAuth(['admin']), async (c) => {
+  const body = await c.req.json();
+  const { ids } = body;
+  if (!Array.isArray(ids) || ids.length === 0) {
+    return c.json({ error: 'ids array is required' }, 400);
+  }
+
+  const now = getNow();
+  for (let i = 0; i < ids.length; i++) {
+    await (db as any)
+      .update(faqQuestions)
+      .set({ rank: i, updatedAt: now })
+      .where(eq((faqQuestions as any).id, ids[i]));
+  }
+
+  const rows = await dbAll<any>(
+    (db as any)
+      .select()
+      .from(faqQuestions)
+      .orderBy(asc((faqQuestions as any).rank), asc((faqQuestions as any).createdAt))
+  );
+  const list = rows.map((r: any) => ({
+    id: r.id,
+    question: r.question,
+    questionEs: r.questionEs ?? r.question_es ?? null,
+    answer: r.answer,
+    answerEs: r.answerEs ?? r.answer_es ?? null,
+    enabled: r.enabled === true || r.enabled === 1,
+    showOnHomepage: r.showOnHomepage === true || r.showOnHomepage === 1 || r.show_on_homepage === true || r.show_on_homepage === 1,
+    rank: r.rank ?? 0,
+    createdAt: r.createdAt,
+    updatedAt: r.updatedAt,
+  }));
+
+  return c.json({ faqs: list });
+});
+
+export default faqRouter;

backend/src/routes/legal-pages.ts

@@ -0,0 +1,400 @@
+import { Hono } from 'hono';
+import { db, dbGet, dbAll, legalPages } from '../db/index.js';
+import { eq, desc } from 'drizzle-orm';
+import { requireAuth } from '../lib/auth.js';
+import { getNow, generateId } from '../lib/utils.js';
+import { replaceLegalPlaceholders } from '../lib/legal-placeholders.js';
+import fs from 'fs';
+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 '';
+  
+  let text = markdown;
+  
+  // Remove markdown heading markers (# ## ###)
+  text = text.replace(/^#{1,6}\s+/gm, '');
+  
+  // Remove horizontal rules
+  text = text.replace(/^---+$/gm, '');
+  
+  // Remove bold/italic markers
+  text = text.replace(/\*\*([^*]+)\*\*/g, '$1');
+  text = text.replace(/\*([^*]+)\*/g, '$1');
+  text = text.replace(/__([^_]+)__/g, '$1');
+  text = text.replace(/_([^_]+)_/g, '$1');
+  
+  // Remove list markers (preserve text)
+  text = text.replace(/^\s*[\*\-\+]\s+/gm, '');
+  text = text.replace(/^\s*\d+\.\s+/gm, '');
+  
+  // Remove link formatting [text](url) -> text
+  text = text.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
+  
+  // Remove double-space line breaks
+  text = text.replace(/  \n/g, '\n');
+  
+  // Normalize multiple newlines
+  text = text.replace(/\n{3,}/g, '\n\n');
+  
+  return text.trim();
+}
+
+// Helper: Extract title from markdown content
+function extractTitleFromMarkdown(content: string): string {
+  if (!content) return 'Untitled';
+  
+  const match = content.match(/^#\s+(.+?)(?:\s*[–-]\s*.+)?$/m);
+  if (match) {
+    return match[1].trim();
+  }
+  // Fallback to first line
+  const firstLine = content.split('\n')[0].replace(/^#+\s*/, '').trim();
+  return firstLine || 'Untitled';
+}
+
+// Helper: Get legal directory path
+function getLegalDir(): string {
+  // When running from backend, legal folder is in frontend
+  const possiblePaths = [
+    path.join(process.cwd(), '../frontend/legal'),
+    path.join(process.cwd(), 'frontend/legal'),
+    path.join(process.cwd(), 'legal'),
+  ];
+  
+  for (const p of possiblePaths) {
+    if (fs.existsSync(p)) {
+      return p;
+    }
+  }
+  
+  return possiblePaths[0]; // Default
+}
+
+// Helper: Convert filename to slug
+function fileNameToSlug(fileName: string): string {
+  return fileName.replace('.md', '').replace(/_/g, '-');
+}
+
+// Title map for localization
+const titleMap: Record<string, { en: string; es: string }> = {
+  'privacy-policy': { en: 'Privacy Policy', es: 'Política de Privacidad' },
+  'terms-policy': { en: 'Terms & Conditions', es: 'Términos y Condiciones' },
+  'refund-cancelation-policy': { en: 'Refund & Cancellation Policy', es: 'Política de Reembolso y Cancelación' },
+};
+
+// Helper: Get localized content with fallback
+// If requested locale content is missing, fallback to the other locale
+function getLocalizedContent(page: any, locale: string = 'en'): { title: string; contentMarkdown: string } {
+  const isSpanish = locale === 'es';
+  
+  // Title: prefer requested locale, fallback to other
+  let title: string;
+  if (isSpanish) {
+    title = page.titleEs || page.title;
+  } else {
+    title = page.title || page.titleEs;
+  }
+  
+  // Content: prefer requested locale, fallback to other
+  let contentMarkdown: string;
+  if (isSpanish) {
+    contentMarkdown = page.contentMarkdownEs || page.contentMarkdown;
+  } else {
+    contentMarkdown = page.contentMarkdown || page.contentMarkdownEs;
+  }
+  
+  return { title, contentMarkdown };
+}
+
+// ==================== Public Routes ====================
+
+// Get all legal pages (public, for footer/navigation)
+legalPagesRouter.get('/', async (c) => {
+  const locale = c.req.query('locale') || 'en';
+  
+  const pages = await dbAll<any>(
+    (db as any)
+      .select({
+        id: (legalPages as any).id,
+        slug: (legalPages as any).slug,
+        title: (legalPages as any).title,
+        titleEs: (legalPages as any).titleEs,
+        updatedAt: (legalPages as any).updatedAt,
+      })
+      .from(legalPages)
+      .orderBy((legalPages as any).slug)
+  );
+  
+  // Return pages with localized title
+  const localizedPages = pages.map((page: any) => ({
+    id: page.id,
+    slug: page.slug,
+    title: locale === 'es' ? (page.titleEs || page.title) : (page.title || page.titleEs),
+    updatedAt: page.updatedAt,
+  }));
+  
+  return c.json({ pages: localizedPages });
+});
+
+// Get single legal page (public, for rendering)
+legalPagesRouter.get('/:slug', async (c) => {
+  const { slug } = c.req.param();
+  const locale = c.req.query('locale') || 'en';
+  
+  // First try to get from database
+  const page = await dbGet<any>(
+    (db as any).select().from(legalPages).where(eq((legalPages as any).slug, slug))
+  );
+  
+  if (page) {
+    // Get localized content with fallback
+    const { title, contentMarkdown } = getLocalizedContent(page, locale);
+    
+    // Replace legal placeholders before returning
+    const processedContent = await replaceLegalPlaceholders(contentMarkdown, page.updatedAt);
+    
+    return c.json({
+      page: {
+        id: page.id,
+        slug: page.slug,
+        title,
+        contentMarkdown: processedContent,
+        updatedAt: page.updatedAt,
+        source: 'database',
+      }
+    });
+  }
+  
+  // Fallback to filesystem
+  const legalDir = getLegalDir();
+  const fileName = slug.replace(/-/g, '_') + '.md';
+  const filePath = path.join(legalDir, fileName);
+  
+  if (fs.existsSync(filePath)) {
+    const content = fs.readFileSync(filePath, 'utf-8');
+    const titles = titleMap[slug];
+    const title = locale === 'es' 
+      ? (titles?.es || titles?.en || slug)
+      : (titles?.en || titles?.es || slug);
+    
+    // Replace legal placeholders in filesystem content too
+    const processedContent = await replaceLegalPlaceholders(content);
+    
+    return c.json({
+      page: {
+        slug,
+        title,
+        contentMarkdown: processedContent,
+        source: 'filesystem',
+      }
+    });
+  }
+  
+  return c.json({ error: 'Legal page not found' }, 404);
+});
+
+// ==================== Admin Routes ====================
+
+// Get all legal pages for admin (with full content)
+legalPagesRouter.get('/admin/list', requireAuth(['admin']), async (c) => {
+  const pages = await dbAll<any>(
+    (db as any)
+      .select()
+      .from(legalPages)
+      .orderBy((legalPages as any).slug)
+  );
+  
+  // Add flags to indicate which languages have content
+  const pagesWithFlags = pages.map((page: any) => ({
+    ...page,
+    hasEnglish: Boolean(page.contentText),
+    hasSpanish: Boolean(page.contentTextEs),
+  }));
+  
+  return c.json({ pages: pagesWithFlags });
+});
+
+// Get single legal page for editing (admin)
+legalPagesRouter.get('/admin/:slug', requireAuth(['admin']), async (c) => {
+  const { slug } = c.req.param();
+  
+  const page = await dbGet<any>(
+    (db as any).select().from(legalPages).where(eq((legalPages as any).slug, slug))
+  );
+  
+  if (!page) {
+    return c.json({ error: 'Legal page not found' }, 404);
+  }
+  
+  return c.json({ 
+    page: {
+      ...page,
+      hasEnglish: Boolean(page.contentText),
+      hasSpanish: Boolean(page.contentTextEs),
+    }
+  });
+});
+
+// Update legal page (admin only)
+// Note: No creation or deletion - only updates are allowed
+// Accepts markdown content from rich text editor
+legalPagesRouter.put('/admin/:slug', requireAuth(['admin']), async (c) => {
+  const { slug } = c.req.param();
+  const user = (c as any).get('user');
+  const body = await c.req.json();
+  // Accept both contentText (legacy plain text) and contentMarkdown (from rich text editor)
+  const { contentText, contentTextEs, contentMarkdown, contentMarkdownEs, title, titleEs } = body;
+  
+  // Determine content - prefer markdown if provided, fall back to contentText
+  const enContent = contentMarkdown !== undefined ? contentMarkdown : contentText;
+  const esContent = contentMarkdownEs !== undefined ? contentMarkdownEs : contentTextEs;
+  
+  // At least one content field is required
+  if (!enContent && !esContent) {
+    return c.json({ error: 'At least one language content is required' }, 400);
+  }
+  
+  const existing = await dbGet(
+    (db as any)
+      .select()
+      .from(legalPages)
+      .where(eq((legalPages as any).slug, slug))
+  );
+  
+  if (!existing) {
+    return c.json({ error: 'Legal page not found' }, 404);
+  }
+  
+  const updateData: any = {
+    updatedAt: getNow(),
+    updatedBy: user?.id || null,
+  };
+  
+  // Update English content if provided
+  if (enContent !== undefined) {
+    // Store markdown directly (from rich text editor)
+    updateData.contentMarkdown = enContent;
+    // Derive plain text from markdown
+    updateData.contentText = markdownToText(enContent);
+  }
+  
+  // Update Spanish content if provided
+  if (esContent !== undefined) {
+    updateData.contentMarkdownEs = esContent || null;
+    updateData.contentTextEs = esContent ? markdownToText(esContent) : null;
+  }
+  
+  // Allow updating titles
+  if (title !== undefined) {
+    updateData.title = title;
+  }
+  if (titleEs !== undefined) {
+    updateData.titleEs = titleEs || null;
+  }
+  
+  await (db as any)
+    .update(legalPages)
+    .set(updateData)
+    .where(eq((legalPages as any).slug, slug));
+  
+  const updated = await dbGet<any>(
+    (db as any).select().from(legalPages).where(eq((legalPages as any).slug, slug))
+  );
+  
+  return c.json({ 
+    page: {
+      ...updated,
+      hasEnglish: Boolean(updated.contentText),
+      hasSpanish: Boolean(updated.contentTextEs),
+    },
+    message: 'Legal page updated successfully' 
+  });
+});
+
+// Seed legal pages from filesystem (admin only)
+// This imports markdown files and converts them to plain text for editing
+// Files are imported as English content - Spanish can be added manually
+legalPagesRouter.post('/admin/seed', requireAuth(['admin']), async (c) => {
+  const user = (c as any).get('user');
+  
+  // Check if table already has data
+  const existingPages = await dbAll(
+    (db as any)
+      .select({ id: (legalPages as any).id })
+      .from(legalPages)
+      .limit(1)
+  );
+  
+  if (existingPages.length > 0) {
+    return c.json({ 
+      message: 'Legal pages already seeded. Use update to modify pages.',
+      seeded: 0 
+    });
+  }
+  
+  const legalDir = getLegalDir();
+  
+  if (!fs.existsSync(legalDir)) {
+    return c.json({ error: `Legal directory not found: ${legalDir}` }, 400);
+  }
+  
+  const files = fs.readdirSync(legalDir).filter(f => f.endsWith('.md'));
+  const seededPages: string[] = [];
+  const now = getNow();
+  
+  for (const file of files) {
+    const filePath = path.join(legalDir, file);
+    const contentMarkdown = fs.readFileSync(filePath, 'utf-8');
+    const slug = fileNameToSlug(file);
+    const contentText = markdownToText(contentMarkdown);
+    const titles = titleMap[slug];
+    const title = titles?.en || extractTitleFromMarkdown(contentMarkdown);
+    const titleEs = titles?.es || null;
+    
+    await (db as any).insert(legalPages).values({
+      id: generateId(),
+      slug,
+      title,
+      titleEs,
+      contentText, // English plain text
+      contentTextEs: null, // Spanish to be added manually
+      contentMarkdown, // English markdown
+      contentMarkdownEs: null, // Spanish to be generated when contentTextEs is set
+      updatedAt: now,
+      updatedBy: user?.id || null,
+      createdAt: now,
+    });
+    
+    seededPages.push(slug);
+  }
+  
+  return c.json({ 
+    message: `Successfully seeded ${seededPages.length} legal pages (English content imported, Spanish can be added via editor)`,
+    seeded: seededPages.length,
+    pages: seededPages,
+  });
+});
+
+export default legalPagesRouter;

backend/src/routes/legal-settings.ts

@@ -0,0 +1,146 @@
+import { Hono } from 'hono';
+import { zValidator } from '@hono/zod-validator';
+import { z } from 'zod';
+import { db, dbGet, legalSettings } from '../db/index.js';
+import { eq } from 'drizzle-orm';
+import { requireAuth } from '../lib/auth.js';
+import { generateId, getNow } from '../lib/utils.js';
+
+interface UserContext {
+  id: string;
+  email: string;
+  name: string;
+  role: string;
+}
+
+const legalSettingsRouter = new Hono<{ Variables: { user: UserContext } }>();
+
+// Validation schema for updating legal settings
+const updateLegalSettingsSchema = z.object({
+  companyName: z.string().optional().nullable(),
+  legalEntityName: z.string().optional().nullable(),
+  rucNumber: z.string().optional().nullable(),
+  companyAddress: z.string().optional().nullable(),
+  companyCity: z.string().optional().nullable(),
+  companyCountry: z.string().optional().nullable(),
+  supportEmail: z.string().email().optional().nullable().or(z.literal('')),
+  legalEmail: z.string().email().optional().nullable().or(z.literal('')),
+  governingLaw: z.string().optional().nullable(),
+  jurisdictionCity: z.string().optional().nullable(),
+});
+
+// Get legal settings (admin only)
+legalSettingsRouter.get('/', requireAuth(['admin']), async (c) => {
+  const settings = await dbGet<any>(
+    (db as any).select().from(legalSettings).limit(1)
+  );
+
+  if (!settings) {
+    // Return empty defaults
+    return c.json({
+      settings: {
+        companyName: null,
+        legalEntityName: null,
+        rucNumber: null,
+        companyAddress: null,
+        companyCity: null,
+        companyCountry: null,
+        supportEmail: null,
+        legalEmail: null,
+        governingLaw: null,
+        jurisdictionCity: null,
+      },
+    });
+  }
+
+  return c.json({ settings });
+});
+
+// Internal helper: get legal settings for placeholder replacement (no auth required)
+// This is called server-side from legal-pages route, not exposed as HTTP endpoint
+export async function getLegalSettingsValues(): Promise<Record<string, string>> {
+  const settings = await dbGet<any>(
+    (db as any).select().from(legalSettings).limit(1)
+  );
+
+  if (!settings) {
+    return {};
+  }
+
+  const values: Record<string, string> = {};
+  if (settings.companyName) values['COMPANY_NAME'] = settings.companyName;
+  if (settings.legalEntityName) values['LEGAL_ENTITY_NAME'] = settings.legalEntityName;
+  if (settings.rucNumber) values['RUC_NUMBER'] = settings.rucNumber;
+  if (settings.companyAddress) values['COMPANY_ADDRESS'] = settings.companyAddress;
+  if (settings.companyCity) values['COMPANY_CITY'] = settings.companyCity;
+  if (settings.companyCountry) values['COMPANY_COUNTRY'] = settings.companyCountry;
+  if (settings.supportEmail) values['SUPPORT_EMAIL'] = settings.supportEmail;
+  if (settings.legalEmail) values['LEGAL_EMAIL'] = settings.legalEmail;
+  if (settings.governingLaw) values['GOVERNING_LAW'] = settings.governingLaw;
+  if (settings.jurisdictionCity) values['JURISDICTION_CITY'] = settings.jurisdictionCity;
+
+  return values;
+}
+
+// Update legal settings (admin only)
+legalSettingsRouter.put('/', requireAuth(['admin']), zValidator('json', updateLegalSettingsSchema), async (c) => {
+  const data = c.req.valid('json');
+  const user = c.get('user');
+  const now = getNow();
+
+  // Check if settings exist
+  const existing = await dbGet<any>(
+    (db as any).select().from(legalSettings).limit(1)
+  );
+
+  if (!existing) {
+    // Create new settings record
+    const id = generateId();
+    const newSettings = {
+      id,
+      companyName: data.companyName || null,
+      legalEntityName: data.legalEntityName || null,
+      rucNumber: data.rucNumber || null,
+      companyAddress: data.companyAddress || null,
+      companyCity: data.companyCity || null,
+      companyCountry: data.companyCountry || null,
+      supportEmail: data.supportEmail || null,
+      legalEmail: data.legalEmail || null,
+      governingLaw: data.governingLaw || null,
+      jurisdictionCity: data.jurisdictionCity || null,
+      updatedAt: now,
+      updatedBy: user.id,
+    };
+
+    await (db as any).insert(legalSettings).values(newSettings);
+
+    return c.json({ settings: newSettings, message: 'Legal settings created successfully' }, 201);
+  }
+
+  // Update existing settings
+  const updateData: Record<string, any> = {
+    ...data,
+    updatedAt: now,
+    updatedBy: user.id,
+  };
+
+  // Normalize empty strings to null
+  for (const key of Object.keys(updateData)) {
+    if (updateData[key] === '') {
+      updateData[key] = null;
+    }
+  }
+
+  await (db as any)
+    .update(legalSettings)
+    .set(updateData)
+    .where(eq((legalSettings as any).id, existing.id));
+
+  const updated = await dbGet(
+    (db as any).select().from(legalSettings).where(eq((legalSettings as any).id, existing.id))
+  );
+
+  return c.json({ settings: updated, message: 'Legal settings updated successfully' });
+});
+
+export default legalSettingsRouter;

backend/src/routes/lnbits.ts

@@ -1,6 +1,6 @@
 import { Hono } from 'hono';
 import { streamSSE } from 'hono/streaming';
-import { db, tickets, payments } from '../db/index.js';
+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';
@@ -152,27 +152,47 @@ lnbitsRouter.post('/webhook', async (c) => {
 
 /**
  * Handle successful payment
+ * Supports multi-ticket bookings - confirms all tickets in the booking
  */
 async function handlePaymentComplete(ticketId: string, paymentHash: string) {
   const now = getNow();
   
-  // Check if already confirmed to avoid duplicate updates
+  // Get the ticket to check for booking ID
-  const existingTicket = await (db as any)
+  const existingTicket = await dbGet<any>(
-    .select()
+    (db as any).select().from(tickets).where(eq((tickets as any).id, ticketId))
-    .from(tickets)
+  );
-    .where(eq((tickets as any).id, ticketId))
-    .get();
   
-  if (existingTicket?.status === 'confirmed') {
+  if (!existingTicket) {
+    console.error(`Ticket ${ticketId} not found for payment confirmation`);
+    return;
+  }
+  
+  if (existingTicket.status === 'confirmed') {
     console.log(`Ticket ${ticketId} already confirmed, skipping update`);
     return;
   }
   
+  // Get all tickets in this booking (if multi-ticket)
+  let ticketsToConfirm: any[] = [existingTicket];
+  
+  if (existingTicket.bookingId) {
+    // This is a multi-ticket booking - get all tickets with same bookingId
+    ticketsToConfirm = await dbAll(
+      (db as any)
+        .select()
+        .from(tickets)
+        .where(eq((tickets as any).bookingId, existingTicket.bookingId))
+    );
+    console.log(`Multi-ticket booking detected: ${ticketsToConfirm.length} tickets to confirm`);
+  }
+  
+  // Confirm all tickets in the booking
+  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, ticketId));
+      .where(eq((tickets as any).id, ticket.id));
     
     // Update payment status to paid
     await (db as any)
@@ -183,18 +203,21 @@ async function handlePaymentComplete(ticketId: string, paymentHash: string) {
         paidAt: now,
         updatedAt: now,
       })
-    .where(eq((payments as any).ticketId, ticketId));
+      .where(eq((payments as any).ticketId, ticket.id));
     
-  console.log(`Ticket ${ticketId} confirmed via Lightning payment (hash: ${paymentHash})`);
+    console.log(`Ticket ${ticket.id} confirmed via Lightning payment (hash: ${paymentHash})`);
+  }
   
-  // Get payment for sending receipt
+  // Get primary payment for sending receipt
-  const payment = await (db as any)
+  const payment = await dbGet<any>(
+    (db as any)
       .select()
       .from(payments)
       .where(eq((payments as any).ticketId, ticketId))
-    .get();
+  );
   
   // Send confirmation emails asynchronously
+  // For multi-ticket bookings, send email with all ticket info
   Promise.all([
     emailService.sendBookingConfirmation(ticketId),
     payment ? emailService.sendPaymentReceipt(payment.id) : Promise.resolve(),
@@ -211,11 +234,9 @@ lnbitsRouter.get('/stream/:ticketId', async (c) => {
   const ticketId = c.req.param('ticketId');
   
   // Verify ticket exists
-  const ticket = await (db as any)
+  const ticket = await dbGet<any>(
-    .select()
+    (db as any).select().from(tickets).where(eq((tickets as any).id, ticketId))
-    .from(tickets)
+  );
-    .where(eq((tickets as any).id, ticketId))
-    .get();
   
   if (!ticket) {
     return c.json({ error: 'Ticket not found' }, 404);
@@ -227,11 +248,9 @@ lnbitsRouter.get('/stream/:ticketId', async (c) => {
   }
   
   // Get payment to start background checker
-  const payment = await (db as any)
+  const payment = await dbGet<any>(
-    .select()
+    (db as any).select().from(payments).where(eq((payments as any).ticketId, ticketId))
-    .from(payments)
+  );
-    .where(eq((payments as any).ticketId, ticketId))
-    .get();
   
   // Start background checker if not already running
   if (payment?.reference && !activeCheckers.has(ticketId)) {
@@ -290,21 +309,23 @@ lnbitsRouter.get('/stream/:ticketId', async (c) => {
 lnbitsRouter.get('/status/:ticketId', async (c) => {
   const ticketId = c.req.param('ticketId');
   
-  const ticket = await (db as any)
+  const ticket = await dbGet<any>(
+    (db as any)
       .select()
       .from(tickets)
       .where(eq((tickets as any).id, ticketId))
-    .get();
+  );
   
   if (!ticket) {
     return c.json({ error: 'Ticket not found' }, 404);
   }
   
-  const payment = await (db as any)
+  const payment = await dbGet<any>(
+    (db as any)
       .select()
       .from(payments)
       .where(eq((payments as any).ticketId, ticketId))
-    .get();
+  );
   
   return c.json({
     ticketStatus: ticket.status,

backend/src/routes/media.ts

@@ -1,5 +1,5 @@
 import { Hono } from 'hono';
-import { db, media } from '../db/index.js';
+import { db, dbGet, dbAll, media } from '../db/index.js';
 import { eq } from 'drizzle-orm';
 import { requireAuth } from '../lib/auth.js';
 import { generateId, getNow } from '../lib/utils.js';
@@ -85,11 +85,9 @@ mediaRouter.post('/upload', requireAuth(['admin', 'organizer']), async (c) => {
 mediaRouter.get('/:id', async (c) => {
   const id = c.req.param('id');
   
-  const mediaRecord = await (db as any)
+  const mediaRecord = await dbGet<any>(
-    .select()
+    (db as any).select().from(media).where(eq((media as any).id, id))
-    .from(media)
+  );
-    .where(eq((media as any).id, id))
-    .get();
   
   if (!mediaRecord) {
     return c.json({ error: 'Media not found' }, 404);
@@ -102,11 +100,9 @@ mediaRouter.get('/:id', async (c) => {
 mediaRouter.delete('/:id', requireAuth(['admin', 'organizer']), async (c) => {
   const id = c.req.param('id');
   
-  const mediaRecord = await (db as any)
+  const mediaRecord = await dbGet<any>(
-    .select()
+    (db as any).select().from(media).where(eq((media as any).id, id))
-    .from(media)
+  );
-    .where(eq((media as any).id, id))
-    .get();
   
   if (!mediaRecord) {
     return c.json({ error: 'Media not found' }, 404);
@@ -142,7 +138,7 @@ mediaRouter.get('/', requireAuth(['admin', 'organizer']), async (c) => {
     query = query.where(eq((media as any).relatedId, relatedId));
   }
   
-  const result = await query.all();
+  const result = await dbAll(query);
   
   return c.json({ media: result });
 });

backend/src/routes/payment-options.ts

@@ -1,20 +1,26 @@
 import { Hono } from 'hono';
 import { zValidator } from '@hono/zod-validator';
 import { z } from 'zod';
-import { db, paymentOptions, eventPaymentOverrides, events } from '../db/index.js';
+import { db, dbGet, paymentOptions, eventPaymentOverrides, events } from '../db/index.js';
 import { eq } from 'drizzle-orm';
 import { requireAuth } from '../lib/auth.js';
-import { generateId, getNow } from '../lib/utils.js';
+import { generateId, getNow, convertBooleansForDb } from '../lib/utils.js';
 
 const paymentOptionsRouter = new Hono();
 
+// Helper to normalize boolean (handles true/false and 0/1 from database)
+const booleanOrNumber = z.union([z.boolean(), z.number()]).transform((val) => {
+  if (typeof val === 'boolean') return val;
+  return val !== 0;
+});
+
 // Schema for updating global payment options
 const updatePaymentOptionsSchema = z.object({
-  tpagoEnabled: z.boolean().optional(),
+  tpagoEnabled: booleanOrNumber.optional(),
   tpagoLink: z.string().optional().nullable(),
   tpagoInstructions: z.string().optional().nullable(),
   tpagoInstructionsEs: z.string().optional().nullable(),
-  bankTransferEnabled: z.boolean().optional(),
+  bankTransferEnabled: booleanOrNumber.optional(),
   bankName: z.string().optional().nullable(),
   bankAccountHolder: z.string().optional().nullable(),
   bankAccountNumber: z.string().optional().nullable(),
@@ -22,21 +28,21 @@ const updatePaymentOptionsSchema = z.object({
   bankPhone: z.string().optional().nullable(),
   bankNotes: z.string().optional().nullable(),
   bankNotesEs: z.string().optional().nullable(),
-  lightningEnabled: z.boolean().optional(),
+  lightningEnabled: booleanOrNumber.optional(),
-  cashEnabled: z.boolean().optional(),
+  cashEnabled: booleanOrNumber.optional(),
   cashInstructions: z.string().optional().nullable(),
   cashInstructionsEs: z.string().optional().nullable(),
   // Booking settings
-  allowDuplicateBookings: z.boolean().optional(),
+  allowDuplicateBookings: booleanOrNumber.optional(),
 });
 
 // Schema for event-level overrides
 const updateEventOverridesSchema = z.object({
-  tpagoEnabled: z.boolean().optional().nullable(),
+  tpagoEnabled: booleanOrNumber.optional().nullable(),
   tpagoLink: z.string().optional().nullable(),
   tpagoInstructions: z.string().optional().nullable(),
   tpagoInstructionsEs: z.string().optional().nullable(),
-  bankTransferEnabled: z.boolean().optional().nullable(),
+  bankTransferEnabled: booleanOrNumber.optional().nullable(),
   bankName: z.string().optional().nullable(),
   bankAccountHolder: z.string().optional().nullable(),
   bankAccountNumber: z.string().optional().nullable(),
@@ -44,18 +50,17 @@ const updateEventOverridesSchema = z.object({
   bankPhone: z.string().optional().nullable(),
   bankNotes: z.string().optional().nullable(),
   bankNotesEs: z.string().optional().nullable(),
-  lightningEnabled: z.boolean().optional().nullable(),
+  lightningEnabled: booleanOrNumber.optional().nullable(),
-  cashEnabled: z.boolean().optional().nullable(),
+  cashEnabled: booleanOrNumber.optional().nullable(),
   cashInstructions: z.string().optional().nullable(),
   cashInstructionsEs: z.string().optional().nullable(),
 });
 
 // Get global payment options
 paymentOptionsRouter.get('/', requireAuth(['admin']), async (c) => {
-  const options = await (db as any)
+  const options = await dbGet<any>(
-    .select()
+    (db as any).select().from(paymentOptions)
-    .from(paymentOptions)
+  );
-    .get();
 
   // If no options exist yet, return defaults
   if (!options) {
@@ -92,17 +97,21 @@ paymentOptionsRouter.put('/', requireAuth(['admin']), zValidator('json', updateP
   const now = getNow();
 
   // Check if options exist
-  const existing = await (db as any)
+  const existing = await dbGet<any>(
+    (db as any)
       .select()
       .from(paymentOptions)
-    .get();
+  );
+
+  // Convert boolean fields for database compatibility
+  const dbData = convertBooleansForDb(data);
   
   if (existing) {
     // Update existing
     await (db as any)
       .update(paymentOptions)
       .set({
-        ...data,
+        ...dbData,
         updatedAt: now,
         updatedBy: user.id,
       })
@@ -112,16 +121,17 @@ paymentOptionsRouter.put('/', requireAuth(['admin']), zValidator('json', updateP
     const id = generateId();
     await (db as any).insert(paymentOptions).values({
       id,
-      ...data,
+      ...dbData,
       updatedAt: now,
       updatedBy: user.id,
     });
   }
 
-  const updated = await (db as any)
+  const updated = await dbGet(
+    (db as any)
       .select()
       .from(paymentOptions)
-    .get();
+  );
 
   return c.json({ paymentOptions: updated, message: 'Payment options updated successfully' });
 });
@@ -131,28 +141,31 @@ paymentOptionsRouter.get('/event/:eventId', async (c) => {
   const eventId = c.req.param('eventId');
 
   // Get the event first to verify it exists
-  const event = await (db as any)
+  const event = await dbGet(
+    (db as any)
       .select()
       .from(events)
       .where(eq((events as any).id, eventId))
-    .get();
+  );
 
   if (!event) {
     return c.json({ error: 'Event not found' }, 404);
   }
 
   // Get global options
-  const globalOptions = await (db as any)
+  const globalOptions = await dbGet<any>(
+    (db as any)
       .select()
       .from(paymentOptions)
-    .get();
+  );
 
   // Get event overrides
-  const overrides = await (db as any)
+  const overrides = await dbGet<any>(
+    (db as any)
       .select()
       .from(eventPaymentOverrides)
       .where(eq((eventPaymentOverrides as any).eventId, eventId))
-    .get();
+  );
 
   // Merge global with overrides (override takes precedence if not null)
   const defaults = {
@@ -206,11 +219,9 @@ paymentOptionsRouter.get('/event/:eventId', async (c) => {
 paymentOptionsRouter.get('/event/:eventId/overrides', requireAuth(['admin', 'organizer']), async (c) => {
   const eventId = c.req.param('eventId');
 
-  const overrides = await (db as any)
+  const overrides = await dbGet<any>(
-    .select()
+    (db as any).select().from(eventPaymentOverrides).where(eq((eventPaymentOverrides as any).eventId, eventId))
-    .from(eventPaymentOverrides)
+  );
-    .where(eq((eventPaymentOverrides as any).eventId, eventId))
-    .get();
 
   return c.json({ overrides: overrides || null });
 });
@@ -222,28 +233,27 @@ paymentOptionsRouter.put('/event/:eventId/overrides', requireAuth(['admin', 'org
   const now = getNow();
 
   // Verify event exists
-  const event = await (db as any)
+  const event = await dbGet<any>(
-    .select()
+    (db as any).select().from(events).where(eq((events as any).id, eventId))
-    .from(events)
+  );
-    .where(eq((events as any).id, eventId))
-    .get();
 
   if (!event) {
     return c.json({ error: 'Event not found' }, 404);
   }
 
   // Check if overrides exist
-  const existing = await (db as any)
+  const existing = await dbGet<any>(
-    .select()
+    (db as any).select().from(eventPaymentOverrides).where(eq((eventPaymentOverrides as any).eventId, eventId))
-    .from(eventPaymentOverrides)
+  );
-    .where(eq((eventPaymentOverrides as any).eventId, eventId))
+
-    .get();
+  // Convert boolean fields for database compatibility
+  const dbData = convertBooleansForDb(data);
   
   if (existing) {
     await (db as any)
       .update(eventPaymentOverrides)
       .set({
-        ...data,
+        ...dbData,
         updatedAt: now,
       })
       .where(eq((eventPaymentOverrides as any).id, existing.id));
@@ -252,17 +262,18 @@ paymentOptionsRouter.put('/event/:eventId/overrides', requireAuth(['admin', 'org
     await (db as any).insert(eventPaymentOverrides).values({
       id,
       eventId,
-      ...data,
+      ...dbData,
       createdAt: now,
       updatedAt: now,
     });
   }
 
-  const updated = await (db as any)
+  const updated = await dbGet(
+    (db as any)
       .select()
       .from(eventPaymentOverrides)
       .where(eq((eventPaymentOverrides as any).eventId, eventId))
-    .get();
+  );
 
   return c.json({ overrides: updated, message: 'Event payment overrides updated successfully' });
 });

backend/src/routes/payments.ts

@@ -1,7 +1,7 @@
 import { Hono } from 'hono';
 import { zValidator } from '@hono/zod-validator';
 import { z } from 'zod';
-import { db, payments, tickets, events } from '../db/index.js';
+import { db, dbGet, dbAll, payments, tickets, events } from '../db/index.js';
 import { eq, desc, and, or, sql } from 'drizzle-orm';
 import { requireAuth } from '../lib/auth.js';
 import { getNow } from '../lib/utils.js';
@@ -17,10 +17,12 @@ const updatePaymentSchema = z.object({
 
 const approvePaymentSchema = z.object({
   adminNote: z.string().optional(),
+  sendEmail: z.boolean().optional().default(true),
 });
 
 const rejectPaymentSchema = z.object({
   adminNote: z.string().optional(),
+  sendEmail: z.boolean().optional().default(true),
 });
 
 // Get all payments (admin) - with ticket and event details
@@ -28,13 +30,16 @@ paymentsRouter.get('/', requireAuth(['admin']), async (c) => {
   const status = c.req.query('status');
   const provider = c.req.query('provider');
   const pendingApproval = c.req.query('pendingApproval');
+  const eventId = c.req.query('eventId');
+  const eventIds = c.req.query('eventIds');
   
   // Get all payments with their associated tickets
-  let allPayments = await (db as any)
+  let allPayments = await dbAll<any>(
+    (db as any)
       .select()
       .from(payments)
       .orderBy(desc((payments as any).createdAt))
-    .all();
+  );
   
   // Filter by status
   if (status) {
@@ -52,27 +57,30 @@ paymentsRouter.get('/', requireAuth(['admin']), async (c) => {
   }
   
   // Enrich with ticket and event data
-  const enrichedPayments = await Promise.all(
+  let enrichedPayments = await Promise.all(
     allPayments.map(async (payment: any) => {
-      const ticket = await (db as any)
+      const ticket = await dbGet<any>(
+        (db as any)
           .select()
           .from(tickets)
           .where(eq((tickets as any).id, payment.ticketId))
-        .get();
+      );
       
-      let event = null;
+      let event: any = null;
       if (ticket) {
-        event = await (db as any)
+        event = await dbGet<any>(
+          (db as any)
             .select()
             .from(events)
             .where(eq((events as any).id, ticket.eventId))
-          .get();
+        );
       }
       
       return {
         ...payment,
         ticket: ticket ? {
           id: ticket.id,
+          bookingId: ticket.bookingId,
           attendeeFirstName: ticket.attendeeFirstName,
           attendeeLastName: ticket.attendeeLastName,
           attendeeEmail: ticket.attendeeEmail,
@@ -88,40 +96,54 @@ paymentsRouter.get('/', requireAuth(['admin']), async (c) => {
     })
   );
   
+  // Filter by event(s)
+  if (eventId) {
+    enrichedPayments = enrichedPayments.filter((p: any) => p.event?.id === eventId);
+  } else if (eventIds) {
+    const ids = eventIds.split(',').map((s: string) => s.trim()).filter(Boolean);
+    if (ids.length > 0) {
+      enrichedPayments = enrichedPayments.filter((p: any) => p.event && ids.includes(p.event.id));
+    }
+  }
+  
   return c.json({ payments: enrichedPayments });
 });
 
 // Get payments pending approval (admin dashboard view)
 paymentsRouter.get('/pending-approval', requireAuth(['admin', 'organizer']), async (c) => {
-  const pendingPayments = await (db as any)
+  const pendingPayments = await dbAll<any>(
+    (db as any)
       .select()
       .from(payments)
       .where(eq((payments as any).status, 'pending_approval'))
       .orderBy(desc((payments as any).userMarkedPaidAt))
-    .all();
+  );
   
   // Enrich with ticket and event data
   const enrichedPayments = await Promise.all(
     pendingPayments.map(async (payment: any) => {
-      const ticket = await (db as any)
+      const ticket = await dbGet<any>(
+        (db as any)
           .select()
           .from(tickets)
           .where(eq((tickets as any).id, payment.ticketId))
-        .get();
+      );
       
-      let event = null;
+      let event: any = null;
       if (ticket) {
-        event = await (db as any)
+        event = await dbGet<any>(
+          (db as any)
             .select()
             .from(events)
             .where(eq((events as any).id, ticket.eventId))
-          .get();
+        );
       }
       
       return {
         ...payment,
         ticket: ticket ? {
           id: ticket.id,
+          bookingId: ticket.bookingId,
           attendeeFirstName: ticket.attendeeFirstName,
           attendeeLastName: ticket.attendeeLastName,
           attendeeEmail: ticket.attendeeEmail,
@@ -144,22 +166,24 @@ paymentsRouter.get('/pending-approval', requireAuth(['admin', 'organizer']), asy
 paymentsRouter.get('/:id', requireAuth(['admin', 'organizer']), async (c) => {
   const id = c.req.param('id');
   
-  const payment = await (db as any)
+  const payment = await dbGet<any>(
+    (db as any)
       .select()
       .from(payments)
       .where(eq((payments as any).id, id))
-    .get();
+  );
   
   if (!payment) {
     return c.json({ error: 'Payment not found' }, 404);
   }
   
   // Get associated ticket
-  const ticket = await (db as any)
+  const ticket = await dbGet(
+    (db as any)
       .select()
       .from(tickets)
       .where(eq((tickets as any).id, payment.ticketId))
-    .get();
+  );
   
   return c.json({ payment: { ...payment, ticket } });
 });
@@ -170,11 +194,12 @@ paymentsRouter.put('/:id', requireAuth(['admin', 'organizer']), zValidator('json
   const data = c.req.valid('json');
   const user = (c as any).get('user');
   
-  const existing = await (db as any)
+  const existing = await dbGet<any>(
+    (db as any)
       .select()
       .from(payments)
       .where(eq((payments as any).id, id))
-    .get();
+  );
   
   if (!existing) {
     return c.json({ error: 'Payment not found' }, 404);
@@ -190,17 +215,42 @@ paymentsRouter.put('/:id', requireAuth(['admin', 'organizer']), zValidator('json
     updateData.paidByAdminId = user.id;
   }
   
+  // If payment confirmed, handle multi-ticket booking
+  if (data.status === 'paid') {
+    // Get the ticket associated with this payment
+    const ticket = await dbGet<any>(
+      (db as any)
+        .select()
+        .from(tickets)
+        .where(eq((tickets as any).id, existing.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(
+        (db as any)
+          .select()
+          .from(tickets)
+          .where(eq((tickets as any).bookingId, ticket.bookingId))
+      );
+      console.log(`[Payment] Confirming multi-ticket booking: ${ticket.bookingId}, ${ticketsToConfirm.length} tickets`);
+    }
+    
+    // Update all payments and tickets in the booking
+    for (const t of ticketsToConfirm) {
       await (db as any)
         .update(payments)
         .set(updateData)
-    .where(eq((payments as any).id, id));
+        .where(eq((payments as any).ticketId, (t as any).id));
       
-  // If payment confirmed, update ticket status and send emails
-  if (data.status === 'paid') {
       await (db as any)
         .update(tickets)
         .set({ status: 'confirmed' })
-      .where(eq((tickets as any).id, existing.ticketId));
+        .where(eq((tickets as any).id, (t as any).id));
+    }
     
     // Send confirmation emails asynchronously (don't block the response)
     Promise.all([
@@ -209,13 +259,20 @@ paymentsRouter.put('/:id', requireAuth(['admin', 'organizer']), zValidator('json
     ]).catch(err => {
       console.error('[Email] Failed to send confirmation emails:', err);
     });
+  } else {
+    // For non-paid status updates, just update this payment
+    await (db as any)
+      .update(payments)
+      .set(updateData)
+      .where(eq((payments as any).id, id));
   }
   
-  const updated = await (db as any)
+  const updated = await dbGet(
+    (db as any)
       .select()
       .from(payments)
       .where(eq((payments as any).id, id))
-    .get();
+  );
   
   return c.json({ payment: updated });
 });
@@ -223,14 +280,15 @@ paymentsRouter.put('/:id', requireAuth(['admin', 'organizer']), zValidator('json
 // Approve payment (admin) - specifically for pending_approval payments
 paymentsRouter.post('/:id/approve', requireAuth(['admin', 'organizer']), zValidator('json', approvePaymentSchema), async (c) => {
   const id = c.req.param('id');
-  const { adminNote } = c.req.valid('json');
+  const { adminNote, sendEmail } = c.req.valid('json');
   const user = (c as any).get('user');
   
-  const payment = await (db as any)
+  const payment = await dbGet<any>(
+    (db as any)
       .select()
       .from(payments)
       .where(eq((payments as any).id, id))
-    .get();
+  );
   
   if (!payment) {
     return c.json({ error: 'Payment not found' }, 404);
@@ -243,7 +301,30 @@ paymentsRouter.post('/:id/approve', requireAuth(['admin', 'organizer']), zValida
   
   const now = getNow();
   
-  // Update payment status to paid
+  // Get the ticket associated with this payment
+  const ticket = await dbGet<any>(
+    (db as any)
+      .select()
+      .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(
+      (db as any)
+        .select()
+        .from(tickets)
+        .where(eq((tickets as any).bookingId, ticket.bookingId))
+    );
+    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({ 
@@ -253,27 +334,33 @@ paymentsRouter.post('/:id/approve', requireAuth(['admin', 'organizer']), zValida
         adminNote: adminNote || payment.adminNote,
         updatedAt: now,
       })
-    .where(eq((payments as any).id, id));
+      .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, payment.ticketId));
+      .where(eq((tickets as any).id, (t as any).id));
+  }
   
-  // Send confirmation emails asynchronously
+  // Send confirmation emails asynchronously (if sendEmail is true, which is the default)
+  if (sendEmail !== false) {
     Promise.all([
       emailService.sendBookingConfirmation(payment.ticketId),
       emailService.sendPaymentReceipt(id),
     ]).catch(err => {
       console.error('[Email] Failed to send confirmation emails:', err);
     });
+  } else {
+    console.log('[Payment] Skipping confirmation emails per admin request');
+  }
   
-  const updated = await (db as any)
+  const updated = await dbGet(
+    (db as any)
       .select()
       .from(payments)
       .where(eq((payments as any).id, id))
-    .get();
+  );
   
   return c.json({ payment: updated, message: 'Payment approved successfully' });
 });
@@ -281,14 +368,15 @@ paymentsRouter.post('/:id/approve', requireAuth(['admin', 'organizer']), zValida
 // Reject payment (admin)
 paymentsRouter.post('/:id/reject', requireAuth(['admin', 'organizer']), zValidator('json', rejectPaymentSchema), async (c) => {
   const id = c.req.param('id');
-  const { adminNote } = c.req.valid('json');
+  const { adminNote, sendEmail } = c.req.valid('json');
   const user = (c as any).get('user');
   
-  const payment = await (db as any)
+  const payment = await dbGet<any>(
+    (db as any)
       .select()
       .from(payments)
       .where(eq((payments as any).id, id))
-    .get();
+  );
   
   if (!payment) {
     return c.json({ error: 'Payment not found' }, 404);
@@ -320,33 +408,82 @@ paymentsRouter.post('/:id/reject', requireAuth(['admin', 'organizer']), zValidat
     })
     .where(eq((tickets as any).id, payment.ticketId));
   
-  // Send rejection email asynchronously (for manual payment methods only)
+  // Send rejection email asynchronously (for manual payment methods only, if sendEmail is true)
-  if (['bank_transfer', 'tpago'].includes(payment.provider)) {
+  if (sendEmail !== false && ['bank_transfer', 'tpago'].includes(payment.provider)) {
     emailService.sendPaymentRejectionEmail(id).catch(err => {
       console.error('[Email] Failed to send payment rejection email:', err);
     });
+  } else if (sendEmail === false) {
+    console.log('[Payment] Skipping rejection email per admin request');
   }
   
-  const updated = await (db as any)
+  const updated = await dbGet(
+    (db as any)
       .select()
       .from(payments)
       .where(eq((payments as any).id, id))
-    .get();
+  );
   
   return c.json({ payment: updated, message: 'Payment rejected and booking cancelled' });
 });
 
+// Send payment reminder email
+paymentsRouter.post('/:id/send-reminder', 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);
+  }
+  
+  // Only allow sending reminders for pending payments
+  if (!['pending', 'pending_approval'].includes(payment.status)) {
+    return c.json({ error: 'Payment reminder can only be sent for pending payments' }, 400);
+  }
+  
+  try {
+    const result = await emailService.sendPaymentReminder(id);
+    
+    if (result.success) {
+      const now = getNow();
+      
+      // Record when reminder was sent
+      await (db as any)
+        .update(payments)
+        .set({ 
+          reminderSentAt: now,
+          updatedAt: now,
+        })
+        .where(eq((payments as any).id, id));
+      
+      return c.json({ message: 'Payment reminder sent successfully', reminderSentAt: now });
+    } else {
+      return c.json({ error: result.error || 'Failed to send payment reminder' }, 500);
+    }
+  } catch (err: any) {
+    console.error('[Payment] Failed to send payment reminder:', err);
+    return c.json({ error: 'Failed to send payment reminder' }, 500);
+  }
+});
+
 // Update admin note
 paymentsRouter.post('/:id/note', requireAuth(['admin', 'organizer']), async (c) => {
   const id = c.req.param('id');
   const body = await c.req.json();
   const { adminNote } = body;
   
-  const payment = await (db as any)
+  const payment = await dbGet<any>(
+    (db as any)
       .select()
       .from(payments)
       .where(eq((payments as any).id, id))
-    .get();
+  );
   
   if (!payment) {
     return c.json({ error: 'Payment not found' }, 404);
@@ -362,11 +499,12 @@ paymentsRouter.post('/:id/note', requireAuth(['admin', 'organizer']), async (c)
     })
     .where(eq((payments as any).id, id));
   
-  const updated = await (db as any)
+  const updated = await dbGet(
+    (db as any)
       .select()
       .from(payments)
       .where(eq((payments as any).id, id))
-    .get();
+  );
   
   return c.json({ payment: updated, message: 'Note updated' });
 });
@@ -375,11 +513,12 @@ paymentsRouter.post('/:id/note', requireAuth(['admin', 'organizer']), async (c)
 paymentsRouter.post('/:id/refund', requireAuth(['admin']), async (c) => {
   const id = c.req.param('id');
   
-  const payment = await (db as any)
+  const payment = await dbGet<any>(
+    (db as any)
       .select()
       .from(payments)
       .where(eq((payments as any).id, id))
-    .get();
+  );
   
   if (!payment) {
     return c.json({ error: 'Payment not found' }, 404);
@@ -426,7 +565,7 @@ paymentsRouter.post('/webhook', async (c) => {
 
 // Get payment statistics (admin)
 paymentsRouter.get('/stats/overview', requireAuth(['admin']), async (c) => {
-  const allPayments = await (db as any).select().from(payments).all();
+  const allPayments = await dbAll<any>((db as any).select().from(payments));
   
   const stats = {
     total: allPayments.length,
@@ -436,7 +575,7 @@ paymentsRouter.get('/stats/overview', requireAuth(['admin']), async (c) => {
     failed: allPayments.filter((p: any) => p.status === 'failed').length,
     totalRevenue: allPayments
       .filter((p: any) => p.status === 'paid')
-      .reduce((sum: number, p: any) => sum + (p.amount || 0), 0),
+      .reduce((sum: number, p: any) => sum + Number(p.amount || 0), 0),
   };
   
   return c.json({ stats });

backend/src/routes/site-settings.ts

@@ -1,10 +1,11 @@
 import { Hono } from 'hono';
 import { zValidator } from '@hono/zod-validator';
 import { z } from 'zod';
-import { db, siteSettings } from '../db/index.js';
+import { db, dbGet, siteSettings, events } from '../db/index.js';
-import { eq } from 'drizzle-orm';
+import { eq, and, gte } from 'drizzle-orm';
 import { requireAuth } from '../lib/auth.js';
-import { generateId, getNow } from '../lib/utils.js';
+import { generateId, getNow, toDbBool } from '../lib/utils.js';
+import { revalidateFrontendCache } from '../lib/revalidate.js';
 
 interface UserContext {
   id: string;
@@ -27,6 +28,7 @@ const updateSiteSettingsSchema = z.object({
   instagramUrl: z.string().url().optional().nullable().or(z.literal('')),
   twitterUrl: z.string().url().optional().nullable().or(z.literal('')),
   linkedinUrl: z.string().url().optional().nullable().or(z.literal('')),
+  featuredEventId: z.string().optional().nullable(),
   maintenanceMode: z.boolean().optional(),
   maintenanceMessage: z.string().optional().nullable(),
   maintenanceMessageEs: z.string().optional().nullable(),
@@ -34,7 +36,9 @@ const updateSiteSettingsSchema = z.object({
 
 // Get site settings (public - needed for frontend timezone)
 siteSettingsRouter.get('/', async (c) => {
-  const settings = await (db as any).select().from(siteSettings).limit(1).get();
+  const settings = await dbGet(
+    (db as any).select().from(siteSettings).limit(1)
+  );
   
   if (!settings) {
     // Return default settings if none exist
@@ -50,6 +54,7 @@ siteSettingsRouter.get('/', async (c) => {
         instagramUrl: null,
         twitterUrl: null,
         linkedinUrl: null,
+        featuredEventId: null,
         maintenanceMode: false,
         maintenanceMessage: null,
         maintenanceMessageEs: null,
@@ -95,11 +100,24 @@ siteSettingsRouter.put('/', requireAuth(['admin']), zValidator('json', updateSit
   const now = getNow();
   
   // Check if settings exist
-  const existing = await (db as any).select().from(siteSettings).limit(1).get();
+  const existing = await dbGet<any>(
+    (db as any).select().from(siteSettings).limit(1)
+  );
   
   if (!existing) {
     // Create new settings record
     const id = generateId();
+    
+    // Validate featured event if provided
+    if (data.featuredEventId) {
+      const featuredEvent = await dbGet<any>(
+        (db as any).select().from(events).where(eq((events as any).id, data.featuredEventId))
+      );
+      if (!featuredEvent || featuredEvent.status !== 'published') {
+        return c.json({ error: 'Featured event must exist and be published' }, 400);
+      }
+    }
+    
     const newSettings = {
       id,
       timezone: data.timezone || 'America/Asuncion',
@@ -112,7 +130,8 @@ siteSettingsRouter.put('/', requireAuth(['admin']), zValidator('json', updateSit
       instagramUrl: data.instagramUrl || null,
       twitterUrl: data.twitterUrl || null,
       linkedinUrl: data.linkedinUrl || null,
-      maintenanceMode: data.maintenanceMode || false,
+      featuredEventId: data.featuredEventId || null,
+      maintenanceMode: toDbBool(data.maintenanceMode || false),
       maintenanceMessage: data.maintenanceMessage || null,
       maintenanceMessageEs: data.maintenanceMessageEs || null,
       updatedAt: now,
@@ -124,21 +143,112 @@ siteSettingsRouter.put('/', requireAuth(['admin']), zValidator('json', updateSit
     return c.json({ settings: newSettings, message: 'Settings created successfully' }, 201);
   }
   
+  // Validate featured event if provided
+  if (data.featuredEventId) {
+    const featuredEvent = await dbGet<any>(
+      (db as any).select().from(events).where(eq((events as any).id, data.featuredEventId))
+    );
+    if (!featuredEvent || featuredEvent.status !== 'published') {
+      return c.json({ error: 'Featured event must exist and be published' }, 400);
+    }
+  }
+  
   // Update existing settings
-  const updateData = {
+  const updateData: Record<string, any> = {
     ...data,
     updatedAt: now,
     updatedBy: user.id,
   };
+  // Convert maintenanceMode boolean to appropriate format for database
+  if (typeof data.maintenanceMode === 'boolean') {
+    updateData.maintenanceMode = toDbBool(data.maintenanceMode);
+  }
   
   await (db as any)
     .update(siteSettings)
     .set(updateData)
     .where(eq((siteSettings as any).id, existing.id));
   
-  const updated = await (db as any).select().from(siteSettings).where(eq((siteSettings as any).id, existing.id)).get();
+  const updated = await dbGet(
+    (db as any).select().from(siteSettings).where(eq((siteSettings as any).id, existing.id))
+  );
+  
+  // Revalidate frontend cache if featured event changed
+  if (data.featuredEventId !== undefined) {
+    revalidateFrontendCache();
+  }
   
   return c.json({ settings: updated, message: 'Settings updated successfully' });
 });
 
+// Set featured event (admin only) - convenience endpoint for event editor
+siteSettingsRouter.put('/featured-event', requireAuth(['admin']), zValidator('json', z.object({
+  eventId: z.string().nullable(),
+})), async (c) => {
+  const { eventId } = c.req.valid('json');
+  const user = c.get('user');
+  const now = getNow();
+  
+  // Validate event if provided
+  if (eventId) {
+    const event = await dbGet<any>(
+      (db as any).select().from(events).where(eq((events as any).id, eventId))
+    );
+    if (!event) {
+      return c.json({ error: 'Event not found' }, 404);
+    }
+    if (event.status !== 'published') {
+      return c.json({ error: 'Event must be published to be featured' }, 400);
+    }
+    const eventEndTime = event.endDatetime || event.startDatetime;
+    if (new Date(eventEndTime).getTime() <= Date.now()) {
+      return c.json(
+        { error: 'Cannot feature an event that has already ended' },
+        400
+      );
+    }
+  }
+
+  // Get or create settings
+  const existing = await dbGet<any>(
+    (db as any).select().from(siteSettings).limit(1)
+  );
+  
+  if (!existing) {
+    // Create new settings record with featured event
+    const id = generateId();
+    const newSettings = {
+      id,
+      timezone: 'America/Asuncion',
+      siteName: 'Spanglish',
+      featuredEventId: eventId,
+      maintenanceMode: 0,
+      updatedAt: now,
+      updatedBy: user.id,
+    };
+    
+    await (db as any).insert(siteSettings).values(newSettings);
+    
+    // Revalidate frontend cache so homepage shows the updated featured event
+    revalidateFrontendCache();
+    
+    return c.json({ featuredEventId: eventId, message: eventId ? 'Event set as featured' : 'Featured event removed' });
+  }
+  
+  // Update existing settings
+  await (db as any)
+    .update(siteSettings)
+    .set({
+      featuredEventId: eventId,
+      updatedAt: now,
+      updatedBy: user.id,
+    })
+    .where(eq((siteSettings as any).id, existing.id));
+  
+  // Revalidate frontend cache so homepage shows the updated featured event
+  revalidateFrontendCache();
+  
+  return c.json({ featuredEventId: eventId, message: eventId ? 'Event set as featured' : 'Featured event removed' });
+});
+
 export default siteSettingsRouter;

backend/src/routes/users.ts

@@ -1,7 +1,7 @@
 import { Hono } from 'hono';
 import { zValidator } from '@hono/zod-validator';
 import { z } from 'zod';
-import { db, users, tickets, events, payments } from '../db/index.js';
+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 { requireAuth } from '../lib/auth.js';
 import { getNow } from '../lib/utils.js';
@@ -17,9 +17,11 @@ const usersRouter = new Hono<{ Variables: { user: UserContext } }>();
 
 const updateUserSchema = z.object({
   name: z.string().min(2).optional(),
+  email: z.string().email().optional(),
   phone: z.string().optional(),
   role: z.enum(['admin', 'organizer', 'staff', 'marketing', 'user']).optional(),
   languagePreference: z.enum(['en', 'es']).optional(),
+  accountStatus: z.enum(['active', 'unclaimed', 'suspended']).optional(),
 });
 
 // Get all users (admin only)
@@ -33,6 +35,9 @@ usersRouter.get('/', requireAuth(['admin']), async (c) => {
     phone: (users as any).phone,
     role: (users as any).role,
     languagePreference: (users as any).languagePreference,
+    isClaimed: (users as any).isClaimed,
+    rucNumber: (users as any).rucNumber,
+    accountStatus: (users as any).accountStatus,
     createdAt: (users as any).createdAt,
   }).from(users);
   
@@ -40,7 +45,7 @@ usersRouter.get('/', requireAuth(['admin']), async (c) => {
     query = query.where(eq((users as any).role, role));
   }
   
-  const result = await query.orderBy(desc((users as any).createdAt)).all();
+  const result = await dbAll(query.orderBy(desc((users as any).createdAt)));
   
   return c.json({ users: result });
 });
@@ -55,7 +60,8 @@ usersRouter.get('/:id', requireAuth(['admin', 'organizer', 'staff', 'marketing',
     return c.json({ error: 'Forbidden' }, 403);
   }
   
-  const user = await (db as any)
+  const user = await dbGet(
+    (db as any)
       .select({
         id: (users as any).id,
         email: (users as any).email,
@@ -63,11 +69,14 @@ usersRouter.get('/:id', requireAuth(['admin', 'organizer', 'staff', 'marketing',
         phone: (users as any).phone,
         role: (users as any).role,
         languagePreference: (users as any).languagePreference,
+        isClaimed: (users as any).isClaimed,
+        rucNumber: (users as any).rucNumber,
+        accountStatus: (users as any).accountStatus,
         createdAt: (users as any).createdAt,
       })
       .from(users)
       .where(eq((users as any).id, id))
-    .get();
+  );
   
   if (!user) {
     return c.json({ error: 'User not found' }, 404);
@@ -87,12 +96,20 @@ usersRouter.put('/:id', requireAuth(['admin', 'organizer', 'staff', 'marketing',
     return c.json({ error: 'Forbidden' }, 403);
   }
   
-  // Only admin can change roles
+  // Only admin can change roles, email, and account status
   if (data.role && currentUser.role !== 'admin') {
     delete data.role;
   }
+  if (data.email && currentUser.role !== 'admin') {
+    delete data.email;
+  }
+  if (data.accountStatus && currentUser.role !== 'admin') {
+    delete data.accountStatus;
+  }
   
-  const existing = await (db as any).select().from(users).where(eq((users as any).id, id)).get();
+  const existing = await dbGet(
+    (db as any).select().from(users).where(eq((users as any).id, id))
+  );
   if (!existing) {
     return c.json({ error: 'User not found' }, 404);
   }
@@ -102,7 +119,8 @@ usersRouter.put('/:id', requireAuth(['admin', 'organizer', 'staff', 'marketing',
     .set({ ...data, updatedAt: getNow() })
     .where(eq((users as any).id, id));
   
-  const updated = await (db as any)
+  const updated = await dbGet(
+    (db as any)
       .select({
         id: (users as any).id,
         email: (users as any).email,
@@ -110,10 +128,14 @@ usersRouter.put('/:id', requireAuth(['admin', 'organizer', 'staff', 'marketing',
         phone: (users as any).phone,
         role: (users as any).role,
         languagePreference: (users as any).languagePreference,
+        isClaimed: (users as any).isClaimed,
+        rucNumber: (users as any).rucNumber,
+        accountStatus: (users as any).accountStatus,
+        createdAt: (users as any).createdAt,
       })
       .from(users)
       .where(eq((users as any).id, id))
-    .get();
+  );
   
   return c.json({ user: updated });
 });
@@ -128,21 +150,23 @@ usersRouter.get('/:id/history', requireAuth(['admin', 'organizer', 'staff', 'mar
     return c.json({ error: 'Forbidden' }, 403);
   }
   
-  const userTickets = await (db as any)
+  const userTickets = await dbAll<any>(
+    (db as any)
       .select()
       .from(tickets)
       .where(eq((tickets as any).userId, id))
       .orderBy(desc((tickets as any).createdAt))
-    .all();
+  );
   
   // Get event details for each ticket
   const history = await Promise.all(
     userTickets.map(async (ticket: any) => {
-      const event = await (db as any)
+      const event = await dbGet(
+        (db as any)
           .select()
           .from(events)
           .where(eq((events as any).id, ticket.eventId))
-        .get();
+      );
       
       return {
         ...ticket,
@@ -164,7 +188,9 @@ usersRouter.delete('/:id', requireAuth(['admin']), async (c) => {
     return c.json({ error: 'Cannot delete your own account' }, 400);
   }
   
-  const existing = await (db as any).select().from(users).where(eq((users as any).id, id)).get();
+  const existing = await dbGet<any>(
+    (db as any).select().from(users).where(eq((users as any).id, id))
+  );
   if (!existing) {
     return c.json({ error: 'User not found' }, 404);
   }
@@ -176,20 +202,80 @@ usersRouter.delete('/:id', requireAuth(['admin']), async (c) => {
   
   try {
     // Get all tickets for this user
-    const userTickets = await (db as any)
+    const userTickets = await dbAll<any>(
+      (db as any)
         .select()
         .from(tickets)
         .where(eq((tickets as any).userId, id))
-      .all();
+    );
     
-    // Delete payments associated with user's tickets
+    // Delete invoices associated with user's tickets (invoices reference payments which reference tickets)
     for (const ticket of userTickets) {
+      // Get payments for this ticket
+      const ticketPayments = await dbAll<any>(
+        (db as any)
+          .select()
+          .from(payments)
+          .where(eq((payments as any).ticketId, ticket.id))
+      );
+      
+      // Delete invoices for each payment
+      for (const payment of ticketPayments) {
+        await (db as any).delete(invoices).where(eq((invoices as any).paymentId, payment.id));
+      }
+      
+      // Delete payments for this ticket
       await (db as any).delete(payments).where(eq((payments as any).ticketId, ticket.id));
     }
     
+    // Delete invoices directly associated with the user (if any)
+    await (db as any).delete(invoices).where(eq((invoices as any).userId, id));
+    
     // Delete user's tickets
     await (db as any).delete(tickets).where(eq((tickets as any).userId, id));
     
+    // Delete magic link tokens for the user
+    await (db as any).delete(magicLinkTokens).where(eq((magicLinkTokens as any).userId, id));
+    
+    // Delete user sessions
+    await (db as any).delete(userSessions).where(eq((userSessions as any).userId, id));
+    
+    // Set userId to null in audit_logs (nullable reference)
+    await (db as any)
+      .update(auditLogs)
+      .set({ userId: null })
+      .where(eq((auditLogs as any).userId, id));
+    
+    // Set sentBy to null in email_logs (nullable reference)
+    await (db as any)
+      .update(emailLogs)
+      .set({ sentBy: null })
+      .where(eq((emailLogs as any).sentBy, id));
+    
+    // Set updatedBy to null in payment_options (nullable reference)
+    await (db as any)
+      .update(paymentOptions)
+      .set({ updatedBy: null })
+      .where(eq((paymentOptions as any).updatedBy, id));
+    
+    // Set updatedBy to null in legal_pages (nullable reference)
+    await (db as any)
+      .update(legalPages)
+      .set({ updatedBy: null })
+      .where(eq((legalPages as any).updatedBy, id));
+    
+    // Set updatedBy to null in site_settings (nullable reference)
+    await (db as any)
+      .update(siteSettings)
+      .set({ updatedBy: null })
+      .where(eq((siteSettings as any).updatedBy, id));
+    
+    // Clear checkedInByAdminId references in tickets
+    await (db as any)
+      .update(tickets)
+      .set({ checkedInByAdminId: null })
+      .where(eq((tickets as any).checkedInByAdminId, id));
+    
     // Delete the user
     await (db as any).delete(users).where(eq((users as any).id, id));
     
@@ -202,16 +288,18 @@ usersRouter.delete('/:id', requireAuth(['admin']), async (c) => {
 
 // Get user statistics (admin)
 usersRouter.get('/stats/overview', requireAuth(['admin']), async (c) => {
-  const totalUsers = await (db as any)
+  const totalUsers = await dbGet<any>(
+    (db as any)
       .select({ count: sql<number>`count(*)` })
       .from(users)
-    .get();
+  );
   
-  const adminCount = await (db as any)
+  const adminCount = await dbGet<any>(
+    (db as any)
       .select({ count: sql<number>`count(*)` })
       .from(users)
       .where(eq((users as any).role, 'admin'))
-    .get();
+  );
   
   return c.json({
     stats: {

deploy/spanglish-backend.service

@@ -8,9 +8,9 @@ Type=simple
 User=spanglish
 Group=spanglish
 WorkingDirectory=/home/spanglish/Spanglish/backend
+EnvironmentFile=/home/spanglish/Spanglish/backend/.env
 Environment=NODE_ENV=production
 Environment=PORT=3018
-EnvironmentFile=/home/spanglish/Spanglish/backend/.env
 ExecStart=/usr/bin/node dist/index.js
 Restart=on-failure
 RestartSec=10

frontend/.env.example

@@ -21,6 +21,13 @@ NEXT_PUBLIC_EMAIL=hola@spanglish.com.py
 NEXT_PUBLIC_TELEGRAM=spanglish_py
 NEXT_PUBLIC_TIKTOK=spanglishsocialpy
 
+# Revalidation secret (shared between frontend and backend for on-demand cache revalidation)
+# Must match the REVALIDATE_SECRET in backend/.env
+REVALIDATE_SECRET=change-me-to-a-random-secret
+
+# Next event cache revalidation (seconds) - homepage metadata/social preview refresh interval. Default: 3600
+NEXT_EVENT_REVALIDATE_SECONDS=3600
+
 # Plausible Analytics (optional - leave empty to disable tracking)
 NEXT_PUBLIC_PLAUSIBLE_URL=https://analytics.azzamo.net
 NEXT_PUBLIC_PLAUSIBLE_DOMAIN=spanglishcommunity.com

frontend/package.json

@@ -10,6 +10,10 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.4",
+    "@tiptap/extension-placeholder": "^3.18.0",
+    "@tiptap/pm": "^3.18.0",
+    "@tiptap/react": "^3.18.0",
+    "@tiptap/starter-kit": "^3.18.0",
     "clsx": "^2.1.1",
     "html5-qrcode": "^2.3.8",
     "next": "^14.2.4",

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

@@ -1,11 +1,12 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useParams, useRouter } from 'next/navigation';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import { useLanguage } from '@/context/LanguageContext';
 import { useAuth } from '@/context/AuthContext';
 import { eventsApi, ticketsApi, paymentOptionsApi, Event, PaymentOptionsConfig } from '@/lib/api';
+import { formatPrice, formatDateLong, formatTime } from '@/lib/utils';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
@@ -25,9 +26,17 @@ import {
   BuildingLibraryIcon,
   ClockIcon,
   ArrowTopRightOnSquareIcon,
+  UserIcon,
+  ArrowDownTrayIcon,
 } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
 
+// Attendee info for each ticket
+interface AttendeeInfo {
+  firstName: string;
+  lastName: string;
+}
+
 type PaymentMethod = 'bancard' | 'lightning' | 'cash' | 'bank_transfer' | 'tpago';
 
 interface BookingFormData {
@@ -51,14 +60,19 @@ interface LightningInvoice {
 
 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 default function BookingPage() {
   const params = useParams();
   const router = useRouter();
+  const searchParams = useSearchParams();
   const { t, locale } = useLanguage();
   const { user } = useAuth();
   const [event, setEvent] = useState<Event | null>(null);
@@ -70,6 +84,20 @@ export default function BookingPage() {
   const [paymentPending, setPaymentPending] = useState(false);
   const [markingPaid, setMarkingPaid] = useState(false);
   
+  // State for payer name (when paid under different name)
+  const [paidUnderDifferentName, setPaidUnderDifferentName] = useState(false);
+  const [payerName, setPayerName] = useState('');
+  
+  // Quantity from URL param (default 1)
+  const initialQuantity = Math.max(1, parseInt(searchParams.get('qty') || '1', 10));
+  const [ticketQuantity, setTicketQuantity] = useState(initialQuantity);
+  
+  // Attendees for multi-ticket bookings (ticket 1 uses main formData)
+  const [attendees, setAttendees] = useState<AttendeeInfo[]>(() => 
+    Array(Math.max(0, initialQuantity - 1)).fill(null).map(() => ({ firstName: '', lastName: '' }))
+  );
+  const [attendeeErrors, setAttendeeErrors] = useState<{ [key: number]: string }>({});
+  
   const [formData, setFormData] = useState<BookingFormData>({
     firstName: '',
     lastName: '',
@@ -82,43 +110,12 @@ export default function BookingPage() {
 
   const [errors, setErrors] = useState<Partial<Record<keyof BookingFormData, string>>>({});
 
-  // RUC validation using modulo 11 algorithm
+  const rucPattern = /^\d{6,10}$/;
-  const validateRucCheckDigit = (ruc: string): boolean => {
-    const match = ruc.match(/^(\d{6,8})-(\d)$/);
-    if (!match) return false;
 
-    const baseNumber = match[1];
+  // Format RUC input: digits only, max 10
-    const checkDigit = parseInt(match[2], 10);
-    
-    // Modulo 11 algorithm for Paraguayan RUC
-    const weights = [2, 3, 4, 5, 6, 7, 2, 3];
-    let sum = 0;
-    const digits = baseNumber.split('').reverse();
-    
-    for (let i = 0; i < digits.length; i++) {
-      sum += parseInt(digits[i], 10) * weights[i];
-    }
-    
-    const remainder = sum % 11;
-    const expectedCheckDigit = remainder < 2 ? 0 : 11 - remainder;
-    
-    return checkDigit === expectedCheckDigit;
-  };
-
-  // Format RUC input: auto-insert hyphen before last digit
   const formatRuc = (value: string): string => {
-    // Remove non-numeric characters
+    const digits = value.replace(/\D/g, '').slice(0, 10);
-    const digits = value.replace(/\D/g, '');
+    return digits;
-    
-    // Limit to 9 digits (8 base + 1 check)
-    const limited = digits.slice(0, 9);
-    
-    // Auto-insert hyphen before last digit if we have more than 6 digits
-    if (limited.length > 6) {
-      return `${limited.slice(0, -1)}-${limited.slice(-1)}`;
-    }
-    
-    return limited;
   };
 
   // Handle RUC input change
@@ -132,19 +129,12 @@ export default function BookingPage() {
     }
   };
 
-  // Validate RUC on blur
+  // Validate RUC on blur (optional field: 6–10 digits)
   const handleRucBlur = () => {
-    if (!formData.ruc) return; // Optional field, no validation if empty
+    if (!formData.ruc) return;
-    
+    const digits = formData.ruc.replace(/\D/g, '');
-    const rucPattern = /^[0-9]{6,8}-[0-9]{1}$/;
+    if (digits.length > 0 && !rucPattern.test(digits)) {
-    
-    if (!rucPattern.test(formData.ruc)) {
       setErrors({ ...errors, ruc: t('booking.form.errors.rucInvalidFormat') });
-      return;
-    }
-    
-    if (!validateRucCheckDigit(formData.ruc)) {
-      setErrors({ ...errors, ruc: t('booking.form.errors.rucInvalidCheckDigit') });
     }
   };
 
@@ -155,7 +145,7 @@ export default function BookingPage() {
         paymentOptionsApi.getForEvent(params.eventId as string),
       ])
         .then(([eventRes, paymentRes]) => {
-          if (!eventRes.event || eventRes.event.status !== 'published') {
+          if (!eventRes.event || !['published', 'unlisted'].includes(eventRes.event.status)) {
             toast.error('Event is not available for booking');
             router.push('/events');
             return;
@@ -167,7 +157,25 @@ export default function BookingPage() {
             return;
           }
 
+          const bookedCount = eventRes.event.bookedCount ?? 0;
+          const capacity = eventRes.event.capacity ?? 0;
+          const soldOut = bookedCount >= capacity;
+          if (soldOut) {
+            toast.error(t('events.details.soldOut'));
+            router.push(`/events/${eventRes.event.id}`);
+            return;
+          }
+
+          const spotsLeft = Math.max(0, capacity - bookedCount);
           setEvent(eventRes.event);
+          // Cap quantity by available spots (never allow requesting more than spotsLeft)
+          setTicketQuantity((q) => Math.min(q, Math.max(1, spotsLeft)));
+          setAttendees((prev) => {
+            const newQty = Math.min(initialQuantity, Math.max(1, spotsLeft));
+            const need = Math.max(0, newQty - 1);
+            if (need === prev.length) return prev;
+            return Array(need).fill(null).map((_, i) => prev[i] ?? { firstName: '', lastName: '' });
+          });
           setPaymentConfig(paymentRes.paymentOptions);
           
           // Set default payment method based on what's enabled
@@ -209,24 +217,12 @@ export default function BookingPage() {
     }
   }, [user]);
 
-  const formatDate = (dateStr: string) => {
+  const formatDate = (dateStr: string) => formatDateLong(dateStr, locale as 'en' | 'es');
-    return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
+  const fmtTime = (dateStr: string) => formatTime(dateStr, locale as 'en' | 'es');
-      weekday: 'long',
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  };
-
-  const formatTime = (dateStr: string) => {
-    return new Date(dateStr).toLocaleTimeString(locale === 'es' ? 'es-ES' : 'en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  };
 
   const validateForm = (): boolean => {
     const newErrors: Partial<Record<keyof BookingFormData, string>> = {};
+    const newAttendeeErrors: { [key: number]: string } = {};
     
     if (!formData.firstName.trim() || formData.firstName.length < 2) {
       newErrors.firstName = t('booking.form.errors.firstNameRequired');
@@ -246,18 +242,26 @@ export default function BookingPage() {
       newErrors.phone = t('booking.form.errors.phoneTooShort');
     }
     
-    // RUC validation (optional field - only validate if filled)
+    // RUC validation (optional field - 6–10 digits if filled)
     if (formData.ruc.trim()) {
-      const rucPattern = /^[0-9]{6,8}-[0-9]{1}$/;
+      const digits = formData.ruc.replace(/\D/g, '');
-      if (!rucPattern.test(formData.ruc)) {
+      if (!/^\d{6,10}$/.test(digits)) {
         newErrors.ruc = t('booking.form.errors.rucInvalidFormat');
-      } else if (!validateRucCheckDigit(formData.ruc)) {
-        newErrors.ruc = t('booking.form.errors.rucInvalidCheckDigit');
       }
     }
     
+    // Validate additional attendees (if multi-ticket)
+    attendees.forEach((attendee, index) => {
+      if (!attendee.firstName.trim() || attendee.firstName.length < 2) {
+        newAttendeeErrors[index] = locale === 'es' 
+          ? 'Ingresa el nombre del asistente'
+          : 'Enter attendee name';
+      }
+    });
+    
     setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
+    setAttendeeErrors(newAttendeeErrors);
+    return Object.keys(newErrors).length === 0 && Object.keys(newAttendeeErrors).length === 0;
   };
 
   // Connect to SSE for real-time payment updates
@@ -345,9 +349,20 @@ export default function BookingPage() {
   const handleMarkPaymentSent = async () => {
     if (!bookingResult) return;
     
+    // Validate payer name if paid under different name
+    if (paidUnderDifferentName && !payerName.trim()) {
+      toast.error(locale === 'es' 
+        ? 'Por favor ingresa el nombre del pagador' 
+        : 'Please enter the payer name');
+      return;
+    }
+    
     setMarkingPaid(true);
     try {
-      await ticketsApi.markPaymentSent(bookingResult.ticketId);
+      await ticketsApi.markPaymentSent(
+        bookingResult.ticketId, 
+        paidUnderDifferentName ? payerName.trim() : undefined
+      );
       setStep('pending_approval');
       toast.success(locale === 'es' 
         ? 'Pago marcado como enviado. Esperando aprobación.' 
@@ -365,6 +380,12 @@ export default function BookingPage() {
 
     setSubmitting(true);
     try {
+      // Build attendees array: first attendee from main form, rest from attendees state
+      const allAttendees = [
+        { firstName: formData.firstName, lastName: formData.lastName },
+        ...attendees
+      ];
+      
       const response = await ticketsApi.book({
         eventId: event.id,
         firstName: formData.firstName,
@@ -373,17 +394,25 @@ export default function BookingPage() {
         phone: formData.phone,
         preferredLanguage: formData.preferredLanguage,
         paymentMethod: formData.paymentMethod,
-        ...(formData.ruc.trim() && { ruc: formData.ruc }),
+        ...(formData.ruc.trim() && { ruc: formData.ruc.replace(/\D/g, '') }),
+        // Include attendees array for multi-ticket bookings
+        ...(allAttendees.length > 1 && { attendees: allAttendees }),
       });
       
-      const { ticket, lightningInvoice } = response as any;
+      const { ticket, tickets: ticketsList, bookingId, lightningInvoice } = response as any;
+      const ticketCount = ticketsList?.length || 1;
+      const primaryTicket = ticket || ticketsList?.[0];
       
       // If Lightning payment with invoice, go to paying step
       if (formData.paymentMethod === 'lightning' && lightningInvoice?.paymentRequest) {
         const result: BookingResult = {
-          ticketId: ticket.id,
+          ticketId: primaryTicket.id,
-          qrCode: ticket.qrCode,
+          ticketIds: ticketsList?.map((t: any) => t.id),
+          bookingId,
+          qrCode: primaryTicket.qrCode,
+          qrCodes: ticketsList?.map((t: any) => t.qrCode),
           paymentMethod: formData.paymentMethod as PaymentMethod,
+          ticketCount,
           lightningInvoice: {
             paymentHash: lightningInvoice.paymentHash,
             paymentRequest: lightningInvoice.paymentRequest,
@@ -398,21 +427,29 @@ export default function BookingPage() {
         setPaymentPending(true);
         
         // Connect to SSE for real-time payment updates
-        connectPaymentStream(ticket.id);
+        connectPaymentStream(primaryTicket.id);
       } else if (formData.paymentMethod === 'bank_transfer' || formData.paymentMethod === 'tpago') {
         // Manual payment methods - show payment details
         setBookingResult({
-          ticketId: ticket.id,
+          ticketId: primaryTicket.id,
-          qrCode: ticket.qrCode,
+          ticketIds: ticketsList?.map((t: any) => t.id),
+          bookingId,
+          qrCode: primaryTicket.qrCode,
+          qrCodes: ticketsList?.map((t: any) => t.qrCode),
           paymentMethod: formData.paymentMethod,
+          ticketCount,
         });
         setStep('manual_payment');
       } else {
         // Cash payment - go straight to success
         setBookingResult({
-          ticketId: ticket.id,
+          ticketId: primaryTicket.id,
-          qrCode: ticket.qrCode,
+          ticketIds: ticketsList?.map((t: any) => t.id),
+          bookingId,
+          qrCode: primaryTicket.qrCode,
+          qrCodes: ticketsList?.map((t: any) => t.qrCode),
           paymentMethod: formData.paymentMethod,
+          ticketCount,
         });
         setStep('success');
         toast.success(t('booking.success.message'));
@@ -441,8 +478,8 @@ export default function BookingPage() {
     paymentMethods.push({
       id: 'tpago',
       icon: CreditCardIcon,
-      label: locale === 'es' ? 'TPago / Tarjeta Internacional' : 'TPago / International Card',
+      label: locale === 'es' ? 'TPago / Tarjetas de Crédito' : 'TPago / Credit Cards',
-      description: locale === 'es' ? 'Paga con tarjeta de crédito o débito' : 'Pay with credit or debit card',
+      description: locale === 'es' ? 'Pagá con tarjetas de crédito locales o internacionales' : 'Pay with local or international credit cards',
       badge: locale === 'es' ? 'Manual' : 'Manual',
     });
   }
@@ -451,8 +488,8 @@ export default function BookingPage() {
     paymentMethods.push({
       id: 'bank_transfer',
       icon: BuildingLibraryIcon,
-      label: locale === 'es' ? 'Transferencia Bancaria' : 'Bank Transfer',
+      label: locale === 'es' ? 'Transferencia Bancaria Local' : 'Local Bank Transfer',
-      description: 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',
     });
   }
@@ -481,7 +518,8 @@ export default function BookingPage() {
     return null;
   }
 
-  const isSoldOut = event.availableSeats === 0;
+  const spotsLeft = Math.max(0, event.capacity - (event.bookedCount ?? 0));
+  const isSoldOut = (event.bookedCount ?? 0) >= event.capacity;
 
   // Get title and description based on payment method
   const getSuccessContent = () => {
@@ -591,6 +629,8 @@ export default function BookingPage() {
   if (step === 'manual_payment' && bookingResult && paymentConfig) {
     const isBankTransfer = bookingResult.paymentMethod === 'bank_transfer';
     const isTpago = bookingResult.paymentMethod === 'tpago';
+    const ticketCount = bookingResult.ticketCount || 1;
+    const totalAmount = (event?.price || 0) * ticketCount;
     
     return (
       <div className="section-padding">
@@ -620,8 +660,13 @@ export default function BookingPage() {
                 {locale === 'es' ? 'Monto a pagar' : 'Amount to pay'}
               </p>
               <p className="text-2xl font-bold text-primary-dark">
-                {event?.price?.toLocaleString()} {event?.currency}
+                {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 */}
@@ -724,6 +769,45 @@ export default function BookingPage() {
               </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'
@@ -737,6 +821,7 @@ export default function BookingPage() {
               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'}
@@ -781,7 +866,7 @@ export default function BookingPage() {
               <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 && formatTime(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>
@@ -828,15 +913,36 @@ export default function BookingPage() {
             </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> {formatTime(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>
@@ -872,6 +978,25 @@ export default function BookingPage() {
               {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>
@@ -907,7 +1032,7 @@ export default function BookingPage() {
           <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)} • {formatTime(event.startDatetime)}</span>
+              <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" />
@@ -916,7 +1041,7 @@ export default function BookingPage() {
             {!event.externalBookingEnabled && (
               <div className="flex items-center gap-3">
                 <UserGroupIcon className="w-5 h-5 text-primary-yellow" />
-                <span>{event.availableSeats} {t('events.details.spotsLeft')}</span>
+                <span>{spotsLeft} / {event.capacity} {t('events.details.spotsLeft')}</span>
               </div>
             )}
             <div className="flex items-center gap-3">
@@ -924,10 +1049,28 @@ export default function BookingPage() {
               <span className="font-bold text-lg">
                 {event.price === 0 
                   ? t('events.details.free')
-                  : `${event.price.toLocaleString()} ${event.currency}`}
+                  : 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 ? (
@@ -940,8 +1083,18 @@ export default function BookingPage() {
           <form onSubmit={handleSubmit}>
             {/* User Information Section */}
             <Card className="mb-6 p-6">
-              <h3 className="font-bold text-lg mb-4 text-primary-dark">
+              <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">
@@ -1039,6 +1192,74 @@ export default function BookingPage() {
               </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">
@@ -1097,45 +1318,6 @@ export default function BookingPage() {
                       </button>
                     ))}
                     
-                    {/* Manual payment instructions - shown when TPago or Bank Transfer is selected */}
-                    {(formData.paymentMethod === 'tpago' || formData.paymentMethod === 'bank_transfer') && (
-                      <div className="mt-4 p-4 bg-amber-50 border border-amber-200 rounded-lg">
-                        <div className="flex gap-3">
-                          <div className="flex-shrink-0">
-                            <svg className="w-5 h-5 text-amber-600 mt-0.5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
-                              <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                            </svg>
-                          </div>
-                          <div className="text-sm text-amber-800">
-                            <p className="font-medium mb-1">
-                              {locale === 'es' ? 'Proceso de pago manual' : 'Manual payment process'}
-                            </p>
-                            <ol className="list-decimal list-inside space-y-1 text-amber-700">
-                              <li>
-                                {locale === 'es' 
-                                  ? 'Por favor completa el pago primero.' 
-                                  : 'Please complete the payment first.'}
-                              </li>
-                              <li>
-                                {locale === 'es' 
-                                  ? 'Después de pagar, haz clic en "Ya pagué" para notificarnos.' 
-                                  : 'After you have paid, click "I have paid" to notify us.'}
-                              </li>
-                              <li>
-                                {locale === 'es' 
-                                  ? 'Nuestro equipo verificará el pago manualmente.' 
-                                  : 'Our team will manually verify the payment.'}
-                              </li>
-                              <li>
-                                {locale === 'es' 
-                                  ? 'Una vez aprobado, recibirás un email confirmando tu reserva.' 
-                                  : 'Once approved, you will receive an email confirming your booking.'}
-                              </li>
-                            </ol>
-                          </div>
-                        </div>
-                      </div>
-                    )}
                   </>
                 )}
               </div>

frontend/src/app/(public)/booking/[ticketId]/page.tsx

@@ -5,6 +5,7 @@ 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 { formatPrice, formatDateLong, formatTime } from '@/lib/utils';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import { 
@@ -151,21 +152,8 @@ export default function BookingPaymentPage() {
     }
   };
 
-  const formatDate = (dateStr: string) => {
+  const formatDate = (dateStr: string) => formatDateLong(dateStr, locale as 'en' | 'es');
-    return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
+  const fmtTime = (dateStr: string) => formatTime(dateStr, locale as 'en' | 'es');
-      weekday: 'long',
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  };
-
-  const formatTime = (dateStr: string) => {
-    return new Date(dateStr).toLocaleTimeString(locale === 'es' ? 'es-ES' : 'en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  };
 
   // Loading state
   if (step === 'loading') {
@@ -236,7 +224,7 @@ export default function BookingPaymentPage() {
                 <div className="text-sm text-gray-600 space-y-2">
                   <p><strong>{locale === 'es' ? 'Evento' : 'Event'}:</strong> {ticket.event.title}</p>
                   <p><strong>{locale === 'es' ? 'Fecha' : 'Date'}:</strong> {formatDate(ticket.event.startDatetime)}</p>
-                  <p><strong>{locale === 'es' ? 'Hora' : 'Time'}:</strong> {formatTime(ticket.event.startDatetime)}</p>
+                  <p><strong>{locale === 'es' ? 'Hora' : 'Time'}:</strong> {fmtTime(ticket.event.startDatetime)}</p>
                   <p><strong>{locale === 'es' ? 'Ubicación' : 'Location'}:</strong> {ticket.event.location}</p>
                 </div>
               )}
@@ -285,7 +273,7 @@ export default function BookingPaymentPage() {
                 <div className="text-sm text-gray-600 space-y-2">
                   <p><strong>{locale === 'es' ? 'Evento' : 'Event'}:</strong> {ticket.event.title}</p>
                   <p><strong>{locale === 'es' ? 'Fecha' : 'Date'}:</strong> {formatDate(ticket.event.startDatetime)}</p>
-                  <p><strong>{locale === 'es' ? 'Hora' : 'Time'}:</strong> {formatTime(ticket.event.startDatetime)}</p>
+                  <p><strong>{locale === 'es' ? 'Hora' : 'Time'}:</strong> {fmtTime(ticket.event.startDatetime)}</p>
                   <p><strong>{locale === 'es' ? 'Ubicación' : 'Location'}:</strong> {ticket.event.location}</p>
                 </div>
               )}
@@ -332,7 +320,7 @@ export default function BookingPaymentPage() {
               <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(ticket.event.startDatetime)} - {formatTime(ticket.event.startDatetime)}</span>
+                  <span>{formatDate(ticket.event.startDatetime)} - {fmtTime(ticket.event.startDatetime)}</span>
                 </div>
                 <div className="flex items-center gap-3">
                   <MapPinIcon className="w-5 h-5 text-primary-yellow" />
@@ -341,7 +329,7 @@ export default function BookingPaymentPage() {
                 <div className="flex items-center gap-3">
                   <CurrencyDollarIcon className="w-5 h-5 text-primary-yellow" />
                   <span className="font-bold text-lg">
-                    {ticket.event.price?.toLocaleString()} {ticket.event.currency}
+                    {ticket.event.price !== undefined ? formatPrice(ticket.event.price, ticket.event.currency) : ''}
                   </span>
                 </div>
               </div>
@@ -374,7 +362,7 @@ export default function BookingPaymentPage() {
                 {locale === 'es' ? 'Monto a pagar' : 'Amount to pay'}
               </p>
               <p className="text-2xl font-bold text-primary-dark">
-                {ticket.event?.price?.toLocaleString()} {ticket.event?.currency}
+                {ticket.event?.price !== undefined ? formatPrice(ticket.event.price, ticket.event.currency) : ''}
               </p>
             </div>
             

frontend/src/app/(public)/booking/success/[ticketId]/page.tsx

@@ -5,6 +5,7 @@ import { useParams } from 'next/navigation';
 import Link from 'next/link';
 import { useLanguage } from '@/context/LanguageContext';
 import { ticketsApi, Ticket } from '@/lib/api';
+import { formatDateLong, formatTime } from '@/lib/utils';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import { 
@@ -69,21 +70,8 @@ export default function BookingSuccessPage() {
     };
   }, [ticketId]);
 
-  const formatDate = (dateStr: string) => {
+  const formatDate = (dateStr: string) => formatDateLong(dateStr, locale as 'en' | 'es');
-    return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
+  const fmtTime = (dateStr: string) => formatTime(dateStr, locale as 'en' | 'es');
-      weekday: 'long',
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  };
-
-  const formatTime = (dateStr: string) => {
-    return new Date(dateStr).toLocaleTimeString(locale === 'es' ? 'es-ES' : 'en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  };
 
   if (loading) {
     return (
@@ -191,7 +179,7 @@ export default function BookingSuccessPage() {
                 <>
                   <p><strong>{locale === 'es' ? 'Evento' : 'Event'}:</strong> {ticket.event.title}</p>
                   <p><strong>{locale === 'es' ? 'Fecha' : 'Date'}:</strong> {formatDate(ticket.event.startDatetime)}</p>
-                  <p><strong>{locale === 'es' ? 'Hora' : 'Time'}:</strong> {formatTime(ticket.event.startDatetime)}</p>
+                  <p><strong>{locale === 'es' ? 'Hora' : 'Time'}:</strong> {fmtTime(ticket.event.startDatetime)}</p>
                   <p><strong>{locale === 'es' ? 'Ubicación' : 'Location'}:</strong> {ticket.event.location}</p>
                 </>
               )}
@@ -229,12 +217,15 @@ export default function BookingSuccessPage() {
           {isPaid && (
             <div className="mb-6">
               <a 
-                href={`/api/tickets/${ticketId}/pdf`}
+                href={ticket.bookingId 
+                  ? `/api/tickets/booking/${ticket.bookingId}/pdf`
+                  : `/api/tickets/${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' ? 'Descargar Ticket' : 'Download Ticket'}
+                {locale === 'es' ? 'Descargar Ticket(s)' : 'Download Ticket(s)'}
               </a>
             </div>
           )}

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

@@ -0,0 +1,82 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useLanguage } from '@/context/LanguageContext';
+import { faqApi, FaqItem } from '@/lib/api';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import Link from 'next/link';
+import clsx from 'clsx';
+
+export default function HomepageFaqSection() {
+  const { t, 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(true).then((res) => {
+      if (!cancelled) setFaqs(res.faqs);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => { cancelled = true; };
+  }, []);
+
+  if (loading || faqs.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className="section-padding bg-secondary-gray" aria-labelledby="homepage-faq-title">
+      <div className="container-page">
+        <div className="max-w-2xl mx-auto">
+          <h2 id="homepage-faq-title" className="text-2xl md:text-3xl font-bold text-primary-dark text-center mb-8">
+            {t('home.faq.title')}
+          </h2>
+          <div className="space-y-3">
+            {faqs.map((faq, index) => (
+              <div
+                key={faq.id}
+                className="bg-white rounded-btn border border-gray-200 overflow-hidden"
+              >
+                <button
+                  onClick={() => setOpenIndex(openIndex === index ? null : index)}
+                  className="w-full px-5 py-4 flex items-center justify-between text-left hover:bg-gray-50 transition-colors"
+                >
+                  <span className="font-semibold text-primary-dark pr-4 text-sm md:text-base">
+                    {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-80' : 'max-h-0'
+                  )}
+                >
+                  <div className="px-5 pb-4 text-gray-600 text-sm md:text-base">
+                    {locale === 'es' && faq.answerEs ? faq.answerEs : faq.answer}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="mt-8 text-center">
+            <Link
+              href="/faq"
+              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"
+            >
+              {t('home.faq.seeFull')}
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -4,37 +4,51 @@ import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { useLanguage } from '@/context/LanguageContext';
 import { eventsApi, Event } from '@/lib/api';
-import Button from '@/components/ui/Button';
+import { formatPrice, formatDateLong, formatTime } from '@/lib/utils';
-import Card from '@/components/ui/Card';
+import { CalendarIcon, MapPinIcon, ClockIcon } from '@heroicons/react/24/outline';
-import { CalendarIcon, MapPinIcon } from '@heroicons/react/24/outline';
 
-export default function NextEventSection() {
+interface NextEventSectionProps {
+  initialEvent?: Event | null;
+}
+
+export default function NextEventSection({ initialEvent }: NextEventSectionProps) {
   const { t, locale } = useLanguage();
-  const [nextEvent, setNextEvent] = useState<Event | null>(null);
+  const [nextEvent, setNextEvent] = useState<Event | null>(initialEvent ?? null);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(initialEvent === undefined);
 
   useEffect(() => {
+    if (initialEvent !== undefined) {
+      if (initialEvent) {
+        const endTime = initialEvent.endDatetime || initialEvent.startDatetime;
+        if (new Date(endTime).getTime() <= Date.now()) {
+          setNextEvent(null);
+          setLoading(true);
           eventsApi.getNextUpcoming()
             .then(({ event }) => setNextEvent(event))
             .catch(console.error)
             .finally(() => setLoading(false));
-  }, []);
+          return;
+        }
+      }
+      return;
+    }
+    eventsApi.getNextUpcoming()
+      .then(({ event }) => setNextEvent(event))
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, [initialEvent]);
 
-  const formatDate = (dateStr: string) => {
+  const formatDate = (dateStr: string) => formatDateLong(dateStr, locale as 'en' | 'es');
-    return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
+  const fmtTime = (dateStr: string) => formatTime(dateStr, locale as 'en' | 'es');
-      weekday: 'long',
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  };
 
-  const formatTime = (dateStr: string) => {
+  const title = nextEvent
-    return new Date(dateStr).toLocaleTimeString(locale === 'es' ? 'es-ES' : 'en-US', {
+    ? (locale === 'es' && nextEvent.titleEs ? nextEvent.titleEs : nextEvent.title)
-      hour: '2-digit',
+    : '';
-      minute: '2-digit',
+  const description = nextEvent
-    });
+    ? (locale === 'es'
-  };
+        ? (nextEvent.shortDescriptionEs || nextEvent.descriptionEs || nextEvent.shortDescription || nextEvent.description)
+        : (nextEvent.shortDescription || nextEvent.description))
+    : '';
 
   if (loading) {
     return (
@@ -55,56 +69,72 @@ export default function NextEventSection() {
   }
 
   return (
-    <Link href={`/events/${nextEvent.id}`} className="block">
+    <Link href={`/events/${nextEvent.id}`} className="block group">
-      <Card variant="elevated" className="p-8 cursor-pointer hover:shadow-lg transition-shadow">
+      <div className="bg-gray-50 border border-gray-200 rounded-2xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
-        <div className="flex flex-col md:flex-row gap-8">
+        <div className="flex flex-col md:flex-row">
-          <div className="flex-1">
+          {/* Banner */}
-            <h3 className="text-2xl font-bold text-primary-dark">
+          {nextEvent.bannerUrl ? (
-              {locale === 'es' && nextEvent.titleEs ? nextEvent.titleEs : nextEvent.title}
+            <div className="relative w-full md:w-2/5 flex-shrink-0">
-            </h3>
+              <img
-            <p className="mt-3 text-gray-600 whitespace-pre-line">
+                src={nextEvent.bannerUrl}
-              {locale === 'es' 
+                alt={title}
-                ? (nextEvent.shortDescriptionEs || nextEvent.descriptionEs || nextEvent.shortDescription || nextEvent.description)
+                className="w-full h-48 md:h-full object-cover"
-                : (nextEvent.shortDescription || nextEvent.description)}
+              />
-            </p>
+            </div>
+          ) : (
+            <div className="w-full md:w-2/5 flex-shrink-0 h-48 md:h-auto bg-gradient-to-br from-primary-yellow/20 to-secondary-gray flex items-center justify-center">
+              <CalendarIcon className="w-16 h-16 text-gray-300" />
+            </div>
+          )}
 
-            <div className="mt-6 space-y-3">
+          {/* Info */}
-              <div className="flex items-center gap-3 text-gray-700">
+          <div className="flex-1 p-5 md:p-8 flex flex-col justify-between">
-                <CalendarIcon className="w-5 h-5 text-primary-yellow" />
+            <div>
+              <h3 className="text-xl md:text-2xl font-bold text-primary-dark group-hover:text-brand-navy transition-colors">
+                {title}
+              </h3>
+              {description && (
+                <p className="mt-2 text-sm md:text-base text-gray-600 line-clamp-2">
+                  {description}
+                </p>
+              )}
+
+              <div className="mt-4 md:mt-5 space-y-2">
+                <div className="flex items-center gap-2.5 text-gray-700 text-sm">
+                  <CalendarIcon className="w-4 h-4 text-primary-yellow flex-shrink-0" />
                   <span>{formatDate(nextEvent.startDatetime)}</span>
                 </div>
-              <div className="flex items-center gap-3 text-gray-700">
+                <div className="flex items-center gap-2.5 text-gray-700 text-sm">
-                <span className="w-5 h-5 flex items-center justify-center text-primary-yellow font-bold">
+                  <ClockIcon className="w-4 h-4 text-primary-yellow flex-shrink-0" />
-                  ⏰
+                  <span>{fmtTime(nextEvent.startDatetime)}</span>
-                </span>
-                <span>{formatTime(nextEvent.startDatetime)}</span>
                 </div>
-              <div className="flex items-center gap-3 text-gray-700">
+                <div className="flex items-center gap-2.5 text-gray-700 text-sm">
-                <MapPinIcon className="w-5 h-5 text-primary-yellow" />
+                  <MapPinIcon className="w-4 h-4 text-primary-yellow flex-shrink-0" />
                   <span>{nextEvent.location}</span>
                 </div>
               </div>
             </div>
 
-          <div className="flex flex-col justify-between items-start md:items-end">
+            <div className="mt-5 md:mt-6 flex items-center justify-between gap-4">
-            <div className="text-right">
+              <div>
-              <span className="text-3xl font-bold text-primary-dark">
+                <span className="text-2xl md:text-3xl font-bold text-primary-dark">
                   {nextEvent.price === 0
                     ? t('events.details.free')
-                  : `${nextEvent.price.toLocaleString()} ${nextEvent.currency}`}
+                    : formatPrice(nextEvent.price, nextEvent.currency)}
                 </span>
-              {!nextEvent.externalBookingEnabled && (
+                {!nextEvent.externalBookingEnabled && nextEvent.availableSeats != null && (
-                <p className="text-sm text-gray-500 mt-1">
+                  <p className="text-xs text-gray-500 mt-0.5">
                     {nextEvent.availableSeats} {t('events.details.spotsLeft')}
                   </p>
                 )}
               </div>
-            <Button size="lg" className="mt-6">
+              <span className="inline-flex items-center bg-primary-yellow text-primary-dark font-semibold py-2.5 px-5 rounded-xl text-sm transition-all duration-200 group-hover:bg-yellow-400 flex-shrink-0">
                 {t('common.moreInfo')}
-            </Button>
+              </span>
+            </div>
+          </div>
         </div>
       </div>
-      </Card>
     </Link>
   );
 }

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

@@ -2,8 +2,13 @@
 
 import { useLanguage } from '@/context/LanguageContext';
 import NextEventSection from './NextEventSection';
+import { Event } from '@/lib/api';
 
-export default function NextEventSectionWrapper() {
+interface NextEventSectionWrapperProps {
+  initialEvent?: Event | null;
+}
+
+export default function NextEventSectionWrapper({ initialEvent }: NextEventSectionWrapperProps) {
   const { t } = useLanguage();
 
   return (
@@ -12,8 +17,8 @@ export default function NextEventSectionWrapper() {
         <h2 className="section-title text-center">
           {t('home.nextEvent.title')}
         </h2>
-        <div className="mt-12 max-w-3xl mx-auto">
+        <div className="mt-12 max-w-4xl mx-auto">
-          <NextEventSection />
+          <NextEventSection initialEvent={initialEvent} />
         </div>
       </div>
     </section>

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

@@ -25,6 +25,7 @@ export default function PaymentsTab({ payments, language }: PaymentsTabProps) {
       year: 'numeric',
       month: 'short',
       day: 'numeric',
+      timeZone: 'America/Asuncion',
     });
   };
 

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

@@ -118,7 +118,7 @@ export default function ProfileTab({ onUpdate }: ProfileTabProps) {
               {profile?.memberSince
                 ? new Date(profile.memberSince).toLocaleDateString(
                     language === 'es' ? 'es-ES' : 'en-US',
-                    { year: 'numeric', month: 'long', day: 'numeric' }
+                    { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'America/Asuncion' }
                   )
                 : '-'}
             </span>

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

@@ -153,6 +153,7 @@ export default function SecurityTab() {
       day: 'numeric',
       hour: '2-digit',
       minute: '2-digit',
+      timeZone: 'America/Asuncion',
     });
   };
 

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

@@ -30,6 +30,7 @@ export default function TicketsTab({ tickets, language }: TicketsTabProps) {
       year: 'numeric',
       month: 'short',
       day: 'numeric',
+      timeZone: 'America/Asuncion',
     });
   };
 
@@ -170,6 +171,20 @@ export default function TicketsTab({ tickets, language }: TicketsTabProps) {
                       {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 || '#'}

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

@@ -7,6 +7,7 @@ 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 toast from 'react-hot-toast';
 import Link from 'next/link';
 import { 
@@ -85,21 +86,8 @@ export default function DashboardPage() {
     );
   }
 
-  const formatDate = (dateStr: string) => {
+  const formatDate = (dateStr: string) => formatDateLong(dateStr, language as 'en' | 'es');
-    return new Date(dateStr).toLocaleDateString(language === 'es' ? 'es-ES' : 'en-US', {
+  const fmtTime = (dateStr: string) => formatTime(dateStr, language as 'en' | 'es');
-      weekday: 'long',
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  };
-
-  const formatTime = (dateStr: string) => {
-    return new Date(dateStr).toLocaleTimeString(language === 'es' ? 'es-ES' : 'en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  };
 
   return (
     <div className="section-padding min-h-[70vh]">

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

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { useLanguage } from '@/context/LanguageContext';
 import { eventsApi, Event } from '@/lib/api';
+import { formatPrice, formatDateLong, formatTime } from '@/lib/utils';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import ShareButtons from '@/components/ShareButtons';
@@ -13,6 +14,8 @@ import {
   MapPinIcon, 
   UserGroupIcon,
   ArrowLeftIcon,
+  MinusIcon,
+  PlusIcon,
 } from '@heroicons/react/24/outline';
 
 interface EventDetailClientProps {
@@ -24,6 +27,7 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail
   const { t, locale } = useLanguage();
   const [event, setEvent] = useState<Event>(initialEvent);
   const [mounted, setMounted] = useState(false);
+  const [ticketQuantity, setTicketQuantity] = useState(1);
 
   // Ensure consistent hydration by only rendering dynamic content after mount
   useEffect(() => {
@@ -37,159 +41,77 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail
       .catch(console.error);
   }, [eventId]);
 
-  const formatDate = (dateStr: string) => {
+  // Spots left: never negative; sold out when confirmed >= capacity
-    return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
+  const spotsLeft = Math.max(0, event.capacity - (event.bookedCount ?? 0));
-      weekday: 'long',
+  const isSoldOut = (event.bookedCount ?? 0) >= event.capacity;
-      year: 'numeric',
+  const maxTickets = isSoldOut ? 0 : Math.max(1, spotsLeft);
-      month: 'long',
+
-      day: 'numeric',
+  const decreaseQuantity = () => {
-    });
+    setTicketQuantity(prev => Math.max(1, prev - 1));
   };
 
-  const formatTime = (dateStr: string) => {
+  const increaseQuantity = () => {
-    return new Date(dateStr).toLocaleTimeString(locale === 'es' ? 'es-ES' : 'en-US', {
+    setTicketQuantity(prev => Math.min(maxTickets, prev + 1));
-      hour: '2-digit',
-      minute: '2-digit',
-    });
   };
 
-  const isSoldOut = event.availableSeats === 0;
+  const formatDate = (dateStr: string) => formatDateLong(dateStr, locale as 'en' | 'es');
+  const fmtTime = (dateStr: string) => formatTime(dateStr, locale as 'en' | 'es');
+
   const isCancelled = event.status === 'cancelled';
   // Only calculate isPastEvent after mount to avoid hydration mismatch
   const isPastEvent = mounted ? new Date(event.startDatetime) < new Date() : false;
-  const canBook = !isSoldOut && !isCancelled && !isPastEvent && event.status === 'published';
+  const canBook = !isSoldOut && !isCancelled && !isPastEvent && (event.status === 'published' || event.status === 'unlisted');
 
-  return (
+  // Booking card content - reused for mobile and desktop positions
-    <div className="section-padding">
+  const BookingCardContent = () => (
-      <div className="container-page">
+    <>
-        <Link 
+      <div className="text-center mb-4">
-          href="/events" 
-          className="inline-flex items-center gap-2 text-gray-600 hover:text-primary-dark mb-8"
-        >
-          <ArrowLeftIcon className="w-4 h-4" />
-          {t('common.back')}
-        </Link>
-
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          {/* Event Details */}
-          <div className="lg:col-span-2">
-            <Card className="overflow-hidden">
-              {/* Banner - LCP element, loaded with high priority */}
-              {/* Using unoptimized for backend-served images via /uploads/ rewrite */}
-              {event.bannerUrl ? (
-                <div className="relative h-64 w-full">
-                  <Image 
-                    src={event.bannerUrl} 
-                    alt={`${event.title} - Spanglish language exchange event in Asunción`}
-                    fill
-                    className="object-cover"
-                    sizes="(max-width: 1024px) 100vw, 66vw"
-                    priority
-                    unoptimized
-                  />
-                </div>
-              ) : (
-                <div className="h-64 bg-gradient-to-br from-primary-yellow/40 to-secondary-blue/30 flex items-center justify-center">
-                  <CalendarIcon className="w-24 h-24 text-primary-dark/30" />
-                </div>
-              )}
-              
-              <div className="p-8">
-                <div className="flex items-start justify-between gap-4">
-                  <h1 className="text-3xl font-bold text-primary-dark" suppressHydrationWarning>
-                    {locale === 'es' && event.titleEs ? event.titleEs : event.title}
-                  </h1>
-                  {isCancelled && (
-                    <span className="badge badge-danger text-sm">{t('events.details.cancelled')}</span>
-                  )}
-                  {isSoldOut && !isCancelled && (
-                    <span className="badge badge-warning text-sm">{t('events.details.soldOut')}</span>
-                  )}
-                </div>
-                
-                <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-6">
-                  <div className="flex items-start gap-3">
-                    <CalendarIcon className="w-6 h-6 text-primary-yellow flex-shrink-0" />
-                    <div>
-                      <p className="font-medium">{t('events.details.date')}</p>
-                      <p className="text-gray-600" suppressHydrationWarning>{formatDate(event.startDatetime)}</p>
-                    </div>
-                  </div>
-                  
-                  <div className="flex items-start gap-3">
-                    <span className="w-6 h-6 flex items-center justify-center text-primary-yellow text-xl">⏰</span>
-                    <div>
-                      <p className="font-medium">{t('events.details.time')}</p>
-                      <p className="text-gray-600" suppressHydrationWarning>
-                        {formatTime(event.startDatetime)}
-                        {event.endDatetime && ` - ${formatTime(event.endDatetime)}`}
-                      </p>
-                    </div>
-                  </div>
-                  
-                  <div className="flex items-start gap-3">
-                    <MapPinIcon className="w-6 h-6 text-primary-yellow flex-shrink-0" />
-                    <div>
-                      <p className="font-medium">{t('events.details.location')}</p>
-                      <p className="text-gray-600">{event.location}</p>
-                      {event.locationUrl && (
-                        <a 
-                          href={event.locationUrl} 
-                          target="_blank" 
-                          rel="noopener noreferrer"
-                          className="text-secondary-blue hover:underline text-sm"
-                        >
-                          View on map
-                        </a>
-                      )}
-                    </div>
-                  </div>
-                  
-                  {!event.externalBookingEnabled && (
-                    <div className="flex items-start gap-3">
-                      <UserGroupIcon className="w-6 h-6 text-primary-yellow flex-shrink-0" />
-                      <div>
-                        <p className="font-medium">{t('events.details.capacity')}</p>
-                        <p className="text-gray-600">
-                          {event.availableSeats} / {event.capacity} {t('events.details.spotsLeft')}
-                        </p>
-                      </div>
-                    </div>
-                  )}
-                </div>
-                
-                <div className="mt-8 pt-8 border-t border-secondary-light-gray">
-                  <h2 className="font-semibold text-lg mb-4">About this event</h2>
-                  <p className="text-gray-700 whitespace-pre-line" suppressHydrationWarning>
-                    {locale === 'es' && event.descriptionEs 
-                      ? event.descriptionEs 
-                      : event.description}
-                  </p>
-                </div>
-                
-                {/* Social Sharing */}
-                <div className="mt-8 pt-8 border-t border-secondary-light-gray" suppressHydrationWarning>
-                  <ShareButtons 
-                    title={locale === 'es' && event.titleEs ? event.titleEs : event.title}
-                    description={`${locale === 'es' ? 'Únete a' : 'Join'} ${locale === 'es' && event.titleEs ? event.titleEs : event.title} - ${formatDate(event.startDatetime)}`}
-                  />
-                </div>
-              </div>
-            </Card>
-          </div>
-
-          {/* Booking Card */}
-          <div className="lg:col-span-1">
-            <Card className="p-6 sticky top-24">
-              <div className="text-center mb-6">
         <p className="text-sm text-gray-500">{t('events.details.price')}</p>
         <p className="text-4xl font-bold text-primary-dark">
           {event.price === 0 
             ? t('events.details.free')
-                    : `${event.price.toLocaleString()} ${event.currency}`}
+            : formatPrice(event.price, event.currency)}
         </p>
+        {event.price > 0 && (
+          <p className="text-xs text-gray-400 mt-1">
+            {locale === 'es' ? 'por persona' : 'per person'}
+          </p>
+        )}
       </div>
       
+      {/* Ticket Quantity Selector */}
+      {canBook && !event.externalBookingEnabled && (
+        <div className="mb-6">
+          <label className="block text-sm font-medium text-gray-700 text-center mb-2">
+            {locale === 'es' ? 'Cantidad de tickets' : 'Number of tickets'}
+          </label>
+          <div className="flex items-center justify-center gap-4">
+            <button
+              type="button"
+              onClick={decreaseQuantity}
+              disabled={ticketQuantity <= 1}
+              className="w-10 h-10 rounded-full border-2 border-gray-300 flex items-center justify-center hover:border-primary-yellow hover:bg-primary-yellow/10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              <MinusIcon className="w-5 h-5" />
+            </button>
+            <span className="text-2xl font-bold w-12 text-center">{ticketQuantity}</span>
+            <button
+              type="button"
+              onClick={increaseQuantity}
+              disabled={ticketQuantity >= maxTickets}
+              className="w-10 h-10 rounded-full border-2 border-gray-300 flex items-center justify-center hover:border-primary-yellow hover:bg-primary-yellow/10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              <PlusIcon className="w-5 h-5" />
+            </button>
+          </div>
+          {ticketQuantity > 1 && event.price > 0 && (
+            <p className="text-center text-sm text-gray-600 mt-2">
+              {locale === 'es' ? 'Total' : 'Total'}: <span className="font-bold">{formatPrice(event.price * ticketQuantity, event.currency)}</span>
+            </p>
+          )}
+        </div>
+      )}
+      
       {canBook ? (
         event.externalBookingEnabled && event.externalBookingUrl ? (
           <a
@@ -202,7 +124,7 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail
             </Button>
           </a>
         ) : (
-                  <Link href={`/book/${event.id}`}>
+          <Link href={`/book/${event.id}?qty=${ticketQuantity}`}>
             <Button className="w-full" size="lg">
               {t('events.booking.join')}
             </Button>
@@ -220,9 +142,147 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail
       
       {!event.externalBookingEnabled && (
         <p className="mt-4 text-center text-sm text-gray-500">
-                  {event.availableSeats} {t('events.details.spotsLeft')}
+          {spotsLeft} / {event.capacity} {t('events.details.spotsLeft')}
         </p>
       )}
+    </>
+  );
+
+  return (
+    <div className="section-padding">
+      <div className="container-page">
+        <Link 
+          href="/events" 
+          className="inline-flex items-center gap-2 text-gray-600 hover:text-primary-dark mb-8"
+        >
+          <ArrowLeftIcon className="w-4 h-4" />
+          {t('common.back')}
+        </Link>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Event Details */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Top section: Image + Event Info side by side on desktop */}
+            <Card className="overflow-hidden">
+              <div className="flex flex-col md:flex-row">
+                {/* Image - smaller on desktop, side by side */}
+                {event.bannerUrl ? (
+                  <div className="relative md:w-2/5 flex-shrink-0 bg-gray-100">
+                    <Image 
+                      src={event.bannerUrl} 
+                      alt={`${event.title} - Spanglish language exchange event in Asunción`}
+                      width={400}
+                      height={400}
+                      className="w-full h-auto md:h-full object-cover"
+                      sizes="(max-width: 768px) 100vw, 300px"
+                      priority
+                      unoptimized
+                    />
+                  </div>
+                ) : (
+                  <div className="md:w-2/5 flex-shrink-0 h-48 md:h-auto bg-gradient-to-br from-primary-yellow/40 to-secondary-blue/30 flex items-center justify-center">
+                    <CalendarIcon className="w-16 h-16 text-primary-dark/30" />
+                  </div>
+                )}
+                
+                {/* Event title and key info */}
+                <div className="flex-1 p-6">
+                  <div className="flex items-start justify-between gap-4 mb-6">
+                    <h1 className="text-2xl md:text-3xl font-bold text-primary-dark" suppressHydrationWarning>
+                      {locale === 'es' && event.titleEs ? event.titleEs : event.title}
+                    </h1>
+                    <div className="flex-shrink-0">
+                      {isCancelled && (
+                        <span className="badge badge-danger text-sm">{t('events.details.cancelled')}</span>
+                      )}
+                      {isSoldOut && !isCancelled && (
+                        <span className="badge badge-warning text-sm">{t('events.details.soldOut')}</span>
+                      )}
+                    </div>
+                  </div>
+                  
+                  <div className="space-y-4">
+                    <div className="flex items-start gap-3">
+                      <CalendarIcon className="w-5 h-5 text-primary-yellow flex-shrink-0 mt-0.5" />
+                      <div>
+                        <p className="font-medium text-sm">{t('events.details.date')}</p>
+                        <p className="text-gray-600" suppressHydrationWarning>{formatDate(event.startDatetime)}</p>
+                      </div>
+                    </div>
+                    
+                    <div className="flex items-start gap-3">
+                      <span className="w-5 h-5 flex items-center justify-center text-primary-yellow text-lg">⏰</span>
+                      <div>
+                        <p className="font-medium text-sm">{t('events.details.time')}</p>
+                        <p className="text-gray-600" suppressHydrationWarning>
+                          {fmtTime(event.startDatetime)}
+                          {event.endDatetime && ` - ${fmtTime(event.endDatetime)}`}
+                        </p>
+                      </div>
+                    </div>
+                    
+                    <div className="flex items-start gap-3">
+                      <MapPinIcon className="w-5 h-5 text-primary-yellow flex-shrink-0 mt-0.5" />
+                      <div>
+                        <p className="font-medium text-sm">{t('events.details.location')}</p>
+                        <p className="text-gray-600">{event.location}</p>
+                        {event.locationUrl && (
+                          <a 
+                            href={event.locationUrl} 
+                            target="_blank" 
+                            rel="noopener noreferrer"
+                            className="text-secondary-blue hover:underline text-sm"
+                          >
+                            View on map
+                          </a>
+                        )}
+                      </div>
+                    </div>
+                    
+                    {!event.externalBookingEnabled && (
+                      <div className="flex items-start gap-3">
+                        <UserGroupIcon className="w-5 h-5 text-primary-yellow flex-shrink-0 mt-0.5" />
+                        <div>
+                          <p className="font-medium text-sm">{t('events.details.capacity')}</p>
+                          <p className="text-gray-600">
+                            {spotsLeft} / {event.capacity} {t('events.details.spotsLeft')}
+                          </p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </Card>
+
+            {/* Mobile Booking Card - shown between event details and description on mobile */}
+            <Card className="p-6 lg:hidden">
+              <BookingCardContent />
+            </Card>
+            
+            {/* Description section - separate card below */}
+            <Card className="p-6">
+              <h2 className="font-semibold text-lg mb-4">About this event</h2>
+              <p className="text-gray-700 whitespace-pre-line" suppressHydrationWarning>
+                {locale === 'es' && event.descriptionEs 
+                  ? event.descriptionEs 
+                  : event.description}
+              </p>
+              
+              {/* Social Sharing */}
+              <div className="mt-8 pt-6 border-t border-secondary-light-gray" suppressHydrationWarning>
+                <ShareButtons 
+                  title={locale === 'es' && event.titleEs ? event.titleEs : event.title}
+                  description={`${locale === 'es' ? 'Únete a' : 'Join'} ${locale === 'es' && event.titleEs ? event.titleEs : event.title} - ${formatDate(event.startDatetime)}`}
+                />
+              </div>
+            </Card>
+          </div>
+
+          {/* Desktop Booking Card - hidden on mobile, shown in sidebar on desktop */}
+          <div className="hidden lg:block lg:col-span-1">
+            <Card className="p-6 sticky top-24">
+              <BookingCardContent />
             </Card>
           </div>
         </div>

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

@@ -20,7 +20,7 @@ interface Event {
   price: number;
   currency: string;
   capacity: number;
-  status: 'draft' | 'published' | 'cancelled' | 'completed' | 'archived';
+  status: 'draft' | 'published' | 'unlisted' | 'cancelled' | 'completed' | 'archived';
   bannerUrl?: string;
   availableSeats?: number;
   bookedCount?: number;
@@ -97,8 +97,6 @@ function generateEventJsonLd(event: Event) {
     eventAttendanceMode: 'https://schema.org/OfflineEventAttendanceMode',
     eventStatus: isCancelled
       ? 'https://schema.org/EventCancelled'
-      : isPastEvent 
-        ? 'https://schema.org/EventPostponed'
       : 'https://schema.org/EventScheduled',
     location: {
       '@type': 'Place',
@@ -118,7 +116,7 @@ function generateEventJsonLd(event: Event) {
       '@type': 'Offer',
       price: event.price,
       priceCurrency: event.currency,
-      availability: event.availableSeats && event.availableSeats > 0
+      availability: Math.max(0, (event.capacity ?? 0) - (event.bookedCount ?? 0)) > 0
         ? 'https://schema.org/InStock'
         : 'https://schema.org/SoldOut',
       url: `${siteUrl}/events/${event.id}`,

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

@@ -4,6 +4,7 @@ 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';
@@ -32,20 +33,8 @@ export default function EventsPage() {
 
   const displayedEvents = filter === 'upcoming' ? upcomingEvents : pastEvents;
 
-  const formatDate = (dateStr: string) => {
+  const formatDate = (dateStr: string) => formatDateShort(dateStr, locale as 'en' | 'es');
-    return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
+  const fmtTime = (dateStr: string) => formatTime(dateStr, locale as 'en' | 'es');
-      weekday: 'short',
-      month: 'short',
-      day: 'numeric',
-    });
-  };
-
-  const formatTime = (dateStr: string) => {
-    return new Date(dateStr).toLocaleTimeString(locale === 'es' ? 'es-ES' : 'en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  };
 
   const getStatusBadge = (event: Event) => {
     if (event.status === 'cancelled') {
@@ -129,7 +118,7 @@ export default function EventsPage() {
                       <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)} - {formatTime(event.startDatetime)}</span>
+                          <span>{formatDate(event.startDatetime)} - {fmtTime(event.startDatetime)}</span>
                         </div>
                         <div className="flex items-center gap-2">
                           <MapPinIcon className="w-4 h-4" />
@@ -139,7 +128,7 @@ export default function EventsPage() {
                           <div className="flex items-center gap-2">
                             <UserGroupIcon className="w-4 h-4" />
                             <span>
-                              {event.availableSeats} / {event.capacity} {t('events.details.spotsLeft')}
+                              {Math.max(0, event.capacity - (event.bookedCount ?? 0))} / {event.capacity} {t('events.details.spotsLeft')}
                             </span>
                           </div>
                         )}
@@ -149,7 +138,7 @@ export default function EventsPage() {
                         <span className="font-bold text-xl text-primary-dark">
                           {event.price === 0 
                             ? t('events.details.free')
-                            : `${event.price.toLocaleString()} ${event.currency}`}
+                            : formatPrice(event.price, event.currency)}
                         </span>
                         <Button size="sm">
                           {t('common.moreInfo')}

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

@@ -1,44 +1,21 @@
 import type { Metadata } from 'next';
 
-// FAQ Page structured data
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
-const faqSchema = {
+
-  '@context': 'https://schema.org',
+async function getFaqForSchema(): Promise<{ question: string; answer: string }[]> {
-  '@type': 'FAQPage',
+  try {
-  mainEntity: [
+    const res = await fetch(`${apiUrl}/api/faq`, { next: { revalidate: 60 } });
-    {
+    if (!res.ok) return [];
-      '@type': 'Question',
+    const data = await res.json();
-      name: 'What is Spanglish?',
+    const faqs = data.faqs || [];
-      acceptedAnswer: {
+    return faqs.map((f: { question: string; questionEs?: string | null; answer: string; answerEs?: string | null }) => ({
-        '@type': 'Answer',
+      question: f.question,
-        text: 'Spanglish is a language exchange community in Asunción, Paraguay. We organize monthly events where Spanish and English speakers come together to practice languages, meet new people, and have fun in a relaxed social environment.',
+      answer: f.answer || '',
-      },
+    }));
-    },
+  } catch {
-    {
+    return [];
-      '@type': 'Question',
+  }
-      name: 'Who can attend Spanglish events?',
+}
-      acceptedAnswer: {
-        '@type': 'Answer',
-        text: 'Anyone interested in practicing English or Spanish is welcome! We accept all levels - from complete beginners to native speakers. Our events are designed to be inclusive and welcoming to everyone.',
-      },
-    },
-    {
-      '@type': 'Question',
-      name: 'How do language exchange events work?',
-      acceptedAnswer: {
-        '@type': 'Answer',
-        text: 'Our events typically last 2-3 hours. You will be paired with people who speak the language you want to practice. We rotate partners throughout the evening so you can meet multiple people. There are also group activities and free conversation time.',
-      },
-    },
-    {
-      '@type': 'Question',
-      name: 'Do I need to speak the language already?',
-      acceptedAnswer: {
-        '@type': 'Answer',
-        text: 'Not at all! We welcome complete beginners. Our events are structured to support all levels. Native speakers are patient and happy to help beginners practice.',
-      },
-    },
-  ],
-};
 
 export const metadata: Metadata = {
   title: 'Frequently Asked Questions',
@@ -49,11 +26,25 @@ export const metadata: Metadata = {
   },
 };
 
-export default function FAQLayout({
+export default async function FAQLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const faqList = await getFaqForSchema();
+  const faqSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faqList.map(({ question, answer }) => ({
+      '@type': 'Question',
+      name: question,
+      acceptedAnswer: {
+        '@type': 'Answer',
+        text: answer,
+      },
+    })),
+  };
+
   return (
     <>
       <script

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

@@ -1,89 +1,44 @@
 'use client';
 
-import { useState } from 'react';
+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';
 
-interface FAQItem {
-  question: string;
-  questionEs: string;
-  answer: string;
-  answerEs: string;
-}
-
-const faqs: FAQItem[] = [
-  {
-    question: "What is Spanglish?",
-    questionEs: "¿Qué es Spanglish?",
-    answer: "Spanglish is a language exchange community in Asunción, Paraguay. We organize monthly events where Spanish and English speakers come together to practice languages, meet new people, and have fun in a relaxed social environment.",
-    answerEs: "Spanglish es una comunidad de intercambio de idiomas en Asunción, Paraguay. Organizamos eventos mensuales donde hablantes de español e inglés se reúnen para practicar idiomas, conocer gente nueva y divertirse en un ambiente social relajado."
-  },
-  {
-    question: "Who can attend Spanglish events?",
-    questionEs: "¿Quién puede asistir a los eventos de Spanglish?",
-    answer: "Anyone interested in practicing English or Spanish is welcome! We accept all levels - from complete beginners to native speakers. Our events are designed to be inclusive and welcoming to everyone.",
-    answerEs: "¡Cualquier persona interesada en practicar inglés o español es bienvenida! Aceptamos todos los niveles - desde principiantes hasta hablantes nativos. Nuestros eventos están diseñados para ser inclusivos y acogedores para todos."
-  },
-  {
-    question: "How do events work?",
-    questionEs: "¿Cómo funcionan los eventos?",
-    answer: "Our events typically last 2-3 hours. You'll be paired with people who speak the language you want to practice. We rotate partners throughout the evening so you can meet multiple people. There are also group activities and free conversation time.",
-    answerEs: "Nuestros eventos suelen durar 2-3 horas. Serás emparejado con personas que hablan el idioma que quieres practicar. Rotamos parejas durante la noche para que puedas conocer a varias personas. También hay actividades grupales y tiempo de conversación libre."
-  },
-  {
-    question: "How much does it cost to attend?",
-    questionEs: "¿Cuánto cuesta asistir?",
-    answer: "Event prices vary but are always kept affordable. The price covers venue costs and event organization. Check each event page for specific pricing. Some special events may be free!",
-    answerEs: "Los precios de los eventos varían pero siempre se mantienen accesibles. El precio cubre los costos del local y la organización del evento. Consulta la página de cada evento para precios específicos. ¡Algunos eventos especiales pueden ser gratis!"
-  },
-  {
-    question: "What payment methods do you accept?",
-    questionEs: "¿Qué métodos de pago aceptan?",
-    answer: "We accept multiple payment methods: credit/debit cards through Bancard, Bitcoin Lightning for crypto enthusiasts, and cash payment at the event. You can choose your preferred method when booking.",
-    answerEs: "Aceptamos múltiples métodos de pago: tarjetas de crédito/débito a través de Bancard, Bitcoin Lightning para entusiastas de cripto, y pago en efectivo en el evento. Puedes elegir tu método preferido al reservar."
-  },
-  {
-    question: "Do I need to speak the language already?",
-    questionEs: "¿Necesito ya hablar el idioma?",
-    answer: "Not at all! We welcome complete beginners. Our events are structured to support all levels. Native speakers are patient and happy to help beginners practice. It's a judgment-free zone for learning.",
-    answerEs: "¡Para nada! Damos la bienvenida a principiantes absolutos. Nuestros eventos están estructurados para apoyar todos los niveles. Los hablantes nativos son pacientes y felices de ayudar a los principiantes a practicar. Es una zona libre de juicios para aprender."
-  },
-  {
-    question: "Can I come alone?",
-    questionEs: "¿Puedo ir solo/a?",
-    answer: "Absolutely! Most people come alone and that's totally fine. In fact, it's a great way to meet new people. Our events are designed to be social, so you'll quickly find conversation partners.",
-    answerEs: "¡Absolutamente! La mayoría de las personas vienen solas y eso está totalmente bien. De hecho, es una excelente manera de conocer gente nueva. Nuestros eventos están diseñados para ser sociales, así que encontrarás compañeros de conversación rápidamente."
-  },
-  {
-    question: "What if I can't make it after booking?",
-    questionEs: "¿Qué pasa si no puedo asistir después de reservar?",
-    answer: "If you can't attend, please let us know as soon as possible so we can offer your spot to someone on the waitlist. Contact us through the website or WhatsApp group to cancel your booking.",
-    answerEs: "Si no puedes asistir, por favor avísanos lo antes posible para poder ofrecer tu lugar a alguien en la lista de espera. Contáctanos a través del sitio web o el grupo de WhatsApp para cancelar tu reserva."
-  },
-  {
-    question: "How can I stay updated about events?",
-    questionEs: "¿Cómo puedo mantenerme actualizado sobre los eventos?",
-    answer: "Join our WhatsApp group for instant updates, follow us on Instagram for announcements and photos, or subscribe to our newsletter on the website. We typically announce events 2-3 weeks in advance.",
-    answerEs: "Únete a nuestro grupo de WhatsApp para actualizaciones instantáneas, síguenos en Instagram para anuncios y fotos, o suscríbete a nuestro boletín en el sitio web. Normalmente anunciamos eventos con 2-3 semanas de anticipación."
-  },
-  {
-    question: "Can I volunteer or help organize events?",
-    questionEs: "¿Puedo ser voluntario o ayudar a organizar eventos?",
-    answer: "Yes! We're always looking for enthusiastic volunteers. Volunteers help with setup, greeting newcomers, facilitating activities, and more. Contact us through the website if you're interested in getting involved.",
-    answerEs: "¡Sí! Siempre estamos buscando voluntarios entusiastas. Los voluntarios ayudan con la preparación, saludar a los recién llegados, facilitar actividades y más. Contáctanos a través del sitio web si estás interesado en participar."
-  }
-];
-
 export default function FAQPage() {
-  const { t, locale } = useLanguage();
+  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>
+    );
+  }
+
   return (
     <div className="section-padding">
       <div className="container-page max-w-3xl">
@@ -98,15 +53,24 @@ export default function FAQPage() {
           </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={index} className="overflow-hidden">
+              <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.question}
+                    {locale === 'es' && faq.questionEs ? faq.questionEs : faq.question}
                   </span>
                   <ChevronDownIcon
                     className={clsx(
@@ -122,12 +86,13 @@ export default function FAQPage() {
                   )}
                 >
                   <div className="px-6 pb-4 text-gray-600">
-                  {locale === 'es' ? faq.answerEs : faq.answer}
+                    {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">

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

@@ -20,7 +20,7 @@ export const metadata: Metadata = {
 const organizationSchema = {
   '@context': 'https://schema.org',
   '@type': 'Organization',
-  name: 'Spanglish',
+  name: 'Spanglish Community',
   url: siteUrl,
   logo: `${siteUrl}/images/logo.png`,
   description: 'Language exchange community organizing English and Spanish meetups in Asunción, Paraguay.',
@@ -30,7 +30,7 @@ const organizationSchema = {
     addressCountry: 'PY',
   },
   sameAs: [
-    process.env.NEXT_PUBLIC_INSTAGRAM_URL,
+    'https://instagram.com/spanglishsocialpy',
     process.env.NEXT_PUBLIC_WHATSAPP_URL,
     process.env.NEXT_PUBLIC_TELEGRAM_URL,
   ].filter(Boolean),

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

@@ -1,10 +1,11 @@
 import { notFound } from 'next/navigation';
 import { Metadata } from 'next';
-import { getLegalPage, getAllLegalSlugs } from '@/lib/legal';
+import { getLegalPageAsync, getAllLegalSlugs } from '@/lib/legal';
 import LegalPageLayout from '@/components/layout/LegalPageLayout';
 
 interface PageProps {
-  params: { slug: string };
+  params: Promise<{ slug: string }>;
+  searchParams: Promise<{ locale?: string }>;
 }
 
 // Generate static params for all legal pages
@@ -13,11 +14,24 @@ export async function generateStaticParams() {
   return slugs.map((slug) => ({ slug }));
 }
 
+// Enable dynamic rendering to always fetch fresh content from DB
+export const dynamic = 'force-dynamic';
+export const revalidate = 60; // Revalidate every 60 seconds
+
 const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://spanglish.com.py';
 
+// Validate and normalize locale
+function getValidLocale(locale?: string): 'en' | 'es' {
+  if (locale === 'es') return 'es';
+  return 'en'; // Default to English
+}
+
 // Generate metadata for SEO
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+export async function generateMetadata({ params, searchParams }: PageProps): Promise<Metadata> {
-  const legalPage = getLegalPage(params.slug);
+  const resolvedParams = await params;
+  const resolvedSearchParams = await searchParams;
+  const locale = getValidLocale(resolvedSearchParams.locale);
+  const legalPage = await getLegalPageAsync(resolvedParams.slug, locale);
   
   if (!legalPage) {
     return {
@@ -33,13 +47,20 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
       follow: true,
     },
     alternates: {
-      canonical: `${siteUrl}/legal/${params.slug}`,
+      canonical: `${siteUrl}/legal/${resolvedParams.slug}`,
+      languages: {
+        'en': `${siteUrl}/legal/${resolvedParams.slug}`,
+        'es': `${siteUrl}/legal/${resolvedParams.slug}?locale=es`,
+      },
     },
   };
 }
 
-export default function LegalPage({ params }: PageProps) {
+export default async function LegalPage({ params, searchParams }: PageProps) {
-  const legalPage = getLegalPage(params.slug);
+  const resolvedParams = await params;
+  const resolvedSearchParams = await searchParams;
+  const locale = getValidLocale(resolvedSearchParams.locale);
+  const legalPage = await getLegalPageAsync(resolvedParams.slug, locale);
   
   if (!legalPage) {
     notFound();

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

@@ -1,20 +1,170 @@
+import type { Metadata } from 'next';
 import HeroSection from './components/HeroSection';
 import NextEventSectionWrapper from './components/NextEventSectionWrapper';
 import AboutSection from './components/AboutSection';
 import MediaCarouselSection from './components/MediaCarouselSection';
 import NewsletterSection from './components/NewsletterSection';
+import HomepageFaqSection from './components/HomepageFaqSection';
 import { getCarouselImages } from '@/lib/carouselImages';
 
-export default function HomePage() {
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://spanglish.com.py';
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+
+interface NextEvent {
+  id: string;
+  title: string;
+  titleEs?: string;
+  description: string;
+  descriptionEs?: string;
+  shortDescription?: string;
+  shortDescriptionEs?: string;
+  startDatetime: string;
+  endDatetime?: string;
+  location: string;
+  locationUrl?: string;
+  price: number;
+  currency: string;
+  capacity: number;
+  status: 'draft' | 'published' | 'cancelled' | 'completed' | 'archived';
+  bannerUrl?: string;
+  externalBookingEnabled?: boolean;
+  externalBookingUrl?: string;
+  availableSeats?: number;
+  bookedCount?: number;
+  isFeatured?: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+async function getNextUpcomingEvent(): Promise<NextEvent | 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 || null;
+  } catch {
+    return null;
+  }
+}
+
+// Dynamic metadata with next event date for AI crawlers and SEO
+export async function generateMetadata(): Promise<Metadata> {
+  const event = await getNextUpcomingEvent();
+
+  if (!event) {
+    return {
+      title: '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.',
+    };
+  }
+
+  const eventDate = new Date(event.startDatetime).toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    timeZone: 'America/Asuncion',
+  });
+
+  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',
+    description,
+    openGraph: {
+      title: 'Spanglish – Language Exchange Events in Asunción',
+      description,
+      url: siteUrl,
+      siteName: 'Spanglish',
+      type: 'website',
+      images: [
+        {
+          url: event.bannerUrl
+            ? event.bannerUrl.startsWith('http')
+              ? event.bannerUrl
+              : `${siteUrl}${event.bannerUrl}`
+            : `${siteUrl}/images/og-image.jpg`,
+          width: 1200,
+          height: 630,
+          alt: `Spanglish – ${event.title}`,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: 'Spanglish – Language Exchange Events in Asunción',
+      description,
+    },
+  };
+}
+
+function generateNextEventJsonLd(event: NextEvent) {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Event',
+    name: event.title,
+    description: event.shortDescription || event.description,
+    startDate: event.startDatetime,
+    endDate: event.endDatetime || event.startDatetime,
+    eventAttendanceMode: 'https://schema.org/OfflineEventAttendanceMode',
+    eventStatus:
+      event.status === 'cancelled'
+        ? 'https://schema.org/EventCancelled'
+        : 'https://schema.org/EventScheduled',
+    location: {
+      '@type': 'Place',
+      name: event.location,
+      address: {
+        '@type': 'PostalAddress',
+        addressLocality: 'Asunción',
+        addressCountry: 'PY',
+      },
+    },
+    organizer: {
+      '@type': 'Organization',
+      name: 'Spanglish',
+      url: siteUrl,
+    },
+    offers: {
+      '@type': 'Offer',
+      price: event.price,
+      priceCurrency: event.currency,
+      availability:
+        (event.availableSeats ?? 0) > 0
+          ? 'https://schema.org/InStock'
+          : 'https://schema.org/SoldOut',
+      url: `${siteUrl}/events/${event.id}`,
+    },
+    image: event.bannerUrl || `${siteUrl}/images/og-image.jpg`,
+    url: `${siteUrl}/events/${event.id}`,
+  };
+}
+
+export default async function HomePage() {
   const carouselImages = getCarouselImages();
+  const nextEvent = await getNextUpcomingEvent();
 
   return (
     <>
+      {nextEvent && (
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(generateNextEventJsonLd(nextEvent)),
+          }}
+        />
+      )}
       <HeroSection />
-      <NextEventSectionWrapper />
+      <NextEventSectionWrapper initialEvent={nextEvent} />
       <AboutSection />
       <MediaCarouselSection images={carouselImages} />
       <NewsletterSection />
+      <HomepageFaqSection />
     </>
   );
 }

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

@@ -5,6 +5,7 @@ import { useLanguage } from '@/context/LanguageContext';
 import { ticketsApi, eventsApi, Ticket, Event } from '@/lib/api';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
+import { BottomSheet, MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
 import { 
   TicketIcon, 
   CheckCircleIcon, 
@@ -14,10 +15,13 @@ import {
   EnvelopeIcon,
   PhoneIcon,
   FunnelIcon,
+  MagnifyingGlassIcon,
 } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
+import clsx from 'clsx';
 
 interface TicketWithDetails extends Omit<Ticket, 'payment'> {
+  bookingId?: string;
   event?: Event;
   payment?: {
     id: string;
@@ -39,10 +43,11 @@ export default function AdminBookingsPage() {
   const [loading, setLoading] = useState(true);
   const [processing, setProcessing] = useState<string | null>(null);
   
-  // Filters
   const [selectedEvent, setSelectedEvent] = useState<string>('');
   const [selectedStatus, setSelectedStatus] = useState<string>('');
   const [selectedPaymentStatus, setSelectedPaymentStatus] = useState<string>('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [mobileFilterOpen, setMobileFilterOpen] = useState(false);
 
   useEffect(() => {
     loadData();
@@ -55,7 +60,6 @@ export default function AdminBookingsPage() {
         eventsApi.getAll(),
       ]);
       
-      // Fetch full ticket details with payment info
       const ticketsWithDetails = await Promise.all(
         ticketsRes.tickets.map(async (ticket) => {
           try {
@@ -124,67 +128,67 @@ export default function AdminBookingsPage() {
       year: 'numeric',
       hour: '2-digit',
       minute: '2-digit',
+      timeZone: 'America/Asuncion',
     });
   };
 
   const getStatusColor = (status: string) => {
     switch (status) {
-      case 'confirmed':
+      case 'confirmed': return 'bg-green-100 text-green-800';
-        return 'bg-green-100 text-green-800';
+      case 'pending': return 'bg-yellow-100 text-yellow-800';
-      case 'pending':
+      case 'cancelled': return 'bg-red-100 text-red-800';
-        return 'bg-yellow-100 text-yellow-800';
+      case 'checked_in': return 'bg-blue-100 text-blue-800';
-      case 'cancelled':
+      default: return 'bg-gray-100 text-gray-800';
-        return 'bg-red-100 text-red-800';
-      case 'checked_in':
-        return 'bg-blue-100 text-blue-800';
-      default:
-        return 'bg-gray-100 text-gray-800';
     }
   };
 
   const getPaymentStatusColor = (status: string) => {
     switch (status) {
-      case 'paid':
+      case 'paid': return 'bg-green-100 text-green-800';
-        return 'bg-green-100 text-green-800';
+      case 'pending': return 'bg-yellow-100 text-yellow-800';
-      case 'pending':
-        return 'bg-yellow-100 text-yellow-800';
       case 'failed':
-      case 'cancelled':
+      case 'cancelled': return 'bg-red-100 text-red-800';
-        return 'bg-red-100 text-red-800';
+      case 'refunded': return 'bg-purple-100 text-purple-800';
-      case 'refunded':
+      default: return 'bg-gray-100 text-gray-800';
-        return 'bg-purple-100 text-purple-800';
-      default:
-        return 'bg-gray-100 text-gray-800';
     }
   };
 
   const getPaymentMethodLabel = (provider: string) => {
-    switch (provider) {
+    const labels: Record<string, string> = {
-      case 'bancard':
+      cash: locale === 'es' ? 'Efectivo en el Evento' : 'Cash at Event',
-        return 'TPago / Card';
+      bank_transfer: locale === 'es' ? 'Transferencia Bancaria' : 'Bank Transfer',
-      case 'lightning':
+      lightning: 'Lightning',
-        return 'Bitcoin Lightning';
+      tpago: 'TPago',
-      case 'cash':
+      bancard: 'Bancard',
-        return 'Cash at Event';
+    };
-      default:
+    return labels[provider] || provider;
-        return provider;
+  };
-    }
+
+  const getDisplayProvider = (ticket: TicketWithDetails) => {
+    if (ticket.payment?.provider) return ticket.payment.provider;
+    if (ticket.bookingId) {
+      const sibling = tickets.find(t => t.bookingId === ticket.bookingId && t.payment?.provider);
+      return sibling?.payment?.provider ?? 'cash';
+    }
+    return 'cash';
   };
 
-  // Filter tickets
   const filteredTickets = tickets.filter((ticket) => {
     if (selectedEvent && ticket.eventId !== selectedEvent) return false;
     if (selectedStatus && ticket.status !== selectedStatus) return false;
     if (selectedPaymentStatus && ticket.payment?.status !== selectedPaymentStatus) return false;
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase();
+      const name = `${ticket.attendeeFirstName} ${ticket.attendeeLastName || ''}`.toLowerCase();
+      return name.includes(q) || (ticket.attendeeEmail?.toLowerCase().includes(q) || false);
+    }
     return true;
   });
 
-  // Sort by created date (newest first)
   const sortedTickets = [...filteredTickets].sort(
     (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
   );
 
-  // Stats
   const stats = {
     total: tickets.length,
     pending: tickets.filter(t => t.status === 'pending').length,
@@ -194,6 +198,36 @@ export default function AdminBookingsPage() {
     pendingPayment: tickets.filter(t => t.payment?.status === 'pending').length,
   };
 
+  const getBookingInfo = (ticket: TicketWithDetails) => {
+    if (!ticket.bookingId) {
+      return { ticketCount: 1, bookingTotal: Number(ticket.payment?.amount || 0) };
+    }
+    const bookingTickets = tickets.filter(t => t.bookingId === ticket.bookingId);
+    return {
+      ticketCount: bookingTickets.length,
+      bookingTotal: bookingTickets.reduce((sum, t) => sum + Number(t.payment?.amount || 0), 0),
+    };
+  };
+
+  const hasActiveFilters = selectedEvent || selectedStatus || selectedPaymentStatus || searchQuery;
+
+  const clearFilters = () => {
+    setSelectedEvent('');
+    setSelectedStatus('');
+    setSelectedPaymentStatus('');
+    setSearchQuery('');
+  };
+
+  const getPrimaryAction = (ticket: TicketWithDetails) => {
+    if (ticket.status === 'pending' && ticket.payment?.status === 'pending') {
+      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' };
+    }
+    return null;
+  };
+
   if (loading) {
     return (
       <div className="flex items-center justify-center py-12">
@@ -205,51 +239,61 @@ export default function AdminBookingsPage() {
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <h1 className="text-2xl font-bold text-primary-dark">Manage Bookings</h1>
+        <h1 className="text-xl md:text-2xl font-bold text-primary-dark">Manage Bookings</h1>
       </div>
 
       {/* Stats Cards */}
-      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
+      <div className="grid grid-cols-3 md:grid-cols-3 lg:grid-cols-6 gap-2 md:gap-4 mb-6">
-        <Card className="p-4 text-center">
+        <Card className="p-3 md:p-4 text-center">
-          <p className="text-2xl font-bold text-primary-dark">{stats.total}</p>
+          <p className="text-xl md:text-2xl font-bold text-primary-dark">{stats.total}</p>
-          <p className="text-sm text-gray-500">Total</p>
+          <p className="text-xs md:text-sm text-gray-500">Total</p>
         </Card>
-        <Card className="p-4 text-center border-l-4 border-yellow-400">
+        <Card className="p-3 md:p-4 text-center border-l-4 border-yellow-400">
-          <p className="text-2xl font-bold text-yellow-600">{stats.pending}</p>
+          <p className="text-xl md:text-2xl font-bold text-yellow-600">{stats.pending}</p>
-          <p className="text-sm text-gray-500">Pending</p>
+          <p className="text-xs md:text-sm text-gray-500">Pending</p>
         </Card>
-        <Card className="p-4 text-center border-l-4 border-green-400">
+        <Card className="p-3 md:p-4 text-center border-l-4 border-green-400">
-          <p className="text-2xl font-bold text-green-600">{stats.confirmed}</p>
+          <p className="text-xl md:text-2xl font-bold text-green-600">{stats.confirmed}</p>
-          <p className="text-sm text-gray-500">Confirmed</p>
+          <p className="text-xs md:text-sm text-gray-500">Confirmed</p>
         </Card>
-        <Card className="p-4 text-center border-l-4 border-blue-400">
+        <Card className="p-3 md:p-4 text-center border-l-4 border-blue-400">
-          <p className="text-2xl font-bold text-blue-600">{stats.checkedIn}</p>
+          <p className="text-xl md:text-2xl font-bold text-blue-600">{stats.checkedIn}</p>
-          <p className="text-sm text-gray-500">Checked In</p>
+          <p className="text-xs md:text-sm text-gray-500">Checked In</p>
         </Card>
-        <Card className="p-4 text-center border-l-4 border-red-400">
+        <Card className="p-3 md:p-4 text-center border-l-4 border-red-400">
-          <p className="text-2xl font-bold text-red-600">{stats.cancelled}</p>
+          <p className="text-xl md:text-2xl font-bold text-red-600">{stats.cancelled}</p>
-          <p className="text-sm text-gray-500">Cancelled</p>
+          <p className="text-xs md:text-sm text-gray-500">Cancelled</p>
         </Card>
-        <Card className="p-4 text-center border-l-4 border-orange-400">
+        <Card className="p-3 md:p-4 text-center border-l-4 border-orange-400">
-          <p className="text-2xl font-bold text-orange-600">{stats.pendingPayment}</p>
+          <p className="text-xl md:text-2xl font-bold text-orange-600">{stats.pendingPayment}</p>
-          <p className="text-sm text-gray-500">Pending Payment</p>
+          <p className="text-xs md:text-sm text-gray-500">Pending Pay</p>
         </Card>
       </div>
 
-      {/* Filters */}
+      {/* Desktop Filters */}
-      <Card className="p-4 mb-6">
+      <Card className="p-4 mb-6 hidden md:block">
         <div className="flex items-center gap-2 mb-4">
           <FunnelIcon className="w-5 h-5 text-gray-500" />
           <span className="font-medium">Filters</span>
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Search</label>
+            <div className="relative">
+              <MagnifyingGlassIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+              <input
+                type="text"
+                placeholder="Name or email..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-9 pr-3 py-2 rounded-btn border border-secondary-light-gray text-sm focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+              />
+            </div>
+          </div>
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">Event</label>
-            <select
+            <select value={selectedEvent} onChange={(e) => setSelectedEvent(e.target.value)}
-              value={selectedEvent}
+              className="w-full px-3 py-2 rounded-btn border border-secondary-light-gray text-sm">
-              onChange={(e) => setSelectedEvent(e.target.value)}
-              className="w-full px-3 py-2 rounded-btn border border-secondary-light-gray"
-            >
               <option value="">All Events</option>
               {events.map((event) => (
                 <option key={event.id} value={event.id}>{event.title}</option>
@@ -258,11 +302,8 @@ export default function AdminBookingsPage() {
           </div>
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">Booking Status</label>
-            <select
+            <select value={selectedStatus} onChange={(e) => setSelectedStatus(e.target.value)}
-              value={selectedStatus}
+              className="w-full px-3 py-2 rounded-btn border border-secondary-light-gray text-sm">
-              onChange={(e) => setSelectedStatus(e.target.value)}
-              className="w-full px-3 py-2 rounded-btn border border-secondary-light-gray"
-            >
               <option value="">All Statuses</option>
               <option value="pending">Pending</option>
               <option value="confirmed">Confirmed</option>
@@ -272,12 +313,9 @@ export default function AdminBookingsPage() {
           </div>
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">Payment Status</label>
-            <select
+            <select value={selectedPaymentStatus} onChange={(e) => setSelectedPaymentStatus(e.target.value)}
-              value={selectedPaymentStatus}
+              className="w-full px-3 py-2 rounded-btn border border-secondary-light-gray text-sm">
-              onChange={(e) => setSelectedPaymentStatus(e.target.value)}
+              <option value="">All Payments</option>
-              className="w-full px-3 py-2 rounded-btn border border-secondary-light-gray"
-            >
-              <option value="">All Payment Statuses</option>
               <option value="pending">Pending</option>
               <option value="paid">Paid</option>
               <option value="refunded">Refunded</option>
@@ -285,142 +323,295 @@ export default function AdminBookingsPage() {
             </select>
           </div>
         </div>
+        {hasActiveFilters && (
+          <div className="mt-3 text-xs text-gray-500 flex items-center gap-2">
+            <span>Showing {sortedTickets.length} of {tickets.length}</span>
+            <button onClick={clearFilters} className="text-primary-yellow hover:underline">Clear</button>
+          </div>
+        )}
       </Card>
 
-      {/* Bookings List */}
+      {/* Mobile Toolbar */}
-      <Card className="overflow-hidden">
+      <div className="md:hidden space-y-2 mb-4">
+        <div className="relative">
+          <MagnifyingGlassIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+          <input
+            type="text"
+            placeholder="Search name or email..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-9 pr-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setMobileFilterOpen(true)}
+            className={clsx(
+              'flex items-center gap-1.5 px-3 py-2 rounded-btn border text-sm min-h-[44px]',
+              hasActiveFilters
+                ? 'border-primary-yellow bg-yellow-50 text-primary-dark'
+                : 'border-secondary-light-gray text-gray-600'
+            )}
+          >
+            <FunnelIcon className="w-4 h-4" />
+            Filters
+            {hasActiveFilters && <span className="text-xs">({sortedTickets.length})</span>}
+          </button>
+          {hasActiveFilters && (
+            <button onClick={clearFilters} className="text-xs text-primary-yellow ml-auto min-h-[44px] flex items-center">
+              Clear
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Desktop: Table */}
+      <Card className="overflow-hidden hidden md:block">
         <div className="overflow-x-auto">
           <table className="w-full">
             <thead className="bg-secondary-gray">
               <tr>
-                <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">Attendee</th>
+                <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-6 py-3 text-sm font-medium text-gray-600">Event</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-6 py-3 text-sm font-medium text-gray-600">Payment</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-6 py-3 text-sm font-medium text-gray-600">Status</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">Booked</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Booked</th>
-                <th className="text-right px-6 py-3 text-sm font-medium text-gray-600">Actions</th>
+                <th className="text-right px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-secondary-light-gray">
               {sortedTickets.length === 0 ? (
                 <tr>
-                  <td colSpan={6} className="px-6 py-12 text-center text-gray-500">
+                  <td colSpan={6} className="px-4 py-12 text-center text-gray-500 text-sm">
                     No bookings found.
                   </td>
                 </tr>
               ) : (
-                sortedTickets.map((ticket) => (
+                sortedTickets.map((ticket) => {
+                  const bookingInfo = getBookingInfo(ticket);
+                  return (
                     <tr key={ticket.id} className="hover:bg-gray-50">
-                    <td className="px-6 py-4">
+                      <td className="px-4 py-3">
-                      <div className="space-y-1">
+                        <p className="font-medium text-sm">{ticket.attendeeFirstName} {ticket.attendeeLastName || ''}</p>
-                        <div className="flex items-center gap-2">
+                        <p className="text-xs text-gray-500 truncate max-w-[200px]">{ticket.attendeeEmail || 'N/A'}</p>
-                          <UserIcon className="w-4 h-4 text-gray-400" />
+                        {ticket.attendeePhone && <p className="text-xs text-gray-400">{ticket.attendeePhone}</p>}
-                          <span className="font-medium">{ticket.attendeeFirstName} {ticket.attendeeLastName || ''}</span>
-                        </div>
-                        <div className="flex items-center gap-2 text-sm text-gray-500">
-                          <EnvelopeIcon className="w-4 h-4" />
-                          <span>{ticket.attendeeEmail || 'N/A'}</span>
-                        </div>
-                        <div className="flex items-center gap-2 text-sm text-gray-500">
-                          <PhoneIcon className="w-4 h-4" />
-                          <span>{ticket.attendeePhone || 'N/A'}</span>
-                        </div>
-                      </div>
                       </td>
-                    <td className="px-6 py-4">
+                      <td className="px-4 py-3">
-                      <span className="text-sm">
+                        <span className="text-sm truncate max-w-[150px] block">
                           {ticket.event?.title || events.find(e => e.id === ticket.eventId)?.title || 'Unknown'}
                         </span>
                       </td>
-                    <td className="px-6 py-4">
+                      <td className="px-4 py-3">
-                      <div className="space-y-1">
+                        <span className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${getPaymentStatusColor(ticket.payment?.status || 'pending')}`}>
-                        <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${getPaymentStatusColor(ticket.payment?.status || 'pending')}`}>
                           {ticket.payment?.status || 'pending'}
                         </span>
-                        <p className="text-sm text-gray-500">
+                        <p className="text-xs text-gray-500 mt-0.5">{getPaymentMethodLabel(getDisplayProvider(ticket))}</p>
-                          {getPaymentMethodLabel(ticket.payment?.provider || 'cash')}
-                        </p>
                         {ticket.payment && (
-                          <p className="text-sm font-medium">
+                          <p className="text-xs font-medium mt-0.5">{bookingInfo.bookingTotal.toLocaleString()} {ticket.payment.currency}</p>
-                            {ticket.payment.amount?.toLocaleString()} {ticket.payment.currency}
-                          </p>
                         )}
-                      </div>
                       </td>
-                    <td className="px-6 py-4">
+                      <td className="px-4 py-3">
-                      <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(ticket.status)}`}>
+                        <span className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${getStatusColor(ticket.status)}`}>
-                        {ticket.status}
+                          {ticket.status.replace('_', ' ')}
                         </span>
-                      {ticket.qrCode && (
+                        {ticket.bookingId && (
-                        <p className="text-xs text-gray-400 mt-1 font-mono">{ticket.qrCode}</p>
+                          <p className="text-[10px] text-purple-600 mt-0.5">Group Booking</p>
                         )}
                       </td>
-                    <td className="px-6 py-4 text-sm text-gray-600">
+                      <td className="px-4 py-3 text-xs text-gray-500">
                         {formatDate(ticket.createdAt)}
                       </td>
-                    <td className="px-6 py-4">
+                      <td className="px-4 py-3">
-                      <div className="flex items-center justify-end gap-2">
+                        <div className="flex items-center justify-end gap-1">
-                        {/* Mark as Paid (for pending payments) */}
                           {ticket.status === 'pending' && ticket.payment?.status === 'pending' && (
-                          <Button
+                            <Button size="sm" variant="outline" onClick={() => handleMarkPaid(ticket.id)}
-                            size="sm"
+                              isLoading={processing === ticket.id} className="text-xs px-2 py-1">
-                            variant="ghost"
-                            onClick={() => handleMarkPaid(ticket.id)}
-                            isLoading={processing === ticket.id}
-                            className="text-green-600 hover:bg-green-50"
-                          >
-                            <CurrencyDollarIcon className="w-4 h-4 mr-1" />
                               Mark Paid
                             </Button>
                           )}
-                        
-                        {/* Check-in (for confirmed tickets) */}
                           {ticket.status === 'confirmed' && (
-                          <Button
+                            <Button size="sm" onClick={() => handleCheckin(ticket.id)}
-                            size="sm"
+                              isLoading={processing === ticket.id} className="text-xs px-2 py-1">
-                            variant="ghost"
-                            onClick={() => handleCheckin(ticket.id)}
-                            isLoading={processing === ticket.id}
-                            className="text-blue-600 hover:bg-blue-50"
-                          >
-                            <CheckCircleIcon className="w-4 h-4 mr-1" />
                               Check In
                             </Button>
                           )}
-                        
-                        {/* Cancel (for pending/confirmed) */}
                           {(ticket.status === 'pending' || ticket.status === 'confirmed') && (
-                          <Button
+                            <MoreMenu>
-                            size="sm"
+                              <DropdownItem onClick={() => handleCancel(ticket.id)} className="text-red-600">
-                            variant="ghost"
+                                <XCircleIcon className="w-4 h-4 mr-2" /> Cancel
-                            onClick={() => handleCancel(ticket.id)}
+                              </DropdownItem>
-                            isLoading={processing === ticket.id}
+                            </MoreMenu>
-                            className="text-red-600 hover:bg-red-50"
-                          >
-                            <XCircleIcon className="w-4 h-4 mr-1" />
-                            Cancel
-                          </Button>
                           )}
-                        
                           {ticket.status === 'checked_in' && (
-                          <span className="text-sm text-green-600 flex items-center gap-1">
+                            <span className="text-xs text-green-600 flex items-center gap-1">
-                            <CheckCircleIcon className="w-4 h-4" />
+                              <CheckCircleIcon className="w-4 h-4" /> Attended
-                            Attended
                             </span>
                           )}
-                        
                           {ticket.status === 'cancelled' && (
-                          <span className="text-sm text-gray-400">Cancelled</span>
+                            <span className="text-xs text-gray-400">Cancelled</span>
                           )}
                         </div>
                       </td>
                     </tr>
-                ))
+                  );
+                })
               )}
             </tbody>
           </table>
         </div>
       </Card>
+
+      {/* Mobile: Card List */}
+      <div className="md:hidden space-y-2">
+        {sortedTickets.length === 0 ? (
+          <div className="text-center py-10 text-gray-500 text-sm">
+            No bookings found.
+          </div>
+        ) : (
+          sortedTickets.map((ticket) => {
+            const bookingInfo = getBookingInfo(ticket);
+            const primary = getPrimaryAction(ticket);
+            const eventTitle = ticket.event?.title || events.find(e => e.id === ticket.eventId)?.title || 'Unknown';
+            return (
+              <Card key={ticket.id} className="p-3">
+                <div className="flex items-start justify-between gap-2">
+                  <div className="min-w-0 flex-1">
+                    <p className="font-medium text-sm truncate">{ticket.attendeeFirstName} {ticket.attendeeLastName || ''}</p>
+                    <p className="text-xs text-gray-500 truncate">{ticket.attendeeEmail || 'N/A'}</p>
+                  </div>
+                  <div className="flex items-center gap-1.5 flex-shrink-0">
+                    <span className={clsx('inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium', getStatusColor(ticket.status))}>
+                      {ticket.status.replace('_', ' ')}
+                    </span>
+                  </div>
+                </div>
+                <div className="mt-2 flex items-center gap-2 text-xs text-gray-500">
+                  <span className="truncate">{eventTitle}</span>
+                  <span className="text-gray-300">|</span>
+                  <span className={clsx('inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium', getPaymentStatusColor(ticket.payment?.status || 'pending'))}>
+                    {ticket.payment?.status || 'pending'}
+                  </span>
+                  {ticket.payment && (
+                    <>
+                      <span className="text-gray-300">|</span>
+                      <span className="font-medium text-gray-700">{bookingInfo.bookingTotal.toLocaleString()} {ticket.payment.currency}</span>
+                    </>
+                  )}
+                </div>
+                {ticket.bookingId && (
+                  <p className="text-[10px] text-purple-600 mt-1">{bookingInfo.ticketCount} tickets - Group Booking</p>
+                )}
+                <div className="flex items-center justify-between mt-2 pt-2 border-t border-gray-100">
+                  <p className="text-[10px] text-gray-400">{formatDate(ticket.createdAt)}</p>
+                  <div className="flex items-center gap-1">
+                    {primary && (
+                      <Button size="sm" variant={ticket.status === 'confirmed' ? 'primary' : 'outline'}
+                        onClick={primary.onClick} isLoading={processing === ticket.id}
+                        className="text-xs px-2.5 py-1.5 min-h-[36px]">
+                        {primary.label}
+                      </Button>
+                    )}
+                    {(ticket.status === 'pending' || ticket.status === 'confirmed') && (
+                      <MoreMenu>
+                        {ticket.status === 'pending' && ticket.payment?.status === 'pending' && !primary && (
+                          <DropdownItem onClick={() => handleMarkPaid(ticket.id)}>
+                            <CurrencyDollarIcon className="w-4 h-4 mr-2" /> Mark Paid
+                          </DropdownItem>
+                        )}
+                        <DropdownItem onClick={() => handleCancel(ticket.id)} className="text-red-600">
+                          <XCircleIcon className="w-4 h-4 mr-2" /> Cancel Booking
+                        </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
+                      </span>
+                    )}
+                    {ticket.status === 'cancelled' && (
+                      <span className="text-[10px] text-gray-400">Cancelled</span>
+                    )}
+                  </div>
+                </div>
+              </Card>
+            );
+          })
+        )}
+      </div>
+
+      {/* Mobile Filter BottomSheet */}
+      <BottomSheet open={mobileFilterOpen} onClose={() => setMobileFilterOpen(false)} title="Filters">
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Event</label>
+            <select value={selectedEvent} onChange={(e) => setSelectedEvent(e.target.value)}
+              className="w-full px-3 py-2.5 rounded-btn border border-secondary-light-gray text-sm min-h-[44px]">
+              <option value="">All Events</option>
+              {events.map((event) => (
+                <option key={event.id} value={event.id}>{event.title}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Booking Status</label>
+            <div className="space-y-1">
+              {[
+                { value: '', label: 'All Statuses' },
+                { value: 'pending', label: `Pending (${stats.pending})` },
+                { value: 'confirmed', label: `Confirmed (${stats.confirmed})` },
+                { value: 'checked_in', label: `Checked In (${stats.checkedIn})` },
+                { value: 'cancelled', label: `Cancelled (${stats.cancelled})` },
+              ].map((opt) => (
+                <button
+                  key={opt.value}
+                  onClick={() => setSelectedStatus(opt.value)}
+                  className={clsx(
+                    'w-full text-left px-3 py-2.5 rounded-btn text-sm min-h-[44px] flex items-center justify-between',
+                    selectedStatus === opt.value ? 'bg-yellow-50 text-primary-dark font-medium' : 'hover:bg-gray-50'
+                  )}
+                >
+                  {opt.label}
+                  {selectedStatus === opt.value && <CheckCircleIcon className="w-4 h-4 text-primary-yellow" />}
+                </button>
+              ))}
+            </div>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Payment Status</label>
+            <div className="space-y-1">
+              {[
+                { value: '', label: 'All Payments' },
+                { value: 'pending', label: 'Pending' },
+                { value: 'paid', label: 'Paid' },
+                { value: 'refunded', label: 'Refunded' },
+                { value: 'failed', label: 'Failed' },
+              ].map((opt) => (
+                <button
+                  key={opt.value}
+                  onClick={() => setSelectedPaymentStatus(opt.value)}
+                  className={clsx(
+                    'w-full text-left px-3 py-2.5 rounded-btn text-sm min-h-[44px] flex items-center justify-between',
+                    selectedPaymentStatus === opt.value ? 'bg-yellow-50 text-primary-dark font-medium' : 'hover:bg-gray-50'
+                  )}
+                >
+                  {opt.label}
+                  {selectedPaymentStatus === opt.value && <CheckCircleIcon className="w-4 h-4 text-primary-yellow" />}
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="flex gap-3 pt-2">
+            <Button variant="outline" onClick={() => { clearFilters(); setMobileFilterOpen(false); }} className="flex-1 min-h-[44px]">
+              Clear All
+            </Button>
+            <Button onClick={() => setMobileFilterOpen(false)} className="flex-1 min-h-[44px]">
+              Apply
+            </Button>
+          </div>
+        </div>
+      </BottomSheet>
+
+      <AdminMobileStyles />
     </div>
   );
 }

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

@@ -49,6 +49,7 @@ export default function AdminContactsPage() {
       day: 'numeric',
       hour: '2-digit',
       minute: '2-digit',
+      timeZone: 'America/Asuncion',
     });
   };
 

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

@@ -6,6 +6,7 @@ import { emailsApi, EmailTemplate, EmailLog, EmailStats } from '@/lib/api';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
+import { MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
 import {
   EnvelopeIcon,
   PencilIcon,
@@ -18,6 +19,7 @@ import {
   ExclamationTriangleIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  XMarkIcon,
 } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
 import clsx from 'clsx';
@@ -189,7 +191,6 @@ export default function AdminEmailsPage() {
       return;
     }
     
-    setSending(true);
     try {
       const res = await emailsApi.sendToEvent(composeForm.eventId, {
         templateSlug: composeForm.templateSlug,
@@ -197,20 +198,15 @@ export default function AdminEmailsPage() {
         customVariables: composeForm.customBody ? { customMessage: composeForm.customBody } : undefined,
       });
       
-      if (res.success || res.sentCount > 0) {
+      if (res.success) {
-        toast.success(`Sent ${res.sentCount} emails successfully`);
+        toast.success(`${res.queuedCount} email(s) are being sent in the background.`);
-        if (res.failedCount > 0) {
-          toast.error(`${res.failedCount} emails failed`);
-        }
         clearDraft();
         setShowRecipientPreview(false);
       } else {
-        toast.error('Failed to send emails');
+        toast.error(res.error || 'Failed to queue emails');
       }
     } catch (error: any) {
       toast.error(error.message || 'Failed to send emails');
-    } finally {
-      setSending(false);
     }
   };
 
@@ -373,6 +369,7 @@ export default function AdminEmailsPage() {
       year: 'numeric',
       hour: '2-digit',
       minute: '2-digit',
+      timeZone: 'America/Asuncion',
     });
   };
 
@@ -387,7 +384,7 @@ export default function AdminEmailsPage() {
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <h1 className="text-2xl font-bold text-primary-dark">Email Center</h1>
+        <h1 className="text-xl md:text-2xl font-bold text-primary-dark">Email Center</h1>
       </div>
 
       {/* Stats Cards */}
@@ -441,18 +438,15 @@ export default function AdminEmailsPage() {
       )}
 
       {/* Tabs */}
-      <div className="border-b border-secondary-light-gray mb-6">
+      <div className="border-b border-secondary-light-gray mb-6 overflow-x-auto scrollbar-hide">
-        <nav className="flex gap-6">
+        <nav className="flex gap-4 md:gap-6 min-w-max">
           {(['templates', 'compose', 'logs'] as TabType[]).map((tab) => (
             <button
               key={tab}
               onClick={() => setActiveTab(tab)}
               className={clsx(
-                'py-3 px-1 border-b-2 font-medium text-sm transition-colors relative',
+                'py-3 px-1 border-b-2 font-medium text-sm transition-colors relative whitespace-nowrap min-h-[44px]',
-                {
+                activeTab === tab ? 'border-primary-yellow text-primary-dark' : 'border-transparent text-gray-500 hover:text-gray-700'
-                  'border-primary-yellow text-primary-dark': activeTab === tab,
-                  'border-transparent text-gray-500 hover:text-gray-700': activeTab !== tab,
-                }
               )}
             >
               {tab === 'templates' ? 'Templates' : tab === 'compose' ? 'Compose' : 'Email Logs'}
@@ -504,31 +498,36 @@ export default function AdminEmailsPage() {
                       </div>
                     )}
                   </div>
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-1">
-                    <button
+                    <button onClick={() => handlePreviewTemplate(template)}
-                      onClick={() => handlePreviewTemplate(template)}
+                      className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center" title="Preview">
-                      className="p-2 hover:bg-gray-100 rounded-btn"
-                      title="Preview"
-                    >
                       <EyeIcon className="w-5 h-5" />
                     </button>
-                    <button
+                    <button onClick={() => handleEditTemplate(template)}
-                      onClick={() => handleEditTemplate(template)}
+                      className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center hidden md:flex" title="Edit">
-                      className="p-2 hover:bg-gray-100 rounded-btn"
-                      title="Edit"
-                    >
                       <PencilIcon className="w-5 h-5" />
                     </button>
+                    <div className="hidden md:block">
                       {!template.isSystem && (
-                      <button
+                        <button onClick={() => handleDeleteTemplate(template.id)}
-                        onClick={() => handleDeleteTemplate(template.id)}
+                          className="p-2 hover:bg-red-100 text-red-600 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center" title="Delete">
-                        className="p-2 hover:bg-red-100 text-red-600 rounded-btn"
-                        title="Delete"
-                      >
                           <XCircleIcon className="w-5 h-5" />
                         </button>
                       )}
                     </div>
+                    <div className="md:hidden">
+                      <MoreMenu>
+                        <DropdownItem onClick={() => handleEditTemplate(template)}>
+                          <PencilIcon className="w-4 h-4 mr-2" /> Edit
+                        </DropdownItem>
+                        {!template.isSystem && (
+                          <DropdownItem onClick={() => handleDeleteTemplate(template.id)} className="text-red-600">
+                            <XCircleIcon className="w-4 h-4 mr-2" /> Delete
+                          </DropdownItem>
+                        )}
+                      </MoreMenu>
+                    </div>
+                  </div>
                 </div>
               </Card>
             ))}
@@ -545,7 +544,7 @@ export default function AdminEmailsPage() {
               <div className="flex items-center gap-2">
                 {hasDraft && (
                   <span className="text-xs text-gray-500">
-                    Draft saved {composeForm.savedAt ? new Date(composeForm.savedAt).toLocaleString() : ''}
+                    Draft saved {composeForm.savedAt ? new Date(composeForm.savedAt).toLocaleString(locale === 'es' ? 'es-ES' : 'en-US', { timeZone: 'America/Asuncion' }) : ''}
                   </span>
                 )}
                 <Button variant="outline" size="sm" onClick={saveDraft}>
@@ -569,9 +568,9 @@ export default function AdminEmailsPage() {
                   className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray"
                 >
                   <option value="">Choose an event</option>
-                  {events.filter(e => e.status === 'published').map((event) => (
+                  {events.filter(e => e.status === 'published' || e.status === 'unlisted').map((event) => (
                     <option key={event.id} value={event.id}>
-                      {event.title} - {new Date(event.startDatetime).toLocaleDateString()}
+                      {event.title} - {new Date(event.startDatetime).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', { timeZone: 'America/Asuncion' })}
                     </option>
                   ))}
                 </select>
@@ -640,13 +639,17 @@ export default function AdminEmailsPage() {
           
           {/* Recipient Preview Modal */}
           {showRecipientPreview && (
-            <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+            <div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
-              <Card className="w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
+              <Card className="w-full md:max-w-2xl max-h-[80vh] overflow-hidden flex flex-col rounded-t-2xl md:rounded-card">
-                <div className="p-4 border-b border-secondary-light-gray">
+                <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray">
-                  <h2 className="text-lg font-bold">Recipient Preview</h2>
+                  <div>
-                  <p className="text-sm text-gray-500">
+                    <h2 className="text-base font-bold">Recipient Preview</h2>
-                    {previewRecipients.length} recipient(s) will receive this email
+                    <p className="text-xs text-gray-500">{previewRecipients.length} recipient(s)</p>
-                  </p>
+                  </div>
+                  <button onClick={() => setShowRecipientPreview(false)}
+                    className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
+                    <XMarkIcon className="w-5 h-5" />
+                  </button>
                 </div>
                 
                 <div className="flex-1 overflow-y-auto p-4">
@@ -680,14 +683,10 @@ export default function AdminEmailsPage() {
                 </div>
                 
                 <div className="p-4 border-t border-secondary-light-gray flex gap-3">
-                  <Button
+                  <Button onClick={handleSendEmail} isLoading={sending} disabled={previewRecipients.length === 0} className="flex-1 min-h-[44px]">
-                    onClick={handleSendEmail}
+                    Send to {previewRecipients.length}
-                    isLoading={sending}
-                    disabled={previewRecipients.length === 0}
-                  >
-                    Send to {previewRecipients.length} Recipients
                   </Button>
-                  <Button variant="outline" onClick={() => setShowRecipientPreview(false)}>
+                  <Button variant="outline" onClick={() => setShowRecipientPreview(false)} className="flex-1 min-h-[44px]">
                     Cancel
                   </Button>
                 </div>
@@ -700,51 +699,37 @@ export default function AdminEmailsPage() {
       {/* Logs Tab */}
       {activeTab === 'logs' && (
         <div>
-          <Card className="overflow-hidden">
+          {/* Desktop: Table */}
+          <Card className="overflow-hidden hidden md:block">
             <div className="overflow-x-auto">
               <table className="w-full">
                 <thead className="bg-secondary-gray">
                   <tr>
-                    <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">Status</th>
+                    <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                    <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">Recipient</th>
+                    <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Recipient</th>
-                    <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">Subject</th>
+                    <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>
-                    <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">Sent</th>
+                    <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Sent</th>
-                    <th className="text-right px-6 py-3 text-sm font-medium text-gray-600">Actions</th>
+                    <th className="text-right px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-secondary-light-gray">
                   {logs.length === 0 ? (
-                    <tr>
+                    <tr><td colSpan={5} className="px-4 py-12 text-center text-gray-500 text-sm">No emails sent yet</td></tr>
-                      <td colSpan={5} className="px-6 py-12 text-center text-gray-500">
-                        No emails sent yet
-                      </td>
-                    </tr>
                   ) : (
                     logs.map((log) => (
                       <tr key={log.id} className="hover:bg-gray-50">
-                        <td className="px-6 py-4">
+                        <td className="px-4 py-3">
-                          <div className="flex items-center gap-2">
+                          <div className="flex items-center gap-2">{getStatusIcon(log.status)}<span className="capitalize text-sm">{log.status}</span></div>
-                            {getStatusIcon(log.status)}
-                            <span className="capitalize text-sm">{log.status}</span>
-                          </div>
                         </td>
-                        <td className="px-6 py-4">
+                        <td className="px-4 py-3">
                           <p className="font-medium text-sm">{log.recipientName || 'Unknown'}</p>
-                          <p className="text-sm text-gray-500">{log.recipientEmail}</p>
+                          <p className="text-xs text-gray-500">{log.recipientEmail}</p>
                         </td>
-                        <td className="px-6 py-4 max-w-xs">
+                        <td className="px-4 py-3 max-w-xs"><p className="text-sm truncate">{log.subject}</p></td>
-                          <p className="text-sm truncate">{log.subject}</p>
+                        <td className="px-4 py-3 text-xs text-gray-500">{formatDate(log.sentAt || log.createdAt)}</td>
-                        </td>
+                        <td className="px-4 py-3">
-                        <td className="px-6 py-4 text-sm text-gray-600">
+                          <div className="flex items-center justify-end">
-                          {formatDate(log.sentAt || log.createdAt)}
+                            <button onClick={() => setSelectedLog(log)} className="p-2 hover:bg-gray-100 rounded-btn" title="View">
-                        </td>
-                        <td className="px-6 py-4">
-                          <div className="flex items-center justify-end gap-2">
-                            <button
-                              onClick={() => setSelectedLog(log)}
-                              className="p-2 hover:bg-gray-100 rounded-btn"
-                              title="View Email"
-                            >
                               <EyeIcon className="w-4 h-4" />
                             </button>
                           </div>
@@ -755,46 +740,69 @@ export default function AdminEmailsPage() {
                 </tbody>
               </table>
             </div>
-            
-            {/* Pagination */}
             {logsTotal > 20 && (
-              <div className="flex items-center justify-between px-6 py-4 border-t border-secondary-light-gray">
+              <div className="flex items-center justify-between px-4 py-3 border-t border-secondary-light-gray">
-                <p className="text-sm text-gray-600">
+                <p className="text-sm text-gray-600">Showing {logsOffset + 1}-{Math.min(logsOffset + 20, logsTotal)} of {logsTotal}</p>
-                  Showing {logsOffset + 1}-{Math.min(logsOffset + 20, logsTotal)} of {logsTotal}
-                </p>
                 <div className="flex gap-2">
-                  <Button
+                  <Button variant="outline" size="sm" disabled={logsOffset === 0} onClick={() => setLogsOffset(Math.max(0, logsOffset - 20))}>
-                    variant="outline"
-                    size="sm"
-                    disabled={logsOffset === 0}
-                    onClick={() => setLogsOffset(Math.max(0, logsOffset - 20))}
-                  >
                     <ChevronLeftIcon className="w-4 h-4" />
                   </Button>
-                  <Button
+                  <Button variant="outline" size="sm" disabled={logsOffset + 20 >= logsTotal} onClick={() => setLogsOffset(logsOffset + 20)}>
-                    variant="outline"
-                    size="sm"
-                    disabled={logsOffset + 20 >= logsTotal}
-                    onClick={() => setLogsOffset(logsOffset + 20)}
-                  >
                     <ChevronRightIcon className="w-4 h-4" />
                   </Button>
                 </div>
               </div>
             )}
           </Card>
+
+          {/* Mobile: Card List */}
+          <div className="md:hidden space-y-2">
+            {logs.length === 0 ? (
+              <div className="text-center py-10 text-gray-500 text-sm">No emails sent yet</div>
+            ) : (
+              logs.map((log) => (
+                <Card key={log.id} className="p-3" onClick={() => setSelectedLog(log)}>
+                  <div className="flex items-start gap-2.5">
+                    <div className="mt-0.5 flex-shrink-0">{getStatusIcon(log.status)}</div>
+                    <div className="min-w-0 flex-1">
+                      <p className="font-medium text-sm truncate">{log.subject}</p>
+                      <p className="text-xs text-gray-500 truncate">{log.recipientName || 'Unknown'} &lt;{log.recipientEmail}&gt;</p>
+                      <p className="text-[10px] text-gray-400 mt-1">{formatDate(log.sentAt || log.createdAt)}</p>
+                    </div>
+                  </div>
+                </Card>
+              ))
+            )}
+            {logsTotal > 20 && (
+              <div className="flex items-center justify-between py-3">
+                <p className="text-xs text-gray-500">{logsOffset + 1}-{Math.min(logsOffset + 20, logsTotal)} of {logsTotal}</p>
+                <div className="flex gap-2">
+                  <Button variant="outline" size="sm" disabled={logsOffset === 0} onClick={() => setLogsOffset(Math.max(0, logsOffset - 20))} className="min-h-[44px]">
+                    <ChevronLeftIcon className="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={logsOffset + 20 >= logsTotal} onClick={() => setLogsOffset(logsOffset + 20)} className="min-h-[44px]">
+                    <ChevronRightIcon className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
         </div>
       )}
 
       {/* Template Form Modal */}
       {showTemplateForm && (
-        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
-          <Card className="w-full max-w-4xl max-h-[90vh] overflow-y-auto p-6">
+          <Card className="w-full md:max-w-4xl max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card">
-            <h2 className="text-xl font-bold mb-6">
+            <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray flex-shrink-0">
-              {editingTemplate ? 'Edit Template' : 'Create Template'}
+              <h2 className="text-base font-bold">{editingTemplate ? 'Edit Template' : 'Create Template'}</h2>
-            </h2>
+              <button onClick={() => { setShowTemplateForm(false); resetTemplateForm(); }}
+                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
+                <XMarkIcon className="w-5 h-5" />
+              </button>
+            </div>
             
-            <form onSubmit={handleSaveTemplate} className="space-y-4">
+            <form onSubmit={handleSaveTemplate} className="p-4 space-y-4 overflow-y-auto flex-1 min-h-0">
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <Input
                   label="Template Name"
@@ -878,14 +886,10 @@ export default function AdminEmailsPage() {
               </div>
 
               <div className="flex gap-3 pt-4">
-                <Button type="submit" isLoading={saving}>
+                <Button type="submit" isLoading={saving} className="flex-1 min-h-[44px]">
-                  {editingTemplate ? 'Update Template' : 'Create Template'}
+                  {editingTemplate ? 'Update' : 'Create'}
                 </Button>
-                <Button
+                <Button type="button" variant="outline" onClick={() => { setShowTemplateForm(false); resetTemplateForm(); }} className="flex-1 min-h-[44px]">
-                  type="button"
-                  variant="outline"
-                  onClick={() => { setShowTemplateForm(false); resetTemplateForm(); }}
-                >
                   Cancel
                 </Button>
               </div>
@@ -896,16 +900,17 @@ export default function AdminEmailsPage() {
 
       {/* Preview Modal */}
       {previewHtml && (
-        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
-          <Card className="w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
+          <Card className="w-full md:max-w-3xl max-h-[90vh] overflow-hidden flex flex-col rounded-t-2xl md:rounded-card">
             <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray">
-              <div>
+              <div className="min-w-0">
-                <h2 className="text-lg font-bold">Email Preview</h2>
+                <h2 className="text-base font-bold">Email Preview</h2>
-                <p className="text-sm text-gray-500">Subject: {previewSubject}</p>
+                <p className="text-xs text-gray-500 truncate">Subject: {previewSubject}</p>
               </div>
-              <Button variant="outline" size="sm" onClick={() => setPreviewHtml(null)}>
+              <button onClick={() => setPreviewHtml(null)}
-                Close
+                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center flex-shrink-0">
-              </Button>
+                <XMarkIcon className="w-5 h-5" />
+              </button>
             </div>
             <div className="flex-1 overflow-auto">
               <iframe
@@ -919,23 +924,26 @@ export default function AdminEmailsPage() {
       )}
 
       {/* Log Detail Modal */}
+      <AdminMobileStyles />
+
       {selectedLog && (
-        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
-          <Card className="w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
+          <Card className="w-full md:max-w-3xl max-h-[90vh] overflow-hidden flex flex-col rounded-t-2xl md:rounded-card">
             <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray">
-              <div>
+              <div className="min-w-0">
-                <h2 className="text-lg font-bold">Email Details</h2>
+                <h2 className="text-base font-bold">Email Details</h2>
-                <div className="flex items-center gap-2 mt-1">
+                <div className="flex items-center gap-2 mt-1 flex-wrap">
                   {getStatusIcon(selectedLog.status)}
                   <span className="capitalize text-sm">{selectedLog.status}</span>
                   {selectedLog.errorMessage && (
-                    <span className="text-sm text-red-500">- {selectedLog.errorMessage}</span>
+                    <span className="text-xs text-red-500">- {selectedLog.errorMessage}</span>
                   )}
                 </div>
               </div>
-              <Button variant="outline" size="sm" onClick={() => setSelectedLog(null)}>
+              <button onClick={() => setSelectedLog(null)}
-                Close
+                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center flex-shrink-0">
-              </Button>
+                <XMarkIcon className="w-5 h-5" />
+              </button>
             </div>
             <div className="p-4 space-y-2 border-b border-secondary-light-gray bg-gray-50">
               <p><strong>To:</strong> {selectedLog.recipientName} &lt;{selectedLog.recipientEmail}&gt;</p>

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

@@ -2,23 +2,29 @@
 
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
 import { useLanguage } from '@/context/LanguageContext';
-import { eventsApi, Event } from '@/lib/api';
+import { eventsApi, siteSettingsApi, Event } from '@/lib/api';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
 import MediaPicker from '@/components/MediaPicker';
-import { PlusIcon, PencilIcon, TrashIcon, EyeIcon, PhotoIcon, DocumentDuplicateIcon, ArchiveBoxIcon } from '@heroicons/react/24/outline';
+import { MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
+import { PlusIcon, PencilIcon, TrashIcon, EyeIcon, PhotoIcon, DocumentDuplicateIcon, ArchiveBoxIcon, StarIcon, XMarkIcon, LinkIcon } from '@heroicons/react/24/outline';
+import { StarIcon as StarIconSolid } from '@heroicons/react/24/solid';
 import toast from 'react-hot-toast';
 import clsx from 'clsx';
 
 export default function AdminEventsPage() {
   const { t, locale } = useLanguage();
+  const searchParams = useSearchParams();
   const [events, setEvents] = useState<Event[]>([]);
   const [loading, setLoading] = useState(true);
   const [showForm, setShowForm] = useState(false);
   const [editingEvent, setEditingEvent] = useState<Event | null>(null);
   const [saving, setSaving] = useState(false);
+  const [featuredEventId, setFeaturedEventId] = useState<string | null>(null);
+  const [settingFeatured, setSettingFeatured] = useState<string | null>(null);
   
   const [formData, setFormData] = useState<{
     title: string;
@@ -34,7 +40,7 @@ export default function AdminEventsPage() {
     price: number;
     currency: string;
     capacity: number;
-    status: 'draft' | 'published' | 'cancelled' | 'completed' | 'archived';
+    status: 'draft' | 'published' | 'unlisted' | 'cancelled' | 'completed' | 'archived';
     bannerUrl: string;
     externalBookingEnabled: boolean;
     externalBookingUrl: string;
@@ -60,8 +66,17 @@ export default function AdminEventsPage() {
 
   useEffect(() => {
     loadEvents();
+    loadFeaturedEvent();
   }, []);
 
+  useEffect(() => {
+    const editId = searchParams.get('edit');
+    if (editId && events.length > 0) {
+      const event = events.find(e => e.id === editId);
+      if (event) handleEdit(event);
+    }
+  }, [searchParams, events]);
+
   const loadEvents = async () => {
     try {
       const { events } = await eventsApi.getAll();
@@ -73,30 +88,39 @@ export default function AdminEventsPage() {
     }
   };
 
+  const loadFeaturedEvent = async () => {
+    try {
+      const { settings } = await siteSettingsApi.get();
+      setFeaturedEventId(settings.featuredEventId || null);
+    } catch (error) {
+      // Ignore - settings may not exist yet
+    }
+  };
+
+  const handleSetFeatured = async (eventId: string | null) => {
+    setSettingFeatured(eventId || 'clearing');
+    try {
+      await siteSettingsApi.setFeaturedEvent(eventId);
+      setFeaturedEventId(eventId);
+      toast.success(eventId ? 'Event set as featured' : 'Featured event removed');
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to update featured event');
+    } finally {
+      setSettingFeatured(null);
+    }
+  };
+
   const resetForm = () => {
     setFormData({
-      title: '',
+      title: '', titleEs: '', description: '', descriptionEs: '',
-      titleEs: '',
+      shortDescription: '', shortDescriptionEs: '',
-      description: '',
+      startDatetime: '', endDatetime: '', location: '', locationUrl: '',
-      descriptionEs: '',
+      price: 0, currency: 'PYG', capacity: 50, status: 'draft' as const,
-      shortDescription: '',
+      bannerUrl: '', externalBookingEnabled: false, externalBookingUrl: '',
-      shortDescriptionEs: '',
-      startDatetime: '',
-      endDatetime: '',
-      location: '',
-      locationUrl: '',
-      price: 0,
-      currency: 'PYG',
-      capacity: 50,
-      status: 'draft' as const,
-      bannerUrl: '',
-      externalBookingEnabled: false,
-      externalBookingUrl: '',
     });
     setEditingEvent(null);
   };
 
-  // Convert ISO UTC string to local datetime-local format (YYYY-MM-DDTHH:MM)
   const isoToLocalDatetime = (isoString: string): string => {
     const date = new Date(isoString);
     const year = date.getFullYear();
@@ -109,21 +133,14 @@ export default function AdminEventsPage() {
 
   const handleEdit = (event: Event) => {
     setFormData({
-      title: event.title,
+      title: event.title, titleEs: event.titleEs || '',
-      titleEs: event.titleEs || '',
+      description: event.description, descriptionEs: event.descriptionEs || '',
-      description: event.description,
+      shortDescription: event.shortDescription || '', shortDescriptionEs: event.shortDescriptionEs || '',
-      descriptionEs: event.descriptionEs || '',
-      shortDescription: event.shortDescription || '',
-      shortDescriptionEs: event.shortDescriptionEs || '',
       startDatetime: isoToLocalDatetime(event.startDatetime),
       endDatetime: event.endDatetime ? isoToLocalDatetime(event.endDatetime) : '',
-      location: event.location,
+      location: event.location, locationUrl: event.locationUrl || '',
-      locationUrl: event.locationUrl || '',
+      price: event.price, currency: event.currency, capacity: event.capacity,
-      price: event.price,
+      status: event.status, bannerUrl: event.bannerUrl || '',
-      currency: event.currency,
-      capacity: event.capacity,
-      status: event.status,
-      bannerUrl: event.bannerUrl || '',
       externalBookingEnabled: event.externalBookingEnabled || false,
       externalBookingUrl: event.externalBookingUrl || '',
     });
@@ -134,9 +151,7 @@ export default function AdminEventsPage() {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setSaving(true);
-
     try {
-      // Validate external booking URL if enabled
       if (formData.externalBookingEnabled && !formData.externalBookingUrl) {
         toast.error('External booking URL is required when external booking is enabled');
         setSaving(false);
@@ -147,27 +162,18 @@ export default function AdminEventsPage() {
         setSaving(false);
         return;
       }
-
       const eventData = {
-        title: formData.title,
+        title: formData.title, titleEs: formData.titleEs || undefined,
-        titleEs: formData.titleEs || undefined,
+        description: formData.description, descriptionEs: formData.descriptionEs || undefined,
-        description: formData.description,
+        shortDescription: formData.shortDescription || undefined, shortDescriptionEs: formData.shortDescriptionEs || undefined,
-        descriptionEs: formData.descriptionEs || undefined,
-        shortDescription: formData.shortDescription || undefined,
-        shortDescriptionEs: formData.shortDescriptionEs || undefined,
         startDatetime: new Date(formData.startDatetime).toISOString(),
         endDatetime: formData.endDatetime ? new Date(formData.endDatetime).toISOString() : undefined,
-        location: formData.location,
+        location: formData.location, locationUrl: formData.locationUrl || undefined,
-        locationUrl: formData.locationUrl || undefined,
+        price: formData.price, currency: formData.currency, capacity: formData.capacity,
-        price: formData.price,
+        status: formData.status, bannerUrl: formData.bannerUrl || undefined,
-        currency: formData.currency,
-        capacity: formData.capacity,
-        status: formData.status,
-        bannerUrl: formData.bannerUrl || undefined,
         externalBookingEnabled: formData.externalBookingEnabled,
         externalBookingUrl: formData.externalBookingEnabled ? formData.externalBookingUrl : undefined,
       };
-
       if (editingEvent) {
         await eventsApi.update(editingEvent.id, eventData);
         toast.success('Event updated');
@@ -175,7 +181,6 @@ export default function AdminEventsPage() {
         await eventsApi.create(eventData);
         toast.success('Event created');
       }
-
       setShowForm(false);
       resetForm();
       loadEvents();
@@ -188,7 +193,6 @@ export default function AdminEventsPage() {
 
   const handleDelete = async (id: string) => {
     if (!confirm('Are you sure you want to delete this event?')) return;
-
     try {
       await eventsApi.delete(id);
       toast.success('Event deleted');
@@ -208,22 +212,21 @@ export default function AdminEventsPage() {
     }
   };
 
-
   const formatDate = (dateStr: string) => {
     return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
-      month: 'short',
+      month: 'short', day: 'numeric', year: 'numeric', timeZone: 'America/Asuncion',
-      day: 'numeric',
-      year: 'numeric',
     });
   };
 
+  const isEventOver = (event: Event) => {
+    const refDate = event.endDatetime || event.startDatetime;
+    return new Date(refDate) < new Date();
+  };
+
   const getStatusBadge = (status: string) => {
     const styles: Record<string, string> = {
-      draft: 'badge-gray',
+      draft: 'badge-gray', published: 'badge-success', unlisted: 'badge-warning',
-      published: 'badge-success',
+      cancelled: 'badge-danger', completed: 'badge-info', archived: 'badge-gray',
-      cancelled: 'badge-danger',
-      completed: 'badge-info',
-      archived: 'badge-gray',
     };
     return <span className={`badge ${styles[status] || 'badge-gray'}`}>{status}</span>;
   };
@@ -259,8 +262,8 @@ export default function AdminEventsPage() {
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <h1 className="text-2xl font-bold text-primary-dark">{t('admin.events.title')}</h1>
+        <h1 className="text-xl md:text-2xl font-bold text-primary-dark">{t('admin.events.title')}</h1>
-        <Button onClick={() => { resetForm(); setShowForm(true); }}>
+        <Button onClick={() => { resetForm(); setShowForm(true); }} className="hidden md:flex">
           <PlusIcon className="w-5 h-5 mr-2" />
           {t('admin.events.create')}
         </Button>
@@ -268,202 +271,163 @@ export default function AdminEventsPage() {
 
       {/* Event Form Modal */}
       {showForm && (
-        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
-          <Card className="w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6">
+          <Card className="w-full md:max-w-2xl max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card">
-            <h2 className="text-xl font-bold mb-6">
+            <div className="flex items-center justify-between p-4 md:p-6 border-b border-secondary-light-gray flex-shrink-0">
+              <h2 className="text-lg md:text-xl font-bold">
                 {editingEvent ? t('admin.events.edit') : t('admin.events.create')}
               </h2>
+              <button onClick={() => { setShowForm(false); resetForm(); }}
+                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
+                <XMarkIcon className="w-5 h-5" />
+              </button>
+            </div>
             
-            <form onSubmit={handleSubmit} className="space-y-4">
+            <form onSubmit={handleSubmit} className="p-4 md:p-6 space-y-4 overflow-y-auto flex-1 min-h-0">
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <Input
+                <Input label="Title (English)" value={formData.title}
-                  label="Title (English)"
+                  onChange={(e) => setFormData({ ...formData, title: e.target.value })} required />
-                  value={formData.title}
+                <Input label="Title (Spanish)" value={formData.titleEs}
-                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+                  onChange={(e) => setFormData({ ...formData, titleEs: e.target.value })} />
-                  required
-                />
-                <Input
-                  label="Title (Spanish)"
-                  value={formData.titleEs}
-                  onChange={(e) => setFormData({ ...formData, titleEs: e.target.value })}
-                />
               </div>
               
               <div>
                 <label className="block text-sm font-medium mb-1">Description (English)</label>
-                <textarea
+                <textarea value={formData.description}
-                  value={formData.description}
                   onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                   className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                  rows={3}
+                  rows={3} required />
-                  required
-                />
               </div>
               
               <div>
                 <label className="block text-sm font-medium mb-1">Description (Spanish)</label>
-                <textarea
+                <textarea value={formData.descriptionEs}
-                  value={formData.descriptionEs}
                   onChange={(e) => setFormData({ ...formData, descriptionEs: e.target.value })}
                   className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                  rows={3}
+                  rows={3} />
-                />
               </div>
 
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
                   <label className="block text-sm font-medium mb-1">Short Description (English)</label>
-                  <textarea
+                  <textarea value={formData.shortDescription}
-                    value={formData.shortDescription}
                     onChange={(e) => setFormData({ ...formData, shortDescription: e.target.value.slice(0, 300) })}
                     className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                    rows={2}
+                    rows={2} maxLength={300} placeholder="Brief summary for SEO and cards (max 300 chars)" />
-                    maxLength={300}
+                  <p className="text-xs text-gray-500 mt-1">{formData.shortDescription.length}/300</p>
-                    placeholder="Brief summary for SEO and cards (max 300 chars)"
-                  />
-                  <p className="text-xs text-gray-500 mt-1">{formData.shortDescription.length}/300 characters</p>
                 </div>
                 <div>
                   <label className="block text-sm font-medium mb-1">Short Description (Spanish)</label>
-                  <textarea
+                  <textarea value={formData.shortDescriptionEs}
-                    value={formData.shortDescriptionEs}
                     onChange={(e) => setFormData({ ...formData, shortDescriptionEs: e.target.value.slice(0, 300) })}
                     className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                    rows={2}
+                    rows={2} maxLength={300} placeholder="Resumen breve (máx 300 caracteres)" />
-                    maxLength={300}
+                  <p className="text-xs text-gray-500 mt-1">{formData.shortDescriptionEs.length}/300</p>
-                    placeholder="Resumen breve para SEO y tarjetas (máx 300 caracteres)"
-                  />
-                  <p className="text-xs text-gray-500 mt-1">{formData.shortDescriptionEs.length}/300 characters</p>
                 </div>
               </div>
               
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <Input
+                <Input label="Start Date & Time" type="datetime-local" value={formData.startDatetime}
-                  label="Start Date & Time"
+                  onChange={(e) => setFormData({ ...formData, startDatetime: e.target.value })} required />
-                  type="datetime-local"
+                <Input label="End Date & Time" type="datetime-local" value={formData.endDatetime}
-                  value={formData.startDatetime}
+                  onChange={(e) => setFormData({ ...formData, endDatetime: e.target.value })} />
-                  onChange={(e) => setFormData({ ...formData, startDatetime: e.target.value })}
-                  required
-                />
-                <Input
-                  label="End Date & Time"
-                  type="datetime-local"
-                  value={formData.endDatetime}
-                  onChange={(e) => setFormData({ ...formData, endDatetime: e.target.value })}
-                />
               </div>
               
-              <Input
+              <Input label="Location" value={formData.location}
-                label="Location"
+                onChange={(e) => setFormData({ ...formData, location: e.target.value })} required />
-                value={formData.location}
+              <Input label="Location URL (Google Maps)" type="url" value={formData.locationUrl}
-                onChange={(e) => setFormData({ ...formData, location: e.target.value })}
+                onChange={(e) => setFormData({ ...formData, locationUrl: e.target.value })} />
-                required
-              />
               
-              <Input
+              <div className="grid grid-cols-3 gap-4">
-                label="Location URL (Google Maps)"
+                <Input label="Price" type="number" min="0" value={formData.price}
-                type="url"
+                  onChange={(e) => setFormData({ ...formData, price: Number(e.target.value) })} />
-                value={formData.locationUrl}
-                onChange={(e) => setFormData({ ...formData, locationUrl: e.target.value })}
-              />
-              
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <Input
-                  label="Price"
-                  type="number"
-                  min="0"
-                  value={formData.price}
-                  onChange={(e) => setFormData({ ...formData, price: Number(e.target.value) })}
-                />
                 <div>
                   <label className="block text-sm font-medium mb-1">Currency</label>
-                  <select
+                  <select value={formData.currency} onChange={(e) => setFormData({ ...formData, currency: e.target.value })}
-                    value={formData.currency}
+                    className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray">
-                    onChange={(e) => setFormData({ ...formData, currency: e.target.value })}
-                    className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray"
-                  >
                     <option value="PYG">PYG</option>
                     <option value="USD">USD</option>
                   </select>
                 </div>
-                <Input
+                <Input label="Capacity" type="number" min="1" value={formData.capacity}
-                  label="Capacity"
+                  onChange={(e) => setFormData({ ...formData, capacity: Number(e.target.value) })} />
-                  type="number"
-                  min="1"
-                  value={formData.capacity}
-                  onChange={(e) => setFormData({ ...formData, capacity: Number(e.target.value) })}
-                />
               </div>
               
               <div>
                 <label className="block text-sm font-medium mb-1">Status</label>
-                <select
+                <select value={formData.status} onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
-                  value={formData.status}
+                  className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray">
-                  onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
-                  className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray"
-                >
                   <option value="draft">Draft</option>
                   <option value="published">Published</option>
+                  <option value="unlisted">Unlisted</option>
                   <option value="cancelled">Cancelled</option>
                   <option value="completed">Completed</option>
                   <option value="archived">Archived</option>
                 </select>
               </div>
 
-              {/* External Booking Section */}
               <div className="border border-secondary-light-gray rounded-lg p-4 space-y-4">
                 <div className="flex items-center justify-between">
                   <div>
                     <label className="block text-sm font-medium text-gray-700">External Booking</label>
-                    <p className="text-xs text-gray-500">Redirect users to an external booking platform</p>
+                    <p className="text-xs text-gray-500">Redirect users to an external platform</p>
                   </div>
-                  <button
+                  <button type="button"
-                    type="button"
                     onClick={() => setFormData({ ...formData, externalBookingEnabled: !formData.externalBookingEnabled })}
-                    className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-yellow focus:ring-offset-2 ${
+                    className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ${
                       formData.externalBookingEnabled ? 'bg-primary-yellow' : 'bg-gray-200'
-                    }`}
+                    }`}>
-                  >
+                    <span className={`inline-block h-5 w-5 transform rounded-full bg-white shadow transition ${
-                    <span
-                      className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
                       formData.externalBookingEnabled ? 'translate-x-5' : 'translate-x-0'
-                      }`}
+                    }`} />
-                    />
                   </button>
                 </div>
-                
                 {formData.externalBookingEnabled && (
                   <div>
-                    <Input
+                    <Input label="External Booking URL" type="url" value={formData.externalBookingUrl}
-                      label="External Booking URL"
-                      type="url"
-                      value={formData.externalBookingUrl}
                       onChange={(e) => setFormData({ ...formData, externalBookingUrl: e.target.value })}
-                      placeholder="https://example.com/book"
+                      placeholder="https://example.com/book" required />
-                      required
-                    />
                     <p className="text-xs text-gray-500 mt-1">Must be a valid HTTPS URL</p>
                   </div>
                 )}
               </div>
 
-              {/* Image Upload / Media Picker */}
+              <MediaPicker value={formData.bannerUrl}
-              <MediaPicker
-                value={formData.bannerUrl}
                 onChange={(url) => setFormData({ ...formData, bannerUrl: url })}
-                relatedId={editingEvent?.id}
+                relatedId={editingEvent?.id} relatedType="event" />
-                relatedType="event"
+
-              />
+              {editingEvent && editingEvent.status === 'published' && (
+                <div className="border border-secondary-light-gray rounded-lg p-4 space-y-4 bg-amber-50">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 flex items-center gap-2">
+                        <StarIcon className="w-5 h-5 text-amber-500" /> Featured Event
+                      </label>
+                      <p className="text-xs text-gray-500">Prominently displayed on homepage</p>
+                    </div>
+                    <button type="button" disabled={settingFeatured !== null}
+                      onClick={() => handleSetFeatured(featuredEventId === editingEvent.id ? null : editingEvent.id)}
+                      className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors disabled:opacity-50 ${
+                        featuredEventId === editingEvent.id ? 'bg-amber-500' : 'bg-gray-200'
+                      }`}>
+                      <span className={`inline-block h-5 w-5 transform rounded-full bg-white shadow transition ${
+                        featuredEventId === editingEvent.id ? 'translate-x-5' : 'translate-x-0'
+                      }`} />
+                    </button>
+                  </div>
+                  {featuredEventId && featuredEventId !== editingEvent.id && (
+                    <p className="text-xs text-amber-700 bg-amber-100 p-2 rounded">
+                      Note: Another event is currently featured. Setting this event as featured will replace it.
+                    </p>
+                  )}
+                </div>
+              )}
               
               <div className="flex gap-3 pt-4">
-                <Button type="submit" isLoading={saving}>
+                <Button type="submit" isLoading={saving} className="flex-1 min-h-[44px]">
                   {editingEvent ? 'Update Event' : 'Create Event'}
                 </Button>
-                <Button 
+                <Button type="button" variant="outline" onClick={() => { setShowForm(false); resetForm(); }} className="flex-1 min-h-[44px]">
-                  type="button" 
-                  variant="outline" 
-                  onClick={() => { setShowForm(false); resetForm(); }}
-                >
                   Cancel
                 </Button>
               </div>
@@ -472,17 +436,17 @@ export default function AdminEventsPage() {
         </div>
       )}
 
-      {/* Events Table */}
+      {/* Desktop: Table */}
-      <Card className="overflow-hidden">
+      <Card className="overflow-hidden hidden md:block">
         <div className="overflow-x-auto">
           <table className="w-full">
             <thead className="bg-secondary-gray">
               <tr>
-                <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">Event</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-6 py-3 text-sm font-medium text-gray-600">Date</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
-                <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">Capacity</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Capacity</th>
-                <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">Status</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                <th className="text-right px-6 py-3 text-sm font-medium text-gray-600">Actions</th>
+                <th className="text-right px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-secondary-light-gray">
@@ -494,83 +458,91 @@ export default function AdminEventsPage() {
                 </tr>
               ) : (
                 events.map((event) => (
-                  <tr key={event.id} className="hover:bg-gray-50">
+                  <tr key={event.id} className={clsx("hover:bg-gray-50", featuredEventId === event.id && "bg-amber-50")}>
-                    <td className="px-6 py-4">
+                    <td className="px-4 py-3">
                       <div className="flex items-center gap-3">
                         {event.bannerUrl ? (
-                          <img 
+                          <img src={event.bannerUrl} alt={event.title}
-                            src={event.bannerUrl} 
+                            className="w-10 h-10 rounded-lg object-cover flex-shrink-0" />
-                            alt={event.title}
-                            className="w-12 h-12 rounded-lg object-cover flex-shrink-0"
-                          />
                         ) : (
-                          <div className="w-12 h-12 rounded-lg bg-secondary-gray flex items-center justify-center flex-shrink-0">
+                          <div className="w-10 h-10 rounded-lg bg-secondary-gray flex items-center justify-center flex-shrink-0">
-                            <PhotoIcon className="w-6 h-6 text-gray-400" />
+                            <PhotoIcon className="w-5 h-5 text-gray-400" />
                           </div>
                         )}
                         <div>
-                          <p className="font-medium">{event.title}</p>
+                          <div className="flex items-center gap-2">
-                          <p className="text-sm text-gray-500 truncate max-w-xs">{event.location}</p>
+                            <p className="font-medium text-sm">{event.title}</p>
+                            {featuredEventId === event.id && (
+                              <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-amber-100 text-amber-800">
+                                <StarIconSolid className="w-2.5 h-2.5" /> Featured
+                              </span>
+                            )}
+                          </div>
+                          <p className="text-xs text-gray-500 truncate max-w-xs">{event.location}</p>
                         </div>
                       </div>
                     </td>
-                    <td className="px-6 py-4 text-sm text-gray-600">
+                    <td className="px-4 py-3 text-sm text-gray-600">{formatDate(event.startDatetime)}</td>
-                      {formatDate(event.startDatetime)}
+                    <td className="px-4 py-3 text-sm">{event.bookedCount || 0} / {event.capacity}</td>
-                    </td>
+                    <td className="px-4 py-3">
-                    <td className="px-6 py-4 text-sm">
+                      <div className="flex items-center gap-1.5">
-                      {event.bookedCount || 0} / {event.capacity}
-                    </td>
-                    <td className="px-6 py-4">
                         {getStatusBadge(event.status)}
+                        {isEventOver(event) && event.status !== 'completed' && event.status !== 'cancelled' && event.status !== 'archived' && (
+                          <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-gray-800 text-white">Over</span>
+                        )}
+                      </div>
                     </td>
-                    <td className="px-6 py-4">
+                    <td className="px-4 py-3">
                       <div className="flex items-center justify-end gap-1">
                         {event.status === 'draft' && (
-                          <Button
+                          <Button size="sm" variant="ghost" onClick={() => handleStatusChange(event, 'published')}>
-                            size="sm"
-                            variant="ghost"
-                            onClick={() => handleStatusChange(event, 'published')}
-                          >
                             Publish
                           </Button>
                         )}
-                        <Link
+                        {event.status === 'published' && (
-                          href={`/admin/events/${event.id}`}
+                          <button onClick={() => handleSetFeatured(featuredEventId === event.id ? null : event.id)}
-                          className="p-2 hover:bg-primary-yellow/20 text-primary-dark rounded-btn"
+                            disabled={settingFeatured !== null}
-                          title="Manage Event"
+                            className={clsx("p-2 rounded-btn disabled:opacity-50",
-                        >
+                              featuredEventId === event.id ? "bg-amber-100 text-amber-600 hover:bg-amber-200" : "hover:bg-amber-100 text-gray-400 hover:text-amber-600")}
-                          <EyeIcon className="w-4 h-4" />
+                            title={featuredEventId === event.id ? "Remove from featured" : "Set as featured"}>
-                        </Link>
+                            {featuredEventId === event.id ? <StarIconSolid className="w-4 h-4" /> : <StarIcon className="w-4 h-4" />}
-                        <button
-                          onClick={() => handleEdit(event)}
-                          className="p-2 hover:bg-gray-100 rounded-btn"
-                          title="Edit"
-                        >
-                          <PencilIcon className="w-4 h-4" />
-                        </button>
-                        <button
-                          onClick={() => handleDuplicate(event)}
-                          className="p-2 hover:bg-blue-100 text-blue-600 rounded-btn"
-                          title="Duplicate"
-                        >
-                          <DocumentDuplicateIcon className="w-4 h-4" />
-                        </button>
-                        {event.status !== 'archived' && (
-                          <button
-                            onClick={() => handleArchive(event)}
-                            className="p-2 hover:bg-gray-100 text-gray-600 rounded-btn"
-                            title="Archive"
-                          >
-                            <ArchiveBoxIcon className="w-4 h-4" />
                           </button>
                         )}
-                        <button
+                        <Link href={`/admin/events/${event.id}`}
-                          onClick={() => handleDelete(event.id)}
+                          className="p-2 hover:bg-primary-yellow/20 text-primary-dark rounded-btn" title="Manage">
-                          className="p-2 hover:bg-red-100 text-red-600 rounded-btn"
+                          <EyeIcon className="w-4 h-4" />
-                          title="Delete"
+                        </Link>
-                        >
+                        <button onClick={() => handleEdit(event)} className="p-2 hover:bg-gray-100 rounded-btn" title="Edit">
-                          <TrashIcon className="w-4 h-4" />
+                          <PencilIcon className="w-4 h-4" />
                         </button>
+                        <MoreMenu>
+                          {(event.status === 'draft' || event.status === 'published') && (
+                            <DropdownItem onClick={() => handleStatusChange(event, 'unlisted')}>
+                              <LinkIcon className="w-4 h-4 mr-2" /> Make Unlisted
+                            </DropdownItem>
+                          )}
+                          {event.status === 'unlisted' && (
+                            <DropdownItem onClick={() => handleStatusChange(event, 'published')}>
+                              Make Public
+                            </DropdownItem>
+                          )}
+                          {(event.status === 'published' || event.status === 'unlisted') && (
+                            <DropdownItem onClick={() => handleStatusChange(event, 'draft')}>
+                              Unpublish
+                            </DropdownItem>
+                          )}
+                          <DropdownItem onClick={() => handleDuplicate(event)}>
+                            <DocumentDuplicateIcon className="w-4 h-4 mr-2" /> Duplicate
+                          </DropdownItem>
+                          {event.status !== 'archived' && (
+                            <DropdownItem onClick={() => handleArchive(event)}>
+                              <ArchiveBoxIcon className="w-4 h-4 mr-2" /> Archive
+                            </DropdownItem>
+                          )}
+                          <DropdownItem onClick={() => handleDelete(event.id)} className="text-red-600">
+                            <TrashIcon className="w-4 h-4 mr-2" /> Delete
+                          </DropdownItem>
+                        </MoreMenu>
                       </div>
                     </td>
                   </tr>
@@ -580,6 +552,109 @@ export default function AdminEventsPage() {
           </table>
         </div>
       </Card>
+
+      {/* Mobile: Card List */}
+      <div className="md:hidden space-y-2">
+        {events.length === 0 ? (
+          <div className="text-center py-10 text-gray-500 text-sm">
+            No events found. Create your first event!
+          </div>
+        ) : (
+          events.map((event) => (
+            <Card key={event.id} className={clsx("p-3", featuredEventId === event.id && "ring-2 ring-amber-300")}>
+              <div className="flex items-start gap-3">
+                {event.bannerUrl ? (
+                  <img src={event.bannerUrl} alt={event.title}
+                    className="w-14 h-14 rounded-lg object-cover flex-shrink-0" />
+                ) : (
+                  <div className="w-14 h-14 rounded-lg bg-secondary-gray flex items-center justify-center flex-shrink-0">
+                    <PhotoIcon className="w-6 h-6 text-gray-400" />
+                  </div>
+                )}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="min-w-0">
+                      <p className="font-medium text-sm truncate">{event.title}</p>
+                      <p className="text-xs text-gray-500">{formatDate(event.startDatetime)}</p>
+                      <p className="text-xs text-gray-400 truncate">{event.location}</p>
+                    </div>
+                    <div className="flex items-center gap-1 flex-shrink-0 flex-wrap justify-end">
+                      {getStatusBadge(event.status)}
+                      {isEventOver(event) && event.status !== 'completed' && event.status !== 'cancelled' && event.status !== 'archived' && (
+                        <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-gray-800 text-white">Over</span>
+                      )}
+                      {featuredEventId === event.id && (
+                        <StarIconSolid className="w-4 h-4 text-amber-500" />
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex items-center justify-between mt-2 pt-2 border-t border-gray-100">
+                    <p className="text-xs text-gray-500">{event.bookedCount || 0} / {event.capacity} spots</p>
+                    <div className="flex items-center gap-1">
+                      <Link href={`/admin/events/${event.id}`}
+                        className="p-2 hover:bg-primary-yellow/20 text-primary-dark rounded-btn min-h-[36px] min-w-[36px] flex items-center justify-center">
+                        <EyeIcon className="w-4 h-4" />
+                      </Link>
+                      <MoreMenu>
+                        <DropdownItem onClick={() => handleEdit(event)}>
+                          <PencilIcon className="w-4 h-4 mr-2" /> Edit
+                        </DropdownItem>
+                        {event.status === 'draft' && (
+                          <DropdownItem onClick={() => handleStatusChange(event, 'published')}>
+                            Publish
+                          </DropdownItem>
+                        )}
+                        {(event.status === 'draft' || event.status === 'published') && (
+                          <DropdownItem onClick={() => handleStatusChange(event, 'unlisted')}>
+                            <LinkIcon className="w-4 h-4 mr-2" /> Make Unlisted
+                          </DropdownItem>
+                        )}
+                        {event.status === 'unlisted' && (
+                          <DropdownItem onClick={() => handleStatusChange(event, 'published')}>
+                            Make Public
+                          </DropdownItem>
+                        )}
+                        {(event.status === 'published' || event.status === 'unlisted') && (
+                          <DropdownItem onClick={() => handleStatusChange(event, 'draft')}>
+                            Unpublish
+                          </DropdownItem>
+                        )}
+                        {event.status === 'published' && (
+                          <DropdownItem onClick={() => handleSetFeatured(featuredEventId === event.id ? null : event.id)}>
+                            <StarIcon className="w-4 h-4 mr-2" />
+                            {featuredEventId === event.id ? 'Unfeature' : 'Set Featured'}
+                          </DropdownItem>
+                        )}
+                        <DropdownItem onClick={() => handleDuplicate(event)}>
+                          <DocumentDuplicateIcon className="w-4 h-4 mr-2" /> Duplicate
+                        </DropdownItem>
+                        {event.status !== 'archived' && (
+                          <DropdownItem onClick={() => handleArchive(event)}>
+                            <ArchiveBoxIcon className="w-4 h-4 mr-2" /> Archive
+                          </DropdownItem>
+                        )}
+                        <DropdownItem onClick={() => handleDelete(event.id)} className="text-red-600">
+                          <TrashIcon className="w-4 h-4 mr-2" /> Delete
+                        </DropdownItem>
+                      </MoreMenu>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          ))
+        )}
+      </div>
+
+      {/* Mobile FAB */}
+      <div className="md:hidden fixed bottom-6 right-6 z-40">
+        <button onClick={() => { resetForm(); setShowForm(true); }}
+          className="w-14 h-14 bg-primary-yellow text-primary-dark rounded-full shadow-lg flex items-center justify-center hover:bg-yellow-400 active:scale-95 transition-transform">
+          <PlusIcon className="w-6 h-6" />
+        </button>
+      </div>
+
+      <AdminMobileStyles />
     </div>
   );
 }

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

@@ -0,0 +1,393 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useLanguage } from '@/context/LanguageContext';
+import { faqApi, FaqItemAdmin } from '@/lib/api';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import { MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
+import toast from 'react-hot-toast';
+import clsx from 'clsx';
+import {
+  PlusIcon,
+  PencilSquareIcon,
+  TrashIcon,
+  Bars3Icon,
+  XMarkIcon,
+  CheckIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+} from '@heroicons/react/24/outline';
+
+type FormState = { id: string | null; question: string; questionEs: string; answer: string; answerEs: string; enabled: boolean; showOnHomepage: boolean };
+
+const emptyForm: FormState = {
+  id: null, question: '', questionEs: '', answer: '', answerEs: '', enabled: true, showOnHomepage: false,
+};
+
+export default function AdminFaqPage() {
+  const { locale } = useLanguage();
+  const [faqs, setFaqs] = useState<FaqItemAdmin[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [form, setForm] = useState<FormState>(emptyForm);
+  const [showForm, setShowForm] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [draggedId, setDraggedId] = useState<string | null>(null);
+  const [dragOverId, setDragOverId] = useState<string | null>(null);
+
+  useEffect(() => { loadFaqs(); }, []);
+
+  const loadFaqs = async () => {
+    try {
+      setLoading(true);
+      const res = await faqApi.getAdminList();
+      setFaqs(res.faqs);
+    } catch (e) {
+      console.error(e);
+      toast.error(locale === 'es' ? 'Error al cargar FAQs' : 'Failed to load FAQs');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreate = () => { setForm(emptyForm); setShowForm(true); };
+
+  const handleEdit = (faq: FaqItemAdmin) => {
+    setForm({
+      id: faq.id, question: faq.question, questionEs: faq.questionEs ?? '',
+      answer: faq.answer, answerEs: faq.answerEs ?? '', enabled: faq.enabled, showOnHomepage: faq.showOnHomepage,
+    });
+    setShowForm(true);
+  };
+
+  const handleSave = async () => {
+    if (!form.question.trim() || !form.answer.trim()) {
+      toast.error(locale === 'es' ? 'Pregunta y respuesta (EN) son obligatorios' : 'Question and answer (EN) are required');
+      return;
+    }
+    try {
+      setSaving(true);
+      if (form.id) {
+        await faqApi.update(form.id, {
+          question: form.question.trim(), questionEs: form.questionEs.trim() || null,
+          answer: form.answer.trim(), answerEs: form.answerEs.trim() || null,
+          enabled: form.enabled, showOnHomepage: form.showOnHomepage,
+        });
+        toast.success(locale === 'es' ? 'FAQ actualizado' : 'FAQ updated');
+      } else {
+        await faqApi.create({
+          question: form.question.trim(), questionEs: form.questionEs.trim() || undefined,
+          answer: form.answer.trim(), answerEs: form.answerEs.trim() || undefined,
+          enabled: form.enabled, showOnHomepage: form.showOnHomepage,
+        });
+        toast.success(locale === 'es' ? 'FAQ creado' : 'FAQ created');
+      }
+      setForm(emptyForm);
+      setShowForm(false);
+      await loadFaqs();
+    } catch (e: any) {
+      toast.error(e.message || (locale === 'es' ? 'Error al guardar' : 'Failed to save'));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm(locale === 'es' ? '¿Eliminar esta pregunta?' : 'Delete this question?')) return;
+    try {
+      await faqApi.delete(id);
+      toast.success(locale === 'es' ? 'FAQ eliminado' : 'FAQ deleted');
+      if (form.id === id) { setForm(emptyForm); setShowForm(false); }
+      await loadFaqs();
+    } catch (e: any) {
+      toast.error(e.message || (locale === 'es' ? 'Error al eliminar' : 'Failed to delete'));
+    }
+  };
+
+  const handleToggleEnabled = async (faq: FaqItemAdmin) => {
+    try {
+      await faqApi.update(faq.id, { enabled: !faq.enabled });
+      setFaqs(prev => prev.map(f => f.id === faq.id ? { ...f, enabled: !f.enabled } : f));
+    } catch (e: any) {
+      toast.error(e.message || (locale === 'es' ? 'Error al actualizar' : 'Failed to update'));
+    }
+  };
+
+  const handleToggleShowOnHomepage = async (faq: FaqItemAdmin) => {
+    try {
+      await faqApi.update(faq.id, { showOnHomepage: !faq.showOnHomepage });
+      setFaqs(prev => prev.map(f => f.id === faq.id ? { ...f, showOnHomepage: !f.showOnHomepage } : f));
+    } catch (e: any) {
+      toast.error(e.message || (locale === 'es' ? 'Error al actualizar' : 'Failed to update'));
+    }
+  };
+
+  const handleMoveUp = async (index: number) => {
+    if (index === 0) return;
+    const newOrder = [...faqs];
+    [newOrder[index - 1], newOrder[index]] = [newOrder[index], newOrder[index - 1]];
+    const ids = newOrder.map(f => f.id);
+    try {
+      const res = await faqApi.reorder(ids);
+      setFaqs(res.faqs);
+    } catch (err: any) {
+      toast.error(err.message || (locale === 'es' ? 'Error al reordenar' : 'Failed to reorder'));
+    }
+  };
+
+  const handleMoveDown = async (index: number) => {
+    if (index >= faqs.length - 1) return;
+    const newOrder = [...faqs];
+    [newOrder[index], newOrder[index + 1]] = [newOrder[index + 1], newOrder[index]];
+    const ids = newOrder.map(f => f.id);
+    try {
+      const res = await faqApi.reorder(ids);
+      setFaqs(res.faqs);
+    } catch (err: any) {
+      toast.error(err.message || (locale === 'es' ? 'Error al reordenar' : 'Failed to reorder'));
+    }
+  };
+
+  // Desktop drag handlers
+  const handleDragStart = (e: React.DragEvent, id: string) => {
+    setDraggedId(id);
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/plain', id);
+  };
+  const handleDragOver = (e: React.DragEvent, id: string) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    setDragOverId(id);
+  };
+  const handleDragLeave = () => { setDragOverId(null); };
+  const handleDrop = async (e: React.DragEvent, targetId: string) => {
+    e.preventDefault();
+    setDragOverId(null);
+    setDraggedId(null);
+    const sourceId = e.dataTransfer.getData('text/plain');
+    if (!sourceId || sourceId === targetId) return;
+    const idx = faqs.findIndex(f => f.id === sourceId);
+    const targetIdx = faqs.findIndex(f => f.id === targetId);
+    if (idx === -1 || targetIdx === -1) return;
+    const newOrder = [...faqs];
+    const [removed] = newOrder.splice(idx, 1);
+    newOrder.splice(targetIdx, 0, removed);
+    const ids = newOrder.map(f => f.id);
+    try {
+      const res = await faqApi.reorder(ids);
+      setFaqs(res.faqs);
+      toast.success(locale === 'es' ? 'Orden actualizado' : 'Order updated');
+    } catch (err: any) {
+      toast.error(err.message || (locale === 'es' ? 'Error al reordenar' : 'Failed to reorder'));
+    }
+  };
+  const handleDragEnd = () => { setDraggedId(null); setDragOverId(null); };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between flex-wrap gap-4">
+        <div>
+          <h1 className="text-xl md:text-2xl font-bold font-heading">FAQ</h1>
+          <p className="text-gray-500 text-xs md:text-sm mt-1 hidden md:block">
+            {locale === 'es'
+              ? 'Crear y editar preguntas frecuentes. Arrastra para cambiar el orden.'
+              : 'Create and edit FAQ questions. Drag to change order.'}
+          </p>
+        </div>
+        <Button onClick={handleCreate} className="hidden md:flex">
+          <PlusIcon className="w-4 h-4 mr-2" />
+          {locale === 'es' ? 'Nueva pregunta' : 'Add question'}
+        </Button>
+      </div>
+
+      {/* Form Modal - bottom sheet on mobile */}
+      {showForm && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
+          <Card className="w-full md:max-w-2xl max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card">
+            <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray flex-shrink-0">
+              <h2 className="text-base font-semibold">
+                {form.id ? (locale === 'es' ? 'Editar pregunta' : 'Edit question') : (locale === 'es' ? 'Nueva pregunta' : 'New question')}
+              </h2>
+              <button onClick={() => { setForm(emptyForm); setShowForm(false); }}
+                className="p-2 hover:bg-gray-100 rounded-full min-h-[44px] min-w-[44px] flex items-center justify-center">
+                <XMarkIcon className="w-5 h-5" />
+              </button>
+            </div>
+            <div className="p-4 space-y-4 overflow-y-auto flex-1 min-h-0">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div>
+                  <label className="block text-sm font-medium mb-1">Question (EN) *</label>
+                  <Input value={form.question} onChange={e => setForm(f => ({ ...f, question: e.target.value }))} placeholder="Question in English" />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-1">Pregunta (ES)</label>
+                  <Input value={form.questionEs} onChange={e => setForm(f => ({ ...f, questionEs: e.target.value }))} placeholder="Pregunta en español" />
+                </div>
+              </div>
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div>
+                  <label className="block text-sm font-medium mb-1">Answer (EN) *</label>
+                  <textarea className="w-full border border-gray-300 rounded-btn px-3 py-2 min-h-[100px]"
+                    value={form.answer} onChange={e => setForm(f => ({ ...f, answer: e.target.value }))} placeholder="Answer in English" />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-1">Respuesta (ES)</label>
+                  <textarea className="w-full border border-gray-300 rounded-btn px-3 py-2 min-h-[100px]"
+                    value={form.answerEs} onChange={e => setForm(f => ({ ...f, answerEs: e.target.value }))} placeholder="Respuesta en español" />
+                </div>
+              </div>
+              <div className="flex flex-wrap gap-6">
+                <label className="flex items-center gap-2 cursor-pointer min-h-[44px]">
+                  <input type="checkbox" checked={form.enabled} onChange={e => setForm(f => ({ ...f, enabled: e.target.checked }))} className="rounded border-gray-300 w-4 h-4" />
+                  <span className="text-sm">{locale === 'es' ? 'Mostrar en el sitio' : 'Show on site'}</span>
+                </label>
+                <label className="flex items-center gap-2 cursor-pointer min-h-[44px]">
+                  <input type="checkbox" checked={form.showOnHomepage} onChange={e => setForm(f => ({ ...f, showOnHomepage: e.target.checked }))} className="rounded border-gray-300 w-4 h-4" />
+                  <span className="text-sm">{locale === 'es' ? 'Mostrar en inicio' : 'Show on homepage'}</span>
+                </label>
+              </div>
+              <div className="flex gap-3 pt-2">
+                <Button onClick={handleSave} isLoading={saving} className="flex-1 min-h-[44px]">
+                  <CheckIcon className="w-4 h-4 mr-1" /> {locale === 'es' ? 'Guardar' : 'Save'}
+                </Button>
+                <Button variant="outline" onClick={() => { setForm(emptyForm); setShowForm(false); }} disabled={saving} className="flex-1 min-h-[44px]">
+                  {locale === 'es' ? 'Cancelar' : 'Cancel'}
+                </Button>
+              </div>
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {/* Desktop: Table */}
+      <Card className="hidden md:block">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                <th className="w-10 px-4 py-3" />
+                <th className="px-4 py-2 text-left text-xs font-semibold text-gray-500 uppercase">{locale === 'es' ? 'Pregunta' : 'Question'}</th>
+                <th className="px-4 py-2 text-left text-xs font-semibold text-gray-500 uppercase w-24">{locale === 'es' ? 'En sitio' : 'On site'}</th>
+                <th className="px-4 py-2 text-left text-xs font-semibold text-gray-500 uppercase w-28">{locale === 'es' ? 'En inicio' : 'Homepage'}</th>
+                <th className="px-4 py-2 text-right text-xs font-semibold text-gray-500 uppercase w-32">{locale === 'es' ? 'Acciones' : 'Actions'}</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              {faqs.length === 0 ? (
+                <tr><td colSpan={5} className="px-6 py-12 text-center text-gray-500 text-sm">{locale === 'es' ? 'No hay preguntas. Añade la primera.' : 'No questions yet. Add the first one.'}</td></tr>
+              ) : (
+                faqs.map((faq) => (
+                  <tr key={faq.id} draggable onDragStart={e => handleDragStart(e, faq.id)}
+                    onDragOver={e => handleDragOver(e, faq.id)} onDragLeave={handleDragLeave}
+                    onDrop={e => handleDrop(e, faq.id)} onDragEnd={handleDragEnd}
+                    className={clsx('hover:bg-gray-50', draggedId === faq.id && 'opacity-50', dragOverId === faq.id && 'bg-primary-yellow/10')}>
+                    <td className="px-4 py-3">
+                      <span className="cursor-grab active:cursor-grabbing text-gray-400 hover:text-gray-600" title={locale === 'es' ? 'Arrastrar para reordenar' : 'Drag to reorder'}>
+                        <Bars3Icon className="w-5 h-5" />
+                      </span>
+                    </td>
+                    <td className="px-4 py-3">
+                      <p className="font-medium text-primary-dark text-sm line-clamp-1">{locale === 'es' && faq.questionEs ? faq.questionEs : faq.question}</p>
+                    </td>
+                    <td className="px-4 py-3">
+                      <button onClick={() => handleToggleEnabled(faq)}
+                        className={clsx('inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium min-h-[32px]',
+                          faq.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-500')}>
+                        {faq.enabled ? (locale === 'es' ? 'Sí' : 'Yes') : 'No'}
+                      </button>
+                    </td>
+                    <td className="px-4 py-3">
+                      <button onClick={() => handleToggleShowOnHomepage(faq)}
+                        className={clsx('inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium min-h-[32px]',
+                          faq.showOnHomepage ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-500')}>
+                        {faq.showOnHomepage ? (locale === 'es' ? 'Sí' : 'Yes') : 'No'}
+                      </button>
+                    </td>
+                    <td className="px-4 py-3 text-right">
+                      <div className="flex justify-end gap-1">
+                        <Button size="sm" variant="outline" onClick={() => handleEdit(faq)}>
+                          <PencilSquareIcon className="w-4 h-4" />
+                        </Button>
+                        <Button size="sm" variant="outline" onClick={() => handleDelete(faq.id)} className="text-red-600 hover:bg-red-50">
+                          <TrashIcon className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+
+      {/* Mobile: Card List */}
+      <div className="md:hidden space-y-2">
+        {faqs.length === 0 ? (
+          <div className="text-center py-10 text-gray-500 text-sm">{locale === 'es' ? 'No hay preguntas. Añade la primera.' : 'No questions yet. Add the first one.'}</div>
+        ) : (
+          faqs.map((faq, index) => (
+            <Card key={faq.id} className="p-3">
+              <div className="flex items-start gap-2">
+                <div className="flex flex-col gap-0.5 flex-shrink-0 pt-0.5">
+                  <button onClick={() => handleMoveUp(index)} disabled={index === 0}
+                    className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30 min-h-[28px] min-w-[28px] flex items-center justify-center">
+                    <ChevronUpIcon className="w-3.5 h-3.5" />
+                  </button>
+                  <button onClick={() => handleMoveDown(index)} disabled={index >= faqs.length - 1}
+                    className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30 min-h-[28px] min-w-[28px] flex items-center justify-center">
+                    <ChevronDownIcon className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="font-medium text-sm text-primary-dark line-clamp-2">
+                    {locale === 'es' && faq.questionEs ? faq.questionEs : faq.question}
+                  </p>
+                  <div className="flex items-center gap-2 mt-1.5">
+                    <button onClick={() => handleToggleEnabled(faq)}
+                      className={clsx('inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium min-h-[28px]',
+                        faq.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-500')}>
+                      {faq.enabled ? (locale === 'es' ? 'Sitio: Sí' : 'Site: Yes') : (locale === 'es' ? 'Sitio: No' : 'Site: No')}
+                    </button>
+                    <button onClick={() => handleToggleShowOnHomepage(faq)}
+                      className={clsx('inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium min-h-[28px]',
+                        faq.showOnHomepage ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-500')}>
+                      {faq.showOnHomepage ? (locale === 'es' ? 'Inicio: Sí' : 'Home: Yes') : (locale === 'es' ? 'Inicio: No' : 'Home: No')}
+                    </button>
+                  </div>
+                </div>
+                <MoreMenu>
+                  <DropdownItem onClick={() => handleEdit(faq)}>
+                    <PencilSquareIcon className="w-4 h-4 mr-2" /> {locale === 'es' ? 'Editar' : 'Edit'}
+                  </DropdownItem>
+                  <DropdownItem onClick={() => handleDelete(faq.id)} className="text-red-600">
+                    <TrashIcon className="w-4 h-4 mr-2" /> {locale === 'es' ? 'Eliminar' : 'Delete'}
+                  </DropdownItem>
+                </MoreMenu>
+              </div>
+            </Card>
+          ))
+        )}
+      </div>
+
+      {/* Mobile FAB */}
+      <div className="md:hidden fixed bottom-6 right-6 z-40">
+        <button onClick={handleCreate}
+          className="w-14 h-14 bg-primary-yellow text-primary-dark rounded-full shadow-lg flex items-center justify-center hover:bg-yellow-400 active:scale-95 transition-transform">
+          <PlusIcon className="w-6 h-6" />
+        </button>
+      </div>
+
+      <AdminMobileStyles />
+    </div>
+  );
+}

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

@@ -112,6 +112,7 @@ export default function AdminGalleryPage() {
       year: 'numeric',
       month: 'short',
       day: 'numeric',
+      timeZone: 'America/Asuncion',
     });
   };
 

frontend/src/app/admin/layout.tsx

@@ -23,6 +23,8 @@ import {
   XMarkIcon,
   BanknotesIcon,
   QrCodeIcon,
+  DocumentTextIcon,
+  QuestionMarkCircleIcon,
 } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { useState } from 'react';
@@ -35,14 +37,56 @@ export default function AdminLayout({
   const router = useRouter();
   const pathname = usePathname();
   const { t, locale } = useLanguage();
-  const { user, isAdmin, isLoading, logout } = useAuth();
+  const { user, hasAdminAccess, isLoading, logout } = useAuth();
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
+  type Role = 'admin' | 'organizer' | 'staff' | 'marketing';
+  const userRole = (user?.role || 'user') as Role;
+
+  const navigationWithRoles: { name: string; href: string; icon: typeof HomeIcon; allowedRoles: Role[] }[] = [
+    { name: t('admin.nav.dashboard'), href: '/admin', icon: HomeIcon, allowedRoles: ['admin', 'organizer'] },
+    { name: t('admin.nav.events'), href: '/admin/events', icon: CalendarIcon, allowedRoles: ['admin', 'organizer', 'staff'] },
+    { name: t('admin.nav.bookings'), href: '/admin/bookings', icon: TicketIcon, allowedRoles: ['admin', 'organizer'] },
+    { name: locale === 'es' ? 'Escáner' : 'Scanner', href: '/admin/scanner', icon: QrCodeIcon, allowedRoles: ['admin', 'organizer', 'staff'] },
+    { name: t('admin.nav.users'), href: '/admin/users', icon: UsersIcon, allowedRoles: ['admin'] },
+    { name: t('admin.nav.payments'), href: '/admin/payments', icon: CreditCardIcon, allowedRoles: ['admin', 'organizer'] },
+    { name: locale === 'es' ? 'Opciones de Pago' : 'Payment Options', href: '/admin/payment-options', icon: BanknotesIcon, allowedRoles: ['admin', 'organizer'] },
+    { name: t('admin.nav.contacts'), href: '/admin/contacts', icon: EnvelopeIcon, allowedRoles: ['admin', 'organizer', 'marketing'] },
+    { name: t('admin.nav.emails'), href: '/admin/emails', icon: InboxIcon, allowedRoles: ['admin', 'organizer'] },
+    { name: t('admin.nav.gallery'), href: '/admin/gallery', icon: PhotoIcon, allowedRoles: ['admin', 'organizer'] },
+    { name: locale === 'es' ? 'Páginas Legales' : 'Legal Pages', href: '/admin/legal-pages', icon: DocumentTextIcon, allowedRoles: ['admin'] },
+    { name: 'FAQ', href: '/admin/faq', icon: QuestionMarkCircleIcon, allowedRoles: ['admin'] },
+    { name: locale === 'es' ? 'Configuración' : 'Settings', href: '/admin/settings', icon: Cog6ToothIcon, allowedRoles: ['admin'] },
+  ];
+
+  const allowedPathsForRole = new Set(
+    navigationWithRoles.filter((item) => item.allowedRoles.includes(userRole)).map((item) => item.href)
+  );
+  const defaultAdminRoute =
+    userRole === 'staff' ? '/admin/scanner' : userRole === 'marketing' ? '/admin/contacts' : '/admin';
+
+  // All hooks must be called unconditionally before any early returns
   useEffect(() => {
-    if (!isLoading && (!user || !isAdmin)) {
+    if (!isLoading && (!user || !hasAdminAccess)) {
       router.push('/login');
     }
-  }, [user, isAdmin, isLoading, router]);
+  }, [user, hasAdminAccess, isLoading, router]);
+
+  useEffect(() => {
+    if (!user || !hasAdminAccess) return;
+    if (!pathname.startsWith('/admin')) return;
+    if (pathname === '/admin' && (userRole === 'staff' || userRole === 'marketing')) {
+      router.replace(defaultAdminRoute);
+      return;
+    }
+    const isPathAllowed = (path: string) => {
+      if (allowedPathsForRole.has(path)) return true;
+      return Array.from(allowedPathsForRole).some((allowed) => path.startsWith(allowed + '/'));
+    };
+    if (!isPathAllowed(pathname)) {
+      router.replace(defaultAdminRoute);
+    }
+  }, [pathname, userRole, defaultAdminRoute, router, user, hasAdminAccess]);
 
   if (isLoading) {
     return (
@@ -52,29 +96,29 @@ export default function AdminLayout({
     );
   }
 
-  if (!user || !isAdmin) {
+  if (!user || !hasAdminAccess) {
     return null;
   }
 
-  const navigation = [
+  const visibleNav = navigationWithRoles.filter((item) => item.allowedRoles.includes(userRole));
-    { name: t('admin.nav.dashboard'), href: '/admin', icon: HomeIcon },
+  const navigation = visibleNav;
-    { name: t('admin.nav.events'), href: '/admin/events', icon: CalendarIcon },
-    { name: t('admin.nav.bookings'), href: '/admin/bookings', icon: TicketIcon },
-    { name: locale === 'es' ? 'Escáner' : 'Scanner', href: '/admin/scanner', icon: QrCodeIcon },
-    { name: t('admin.nav.users'), href: '/admin/users', icon: UsersIcon },
-    { name: t('admin.nav.payments'), href: '/admin/payments', icon: CreditCardIcon },
-    { name: locale === 'es' ? 'Opciones de Pago' : 'Payment Options', href: '/admin/payment-options', icon: BanknotesIcon },
-    { name: t('admin.nav.contacts'), href: '/admin/contacts', icon: EnvelopeIcon },
-    { name: t('admin.nav.emails'), href: '/admin/emails', icon: InboxIcon },
-    { name: t('admin.nav.gallery'), href: '/admin/gallery', icon: PhotoIcon },
-    { name: locale === 'es' ? 'Configuración' : 'Settings', href: '/admin/settings', icon: Cog6ToothIcon },
-  ];
 
   const handleLogout = () => {
     logout();
     router.push('/');
   };
 
+  // Scanner page gets fullscreen layout without sidebar
+  const isScannerPage = pathname === '/admin/scanner';
+
+  if (isScannerPage) {
+    return (
+      <div className="min-h-screen bg-gray-950">
+        {children}
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-screen bg-secondary-gray">
       {/* Mobile sidebar backdrop */}

frontend/src/app/admin/legal-pages/page.tsx

@@ -0,0 +1,597 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import dynamic from 'next/dynamic';
+import { useLanguage } from '@/context/LanguageContext';
+import { legalPagesApi, LegalPage } from '@/lib/api';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import toast from 'react-hot-toast';
+import clsx from 'clsx';
+import {
+  DocumentTextIcon,
+  PencilSquareIcon,
+  ArrowPathIcon,
+  XMarkIcon,
+  CheckIcon,
+  ArrowLeftIcon,
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  EyeIcon,
+  PencilIcon,
+} from '@heroicons/react/24/outline';
+
+// Dynamically import rich text editor to avoid SSR issues
+const RichTextEditor = dynamic(
+  () => import('@/components/ui/RichTextEditor'),
+  { 
+    ssr: false,
+    loading: () => (
+      <div className="border border-secondary-light-gray rounded-btn bg-gray-50 h-[400px] flex items-center justify-center">
+        <div className="animate-spin w-6 h-6 border-2 border-primary-yellow border-t-transparent rounded-full" />
+      </div>
+    ),
+  }
+);
+
+const RichTextPreview = dynamic(
+  () => import('@/components/ui/RichTextEditor').then(mod => ({ default: mod.RichTextPreview })),
+  { 
+    ssr: false,
+    loading: () => (
+      <div className="border border-secondary-light-gray rounded-btn bg-gray-50 h-[400px] flex items-center justify-center">
+        <div className="animate-spin w-6 h-6 border-2 border-primary-yellow border-t-transparent rounded-full" />
+      </div>
+    ),
+  }
+);
+
+type EditLanguage = 'en' | 'es';
+type ViewMode = 'edit' | 'preview' | 'split';
+
+export default function AdminLegalPagesPage() {
+  const { locale } = useLanguage();
+  const [pages, setPages] = useState<LegalPage[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [seeding, setSeeding] = useState(false);
+  
+  // Editor state
+  const [editingPage, setEditingPage] = useState<LegalPage | null>(null);
+  const [editLanguage, setEditLanguage] = useState<EditLanguage>('en');
+  const [editContentEn, setEditContentEn] = useState('');
+  const [editContentEs, setEditContentEs] = useState('');
+  const [editTitleEn, setEditTitleEn] = useState('');
+  const [editTitleEs, setEditTitleEs] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [viewMode, setViewMode] = useState<ViewMode>('edit');
+
+  useEffect(() => {
+    loadPages();
+  }, []);
+
+  const loadPages = async () => {
+    try {
+      setLoading(true);
+      const response = await legalPagesApi.getAdminList();
+      setPages(response.pages);
+    } catch (error) {
+      console.error('Failed to load legal pages:', error);
+      toast.error(locale === 'es' ? 'Error al cargar páginas legales' : 'Failed to load legal pages');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSeed = async () => {
+    try {
+      setSeeding(true);
+      const response = await legalPagesApi.seed();
+      toast.success(response.message);
+      if (response.seeded > 0) {
+        await loadPages();
+      }
+    } catch (error: any) {
+      console.error('Failed to seed legal pages:', error);
+      toast.error(error.message || (locale === 'es' ? 'Error al importar páginas' : 'Failed to import pages'));
+    } finally {
+      setSeeding(false);
+    }
+  };
+
+  const handleEdit = (page: LegalPage) => {
+    setEditingPage(page);
+    // Load from contentMarkdown to preserve formatting (fallback to contentText)
+    setEditContentEn(page.contentMarkdown || page.contentText || '');
+    setEditContentEs(page.contentMarkdownEs || page.contentTextEs || '');
+    setEditTitleEn(page.title || '');
+    setEditTitleEs(page.titleEs || '');
+    // Default to English tab, or Spanish if only Spanish exists
+    setEditLanguage(page.hasEnglish || !page.hasSpanish ? 'en' : 'es');
+  };
+
+  const handleCancelEdit = () => {
+    setEditingPage(null);
+    setEditContentEn('');
+    setEditContentEs('');
+    setEditTitleEn('');
+    setEditTitleEs('');
+    setEditLanguage('en');
+  };
+
+  const handleSave = async () => {
+    if (!editingPage) return;
+    
+    // Validate - at least one language must have content
+    if (!editContentEn.trim() && !editContentEs.trim()) {
+      toast.error(locale === 'es' 
+        ? 'Al menos una versión de idioma debe tener contenido' 
+        : 'At least one language version must have content'
+      );
+      return;
+    }
+    
+    try {
+      setSaving(true);
+      const response = await legalPagesApi.update(editingPage.slug, {
+        contentMarkdown: editContentEn.trim() || undefined,
+        contentMarkdownEs: editContentEs.trim() || undefined,
+        title: editTitleEn.trim() || undefined,
+        titleEs: editTitleEs.trim() || undefined,
+      });
+      
+      toast.success(response.message || (locale === 'es' ? 'Página actualizada' : 'Page updated successfully'));
+      
+      // Update local state
+      setPages(prev => prev.map(p => 
+        p.slug === editingPage.slug ? response.page : p
+      ));
+      
+      handleCancelEdit();
+    } catch (error: any) {
+      console.error('Failed to save legal page:', error);
+      toast.error(error.message || (locale === 'es' ? 'Error al guardar' : 'Failed to save'));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const formatDate = (dateStr: string) => {
+    try {
+      return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-PY' : 'en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        timeZone: 'America/Asuncion',
+      });
+    } catch {
+      return dateStr;
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
+      </div>
+    );
+  }
+
+  // Editor view
+  if (editingPage) {
+    const currentContent = editLanguage === 'en' ? editContentEn : editContentEs;
+    const setCurrentContent = editLanguage === 'en' ? setEditContentEn : setEditContentEs;
+    const currentTitle = editLanguage === 'en' ? editTitleEn : editTitleEs;
+    const setCurrentTitle = editLanguage === 'en' ? setEditTitleEn : setEditTitleEs;
+    
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center justify-between flex-wrap gap-4">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={handleCancelEdit}
+              className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+            >
+              <ArrowLeftIcon className="w-5 h-5" />
+            </button>
+            <div>
+              <h1 className="text-2xl font-bold font-heading">
+                {locale === 'es' ? 'Editar Página Legal' : 'Edit Legal Page'}
+              </h1>
+              <p className="text-gray-500 text-sm mt-1">
+                {editingPage.slug}
+              </p>
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              onClick={handleCancelEdit}
+              disabled={saving}
+            >
+              <XMarkIcon className="w-4 h-4 mr-1" />
+              {locale === 'es' ? 'Cancelar' : 'Cancel'}
+            </Button>
+            <Button
+              onClick={handleSave}
+              isLoading={saving}
+            >
+              <CheckIcon className="w-4 h-4 mr-1" />
+              {locale === 'es' ? 'Guardar Todo' : 'Save All'}
+            </Button>
+          </div>
+        </div>
+
+        <Card>
+          <div className="p-6 space-y-6">
+            {/* Language tabs and View mode toggle */}
+            <div className="flex justify-between items-center border-b border-gray-200 pb-3">
+              {/* Language tabs */}
+              <div className="flex gap-4">
+                <button
+                  onClick={() => setEditLanguage('en')}
+                  className={clsx(
+                    'pb-3 px-1 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 -mb-3',
+                    editLanguage === 'en'
+                      ? 'border-primary-yellow text-primary-dark'
+                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                  )}
+                >
+                  English
+                  {editContentEn.trim() ? (
+                    <CheckCircleIcon className="w-4 h-4 text-green-500" />
+                  ) : (
+                    <ExclamationCircleIcon className="w-4 h-4 text-amber-500" />
+                  )}
+                </button>
+                <button
+                  onClick={() => setEditLanguage('es')}
+                  className={clsx(
+                    'pb-3 px-1 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 -mb-3',
+                    editLanguage === 'es'
+                      ? 'border-primary-yellow text-primary-dark'
+                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                  )}
+                >
+                  Español (Paraguay)
+                  {editContentEs.trim() ? (
+                    <CheckCircleIcon className="w-4 h-4 text-green-500" />
+                  ) : (
+                    <ExclamationCircleIcon className="w-4 h-4 text-amber-500" />
+                  )}
+                </button>
+              </div>
+
+              {/* View mode toggle */}
+              <div className="flex bg-gray-100 rounded-lg p-1">
+                <button
+                  onClick={() => setViewMode('edit')}
+                  className={clsx(
+                    'px-3 py-1.5 text-sm rounded-md transition-colors flex items-center gap-1.5',
+                    viewMode === 'edit'
+                      ? 'bg-white shadow-sm text-primary-dark'
+                      : 'text-gray-600 hover:text-gray-900'
+                  )}
+                >
+                  <PencilIcon className="w-4 h-4" />
+                  {locale === 'es' ? 'Editar' : 'Edit'}
+                </button>
+                <button
+                  onClick={() => setViewMode('split')}
+                  className={clsx(
+                    'px-3 py-1.5 text-sm rounded-md transition-colors hidden lg:flex items-center gap-1.5',
+                    viewMode === 'split'
+                      ? 'bg-white shadow-sm text-primary-dark'
+                      : 'text-gray-600 hover:text-gray-900'
+                  )}
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7" />
+                  </svg>
+                  Split
+                </button>
+                <button
+                  onClick={() => setViewMode('preview')}
+                  className={clsx(
+                    'px-3 py-1.5 text-sm rounded-md transition-colors flex items-center gap-1.5',
+                    viewMode === 'preview'
+                      ? 'bg-white shadow-sm text-primary-dark'
+                      : 'text-gray-600 hover:text-gray-900'
+                  )}
+                >
+                  <EyeIcon className="w-4 h-4" />
+                  {locale === 'es' ? 'Vista previa' : 'Preview'}
+                </button>
+              </div>
+            </div>
+
+            {/* Title for current language */}
+            <div>
+              <label className="block text-sm font-medium mb-2">
+                {editLanguage === 'en' 
+                  ? (locale === 'es' ? 'Título (Inglés)' : 'Title (English)')
+                  : (locale === 'es' ? 'Título (Español)' : 'Title (Spanish)')
+                }
+              </label>
+              <Input
+                value={currentTitle}
+                onChange={(e) => setCurrentTitle(e.target.value)}
+                placeholder={editLanguage === 'en' ? 'Title' : 'Título'}
+              />
+            </div>
+
+            {/* Content editor and preview */}
+            <div>
+              <label className="block text-sm font-medium mb-2">
+                {editLanguage === 'en'
+                  ? (locale === 'es' ? 'Contenido (Inglés)' : 'Content (English)')
+                  : (locale === 'es' ? 'Contenido (Español)' : 'Content (Spanish)')
+                }
+              </label>
+              
+              {viewMode === 'edit' && (
+                <>
+                  <p className="text-xs text-gray-500 mb-2">
+                    {locale === 'es' 
+                      ? 'Usa la barra de herramientas para dar formato. Los cambios se guardan como texto plano.'
+                      : 'Use the toolbar to format text. Changes are saved as plain text.'
+                    }
+                  </p>
+                  <RichTextEditor
+                    content={currentContent}
+                    onChange={setCurrentContent}
+                    placeholder={editLanguage === 'en' 
+                      ? 'Write content here...' 
+                      : 'Escribe el contenido aquí...'
+                    }
+                  />
+                </>
+              )}
+
+              {viewMode === 'preview' && (
+                <>
+                  <p className="text-xs text-gray-500 mb-2">
+                    {locale === 'es' 
+                      ? 'Así se verá el contenido en la página pública.'
+                      : 'This is how the content will look on the public page.'
+                    }
+                  </p>
+                  <div className="border border-secondary-light-gray rounded-btn bg-white">
+                    <div className="bg-gray-50 px-4 py-2 border-b border-gray-200 text-sm text-gray-500">
+                      {locale === 'es' ? 'Vista previa' : 'Preview'}
+                    </div>
+                    <RichTextPreview content={currentContent} />
+                  </div>
+                </>
+              )}
+
+              {viewMode === 'split' && (
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="text-xs text-gray-500 mb-2">
+                      {locale === 'es' ? 'Editor' : 'Editor'}
+                    </p>
+                    <RichTextEditor
+                      content={currentContent}
+                      onChange={setCurrentContent}
+                      placeholder={editLanguage === 'en' 
+                        ? 'Write content here...' 
+                        : 'Escribe el contenido aquí...'
+                      }
+                    />
+                  </div>
+                  <div>
+                    <p className="text-xs text-gray-500 mb-2">
+                      {locale === 'es' ? 'Vista previa' : 'Preview'}
+                    </p>
+                    <div className="border border-secondary-light-gray rounded-btn bg-white h-full">
+                      <RichTextPreview content={currentContent} className="h-full" />
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Info */}
+            <div className="bg-gray-50 rounded-lg p-4 text-sm text-gray-600">
+              <p className="font-medium mb-2">
+                {locale === 'es' ? 'Nota:' : 'Note:'}
+              </p>
+              <ul className="list-disc list-inside space-y-1">
+                <li>
+                  {locale === 'es' 
+                    ? 'El slug (URL) no se puede cambiar: '
+                    : 'The slug (URL) cannot be changed: '
+                  }
+                  <code className="bg-gray-200 px-1 rounded">/legal/{editingPage.slug}</code>
+                </li>
+                <li>
+                  {locale === 'es'
+                    ? 'Usa la barra de herramientas para encabezados, listas, negritas y cursivas.'
+                    : 'Use the toolbar for headings, lists, bold, and italics.'
+                  }
+                </li>
+                <li>
+                  {locale === 'es'
+                    ? 'Si falta una versión de idioma, se mostrará la otra versión disponible.'
+                    : 'If a language version is missing, the other available version will be shown.'
+                  }
+                </li>
+              </ul>
+            </div>
+
+            {/* Available Placeholders */}
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">
+              <p className="font-medium mb-2">
+                {locale === 'es' ? 'Marcadores de posición disponibles:' : 'Available placeholders:'}
+              </p>
+              <p className="text-blue-700 mb-3">
+                {locale === 'es'
+                  ? 'Puedes usar estos marcadores en el contenido. Se reemplazarán automáticamente con los valores configurados en'
+                  : 'You can use these placeholders in the content. They will be automatically replaced with the values configured in'
+                }
+                {' '}
+                <a href="/admin/settings" className="underline font-medium hover:text-blue-900">
+                  {locale === 'es' ? 'Configuración > Legal' : 'Settings > Legal Settings'}
+                </a>.
+              </p>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1.5">
+                {[
+                  { placeholder: '{{COMPANY_NAME}}', label: locale === 'es' ? 'Nombre de la empresa' : 'Company name' },
+                  { placeholder: '{{LEGAL_ENTITY_NAME}}', label: locale === 'es' ? 'Nombre de la entidad legal' : 'Legal entity name' },
+                  { placeholder: '{{RUC_NUMBER}}', label: locale === 'es' ? 'Número de RUC' : 'RUC number' },
+                  { placeholder: '{{COMPANY_ADDRESS}}', label: locale === 'es' ? 'Dirección de la empresa' : 'Company address' },
+                  { placeholder: '{{COMPANY_CITY}}', label: locale === 'es' ? 'Ciudad' : 'City' },
+                  { placeholder: '{{COMPANY_COUNTRY}}', label: locale === 'es' ? 'País' : 'Country' },
+                  { placeholder: '{{SUPPORT_EMAIL}}', label: locale === 'es' ? 'Email de soporte' : 'Support email' },
+                  { placeholder: '{{LEGAL_EMAIL}}', label: locale === 'es' ? 'Email legal' : 'Legal email' },
+                  { placeholder: '{{GOVERNING_LAW}}', label: locale === 'es' ? 'Ley aplicable' : 'Governing law' },
+                  { placeholder: '{{JURISDICTION_CITY}}', label: locale === 'es' ? 'Ciudad de jurisdicción' : 'Jurisdiction city' },
+                  { placeholder: '{{CURRENT_YEAR}}', label: locale === 'es' ? 'Año actual (automático)' : 'Current year (automatic)' },
+                  { placeholder: '{{LAST_UPDATED_DATE}}', label: locale === 'es' ? 'Fecha de última actualización (automático)' : 'Last updated date (automatic)' },
+                ].map(({ placeholder, label }) => (
+                  <div key={placeholder} className="flex items-center gap-2">
+                    <code className="bg-blue-100 text-blue-900 px-1.5 py-0.5 rounded text-xs font-mono whitespace-nowrap">
+                      {placeholder}
+                    </code>
+                    <span className="text-blue-700 text-xs truncate">{label}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  // List view
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold font-heading">
+            {locale === 'es' ? 'Páginas Legales' : 'Legal Pages'}
+          </h1>
+          <p className="text-gray-500 text-sm mt-1">
+            {locale === 'es' 
+              ? 'Administra el contenido de las páginas legales del sitio.'
+              : 'Manage the content of the site\'s legal pages.'
+            }
+          </p>
+        </div>
+        {pages.length === 0 && (
+          <Button
+            onClick={handleSeed}
+            isLoading={seeding}
+            variant="outline"
+          >
+            <ArrowPathIcon className="w-4 h-4 mr-2" />
+            {locale === 'es' ? 'Importar desde archivos' : 'Import from files'}
+          </Button>
+        )}
+      </div>
+
+      {pages.length === 0 ? (
+        <Card>
+          <div className="p-12 text-center">
+            <DocumentTextIcon className="w-12 h-12 mx-auto text-gray-400 mb-4" />
+            <h3 className="text-lg font-medium mb-2">
+              {locale === 'es' ? 'No hay páginas legales' : 'No legal pages found'}
+            </h3>
+            <p className="text-gray-500 mb-4">
+              {locale === 'es'
+                ? 'Haz clic en "Importar desde archivos" para cargar las páginas legales existentes.'
+                : 'Click "Import from files" to load existing legal pages.'
+              }
+            </p>
+            <Button onClick={handleSeed} isLoading={seeding}>
+              <ArrowPathIcon className="w-4 h-4 mr-2" />
+              {locale === 'es' ? 'Importar Páginas' : 'Import Pages'}
+            </Button>
+          </div>
+        </Card>
+      ) : (
+        <Card>
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-gray-50 border-b border-gray-200">
+                <tr>
+                  <th className="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    {locale === 'es' ? 'Página' : 'Page'}
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Slug
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    {locale === 'es' ? 'Idiomas' : 'Languages'}
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    {locale === 'es' ? 'Última actualización' : 'Last Updated'}
+                  </th>
+                  <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    {locale === 'es' ? 'Acciones' : 'Actions'}
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200">
+                {pages.map((page) => (
+                  <tr key={page.id} className="hover:bg-gray-50">
+                    <td className="px-6 py-4">
+                      <div>
+                        <p className="font-medium">{page.title}</p>
+                        {page.titleEs && (
+                          <p className="text-sm text-gray-500">{page.titleEs}</p>
+                        )}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4">
+                      <code className="bg-gray-100 px-2 py-1 rounded text-sm">
+                        {page.slug}
+                      </code>
+                    </td>
+                    <td className="px-6 py-4">
+                      <div className="flex gap-2">
+                        <span className={clsx(
+                          'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium',
+                          page.hasEnglish 
+                            ? 'bg-green-100 text-green-800' 
+                            : 'bg-gray-100 text-gray-500'
+                        )}>
+                          EN {page.hasEnglish ? '✓' : '—'}
+                        </span>
+                        <span className={clsx(
+                          'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium',
+                          page.hasSpanish 
+                            ? 'bg-green-100 text-green-800' 
+                            : 'bg-gray-100 text-gray-500'
+                        )}>
+                          ES {page.hasSpanish ? '✓' : '—'}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-gray-500">
+                      {formatDate(page.updatedAt)}
+                    </td>
+                    <td className="px-6 py-4 text-right">
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => handleEdit(page)}
+                      >
+                        <PencilSquareIcon className="w-4 h-4 mr-1" />
+                        {locale === 'es' ? 'Editar' : 'Edit'}
+                      </Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}

frontend/src/app/admin/page.tsx

@@ -35,6 +35,7 @@ export default function AdminDashboardPage() {
       day: 'numeric',
       hour: '2-digit',
       minute: '2-digit',
+      timeZone: 'America/Asuncion',
     });
   };
 
@@ -113,12 +114,12 @@ export default function AdminDashboardPage() {
             {/* Low capacity warnings */}
             {data?.upcomingEvents
               .filter(event => {
-                const availableSeats = event.availableSeats ?? (event.capacity - (event.bookedCount || 0));
+                const spotsLeft = Math.max(0, event.capacity - (event.bookedCount || 0));
                 const percentFull = ((event.bookedCount || 0) / event.capacity) * 100;
-                return percentFull >= 80 && availableSeats > 0;
+                return percentFull >= 80 && spotsLeft > 0;
               })
               .map(event => {
-                const availableSeats = event.availableSeats ?? (event.capacity - (event.bookedCount || 0));
+                const spotsLeft = Math.max(0, event.capacity - (event.bookedCount || 0));
                 const percentFull = Math.round(((event.bookedCount || 0) / event.capacity) * 100);
                 return (
                   <Link 
@@ -130,7 +131,7 @@ export default function AdminDashboardPage() {
                       <ExclamationTriangleIcon className="w-5 h-5 text-orange-600" />
                       <div>
                         <span className="text-sm font-medium">{event.title}</span>
-                        <p className="text-xs text-gray-500">Only {availableSeats} spots left ({percentFull}% full)</p>
+                        <p className="text-xs text-gray-500">Only {spotsLeft} spots left ({percentFull}% full)</p>
                       </div>
                     </div>
                     <span className="badge badge-warning">Low capacity</span>
@@ -140,7 +141,7 @@ export default function AdminDashboardPage() {
             
             {/* Sold out events */}
             {data?.upcomingEvents
-              .filter(event => (event.availableSeats ?? (event.capacity - (event.bookedCount || 0))) === 0)
+              .filter(event => Math.max(0, event.capacity - (event.bookedCount || 0)) === 0)
               .map(event => (
                 <Link 
                   key={event.id}

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

@@ -6,6 +6,7 @@ import { paymentsApi, adminApi, eventsApi, PaymentWithDetails, Event, ExportedPa
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
+import { BottomSheet, MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
 import { 
   CheckCircleIcon, 
   ArrowPathIcon, 
@@ -19,8 +20,13 @@ import {
   BanknotesIcon,
   BuildingLibraryIcon,
   CreditCardIcon,
+  EnvelopeIcon,
+  FunnelIcon,
+  MagnifyingGlassIcon,
+  XMarkIcon,
 } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
+import clsx from 'clsx';
 
 type Tab = 'pending_approval' | 'all';
 
@@ -33,11 +39,16 @@ export default function AdminPaymentsPage() {
   const [activeTab, setActiveTab] = useState<Tab>('pending_approval');
   const [statusFilter, setStatusFilter] = useState<string>('');
   const [providerFilter, setProviderFilter] = useState<string>('');
+  const [eventFilter, setEventFilter] = useState<string[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [mobileFilterOpen, setMobileFilterOpen] = useState(false);
   
   // Modal state
   const [selectedPayment, setSelectedPayment] = useState<PaymentWithDetails | null>(null);
   const [noteText, setNoteText] = useState('');
   const [processing, setProcessing] = useState(false);
+  const [sendEmail, setSendEmail] = useState(true);
+  const [sendingReminder, setSendingReminder] = useState(false);
   
   // Export state
   const [showExportModal, setShowExportModal] = useState(false);
@@ -51,7 +62,7 @@ export default function AdminPaymentsPage() {
 
   useEffect(() => {
     loadData();
-  }, [statusFilter, providerFilter]);
+  }, [statusFilter, providerFilter, eventFilter]);
 
   const loadData = async () => {
     try {
@@ -60,7 +71,8 @@ export default function AdminPaymentsPage() {
         paymentsApi.getPendingApproval(),
         paymentsApi.getAll({ 
           status: statusFilter || undefined, 
-          provider: providerFilter || undefined 
+          provider: providerFilter || undefined,
+          eventIds: eventFilter.length > 0 ? eventFilter : undefined,
         }),
         eventsApi.getAll(),
       ]);
@@ -77,10 +89,11 @@ export default function AdminPaymentsPage() {
   const handleApprove = async (payment: PaymentWithDetails) => {
     setProcessing(true);
     try {
-      await paymentsApi.approve(payment.id, noteText);
+      await paymentsApi.approve(payment.id, noteText, sendEmail);
       toast.success(locale === 'es' ? 'Pago aprobado' : 'Payment approved');
       setSelectedPayment(null);
       setNoteText('');
+      setSendEmail(true);
       loadData();
     } catch (error: any) {
       toast.error(error.message || 'Failed to approve payment');
@@ -92,10 +105,11 @@ export default function AdminPaymentsPage() {
   const handleReject = async (payment: PaymentWithDetails) => {
     setProcessing(true);
     try {
-      await paymentsApi.reject(payment.id, noteText);
+      await paymentsApi.reject(payment.id, noteText, sendEmail);
       toast.success(locale === 'es' ? 'Pago rechazado' : 'Payment rejected');
       setSelectedPayment(null);
       setNoteText('');
+      setSendEmail(true);
       loadData();
     } catch (error: any) {
       toast.error(error.message || 'Failed to reject payment');
@@ -104,6 +118,24 @@ export default function AdminPaymentsPage() {
     }
   };
 
+  const handleSendReminder = async (payment: PaymentWithDetails) => {
+    setSendingReminder(true);
+    try {
+      const result = await paymentsApi.sendReminder(payment.id);
+      toast.success(locale === 'es' ? 'Recordatorio enviado' : 'Reminder sent');
+      // Update the selected payment with the new reminderSentAt timestamp
+      if (result.reminderSentAt) {
+        setSelectedPayment({ ...payment, reminderSentAt: result.reminderSentAt });
+      }
+      // Also refresh the data to update the lists
+      loadData();
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to send reminder');
+    } finally {
+      setSendingReminder(false);
+    }
+  };
+
   const handleConfirmPayment = async (id: string) => {
     try {
       await paymentsApi.approve(id);
@@ -176,6 +208,7 @@ export default function AdminPaymentsPage() {
       day: 'numeric',
       hour: '2-digit',
       minute: '2-digit',
+      timeZone: 'America/Asuncion',
     });
   };
 
@@ -230,13 +263,69 @@ export default function AdminPaymentsPage() {
     return labels[provider] || provider;
   };
 
-  // Calculate totals
+  // Helper to get booking info for a payment (ticket count and total)
+  const getBookingInfo = (payment: PaymentWithDetails) => {
+    if (!payment.ticket?.bookingId) {
+      return { ticketCount: 1, bookingTotal: payment.amount };
+    }
+    
+    // Count all payments with the same bookingId
+    const bookingPayments = payments.filter(
+      p => p.ticket?.bookingId === payment.ticket?.bookingId
+    );
+    
+    return {
+      ticketCount: bookingPayments.length,
+      bookingTotal: bookingPayments.reduce((sum, p) => sum + Number(p.amount), 0),
+    };
+  };
+
+  // Get booking info for pending approval payments
+  const getPendingBookingInfo = (payment: PaymentWithDetails) => {
+    if (!payment.ticket?.bookingId) {
+      return { ticketCount: 1, bookingTotal: payment.amount };
+    }
+    
+    // Count all pending payments with the same bookingId
+    const bookingPayments = pendingApprovalPayments.filter(
+      p => p.ticket?.bookingId === payment.ticket?.bookingId
+    );
+    
+    return {
+      ticketCount: bookingPayments.length,
+      bookingTotal: bookingPayments.reduce((sum, p) => sum + Number(p.amount), 0),
+    };
+  };
+
+  // Calculate totals (sum all individual payment amounts)
   const totalPending = payments
     .filter(p => p.status === 'pending' || p.status === 'pending_approval')
-    .reduce((sum, p) => sum + p.amount, 0);
+    .reduce((sum, p) => sum + Number(p.amount), 0);
   const totalPaid = payments
     .filter(p => p.status === 'paid')
-    .reduce((sum, p) => sum + p.amount, 0);
+    .reduce((sum, p) => sum + Number(p.amount), 0);
+  
+  // Get unique booking count (for summary display)
+  const getUniqueBookingsCount = (paymentsList: PaymentWithDetails[]) => {
+    const seen = new Set<string>();
+    let count = 0;
+    paymentsList.forEach(p => {
+      const bookingKey = p.ticket?.bookingId || p.id;
+      if (!seen.has(bookingKey)) {
+        seen.add(bookingKey);
+        count++;
+      }
+    });
+    return count;
+  };
+  
+  const pendingBookingsCount = getUniqueBookingsCount(
+    payments.filter(p => p.status === 'pending' || p.status === 'pending_approval')
+  );
+  const paidBookingsCount = getUniqueBookingsCount(
+    payments.filter(p => p.status === 'paid')
+  );
+  const pendingApprovalBookingsCount = getUniqueBookingsCount(pendingApprovalPayments);
 
   if (loading) {
     return (
@@ -249,27 +338,44 @@ export default function AdminPaymentsPage() {
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <h1 className="text-2xl font-bold text-primary-dark">{t('admin.payments.title')}</h1>
+        <h1 className="text-xl md:text-2xl font-bold text-primary-dark">{t('admin.payments.title')}</h1>
-        <Button onClick={() => setShowExportModal(true)}>
+        <Button onClick={() => setShowExportModal(true)} size="sm" className="min-h-[44px] md:min-h-0">
-          <DocumentArrowDownIcon className="w-5 h-5 mr-2" />
+          <DocumentArrowDownIcon className="w-4 h-4 mr-1.5" />
-          {locale === 'es' ? 'Exportar Datos' : 'Export Data'}
+          <span className="hidden md:inline">{locale === 'es' ? 'Exportar Datos' : 'Export Data'}</span>
+          <span className="md:hidden">{locale === 'es' ? 'Exportar' : 'Export'}</span>
         </Button>
       </div>
 
       {/* Approval Detail Modal */}
-      {selectedPayment && (
+      {selectedPayment && (() => {
-        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+        const modalBookingInfo = getBookingInfo(selectedPayment);
-          <Card className="w-full max-w-lg p-6">
+        return (
-            <h2 className="text-xl font-bold mb-4">
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
+          <Card className="w-full md:max-w-lg max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card">
+            <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray flex-shrink-0">
+              <h2 className="text-base font-bold">
                 {locale === 'es' ? 'Verificar Pago' : 'Verify Payment'}
               </h2>
+              <button onClick={() => { setSelectedPayment(null); setNoteText(''); setSendEmail(true); }}
+                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
+                <XMarkIcon className="w-5 h-5" />
+              </button>
+            </div>
+            <div className="p-4 overflow-y-auto flex-1 min-h-0">
             
             <div className="space-y-4 mb-6">
               <div className="bg-gray-50 rounded-lg p-4">
                 <div className="grid grid-cols-2 gap-4 text-sm">
                   <div>
-                    <p className="text-gray-500">{locale === 'es' ? 'Monto' : 'Amount'}</p>
+                    <p className="text-gray-500">{locale === 'es' ? 'Monto Total' : 'Total Amount'}</p>
-                    <p className="font-bold text-lg">{formatCurrency(selectedPayment.amount, selectedPayment.currency)}</p>
+                    <p className="font-bold text-lg">{formatCurrency(modalBookingInfo.bookingTotal, selectedPayment.currency)}</p>
+                    {modalBookingInfo.ticketCount > 1 && (
+                      <div className="mt-2 p-2 bg-purple-50 rounded">
+                        <p className="text-xs text-purple-700">
+                          📦 {modalBookingInfo.ticketCount} tickets × {formatCurrency(selectedPayment.amount, selectedPayment.currency)}
+                        </p>
+                      </div>
+                    )}
                   </div>
                   <div>
                     <p className="text-gray-500">{locale === 'es' ? 'Método' : 'Method'}</p>
@@ -309,6 +415,22 @@ export default function AdminPaymentsPage() {
                 </div>
               )}
               
+              {selectedPayment.reminderSentAt && (
+                <div className="flex items-center gap-2 text-sm text-amber-600">
+                  <EnvelopeIcon className="w-4 h-4" />
+                  {locale === 'es' ? 'Recordatorio enviado:' : 'Reminder sent:'} {formatDate(selectedPayment.reminderSentAt)}
+                </div>
+              )}
+              
+              {selectedPayment.payerName && (
+                <div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
+                  <p className="text-sm text-amber-800 font-medium">
+                    {locale === 'es' ? '⚠️ Pagado por otra persona:' : '⚠️ Paid by someone else:'}
+                  </p>
+                  <p className="text-amber-900 font-bold">{selectedPayment.payerName}</p>
+                </div>
+              )}
+              
               <div>
                 <label className="block text-sm font-medium mb-1">
                   {locale === 'es' ? 'Nota interna (opcional)' : 'Internal note (optional)'}
@@ -321,43 +443,57 @@ export default function AdminPaymentsPage() {
                   placeholder={locale === 'es' ? 'Agregar nota...' : 'Add a note...'}
                 />
               </div>
+              
+              <div className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  id="sendEmail"
+                  checked={sendEmail}
+                  onChange={(e) => setSendEmail(e.target.checked)}
+                  className="w-4 h-4 text-primary-yellow border-gray-300 rounded focus:ring-primary-yellow"
+                />
+                <label htmlFor="sendEmail" className="text-sm text-gray-700">
+                  {locale === 'es' ? 'Enviar email de notificación' : 'Send notification email'}
+                </label>
+              </div>
             </div>
             
             <div className="flex gap-3">
-              <Button
+              <Button onClick={() => handleApprove(selectedPayment)} isLoading={processing} className="flex-1 min-h-[44px]">
-                onClick={() => handleApprove(selectedPayment)}
-                isLoading={processing}
-                className="flex-1"
-              >
                 <CheckCircleIcon className="w-5 h-5 mr-2" />
                 {locale === 'es' ? 'Aprobar' : 'Approve'}
               </Button>
-              <Button
+              <Button variant="outline" onClick={() => handleReject(selectedPayment)} isLoading={processing}
-                variant="outline"
+                className="flex-1 border-red-300 text-red-600 hover:bg-red-50 min-h-[44px]">
-                onClick={() => handleReject(selectedPayment)}
-                isLoading={processing}
-                className="flex-1 border-red-300 text-red-600 hover:bg-red-50"
-              >
                 <XCircleIcon className="w-5 h-5 mr-2" />
                 {locale === 'es' ? 'Rechazar' : 'Reject'}
               </Button>
             </div>
             
-            <button
+            <div className="pt-2 border-t">
-              onClick={() => { setSelectedPayment(null); setNoteText(''); }}
+              <Button variant="outline" onClick={() => handleSendReminder(selectedPayment)} isLoading={sendingReminder} className="w-full min-h-[44px]">
-              className="w-full mt-3 py-2 text-sm text-gray-500 hover:text-gray-700"
+                <EnvelopeIcon className="w-5 h-5 mr-2" />
-            >
+                {locale === 'es' ? 'Enviar recordatorio' : 'Send reminder'}
-              {locale === 'es' ? 'Cancelar' : 'Cancel'}
+              </Button>
-            </button>
+            </div>
+            </div>
           </Card>
         </div>
-      )}
+        );
+      })()}
 
       {/* Export Modal */}
       {showExportModal && (
-        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
-          <Card className="w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6">
+          <Card className="w-full md:max-w-2xl max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card">
-            <h2 className="text-xl font-bold mb-6">{locale === 'es' ? 'Exportar Datos Financieros' : 'Export Financial Data'}</h2>
+            <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray flex-shrink-0">
+              <h2 className="text-base font-bold">{locale === 'es' ? 'Exportar Datos Financieros' : 'Export Financial Data'}</h2>
+              <button onClick={() => { setShowExportModal(false); setExportData(null); }}
+                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
+                <XMarkIcon className="w-5 h-5" />
+              </button>
+            </div>
+            <div className="p-4 overflow-y-auto flex-1 min-h-0">
             
             {!exportData ? (
               <div className="space-y-4">
@@ -391,10 +527,10 @@ export default function AdminPaymentsPage() {
                 </div>
                 
                 <div className="flex gap-3 pt-4">
-                  <Button onClick={handleExport} isLoading={exporting}>
+                  <Button onClick={handleExport} isLoading={exporting} className="flex-1 min-h-[44px]">
                     {locale === 'es' ? 'Generar Reporte' : 'Generate Report'}
                   </Button>
-                  <Button variant="outline" onClick={() => setShowExportModal(false)}>
+                  <Button variant="outline" onClick={() => setShowExportModal(false)} className="flex-1 min-h-[44px]">
                     {locale === 'es' ? 'Cancelar' : 'Cancel'}
                   </Button>
                 </div>
@@ -454,20 +590,21 @@ export default function AdminPaymentsPage() {
                   </div>
                 </div>
                 
-                <div className="flex gap-3">
+                <div className="flex flex-wrap gap-3">
-                  <Button onClick={downloadCSV}>
+                  <Button onClick={downloadCSV} className="min-h-[44px]">
                     <ArrowDownTrayIcon className="w-4 h-4 mr-2" />
                     {locale === 'es' ? 'Descargar CSV' : 'Download CSV'}
                   </Button>
-                  <Button variant="outline" onClick={() => setExportData(null)}>
+                  <Button variant="outline" onClick={() => setExportData(null)} className="min-h-[44px]">
                     {locale === 'es' ? 'Nuevo Reporte' : 'New Report'}
                   </Button>
-                  <Button variant="outline" onClick={() => { setShowExportModal(false); setExportData(null); }}>
+                  <Button variant="outline" onClick={() => { setShowExportModal(false); setExportData(null); }} className="min-h-[44px]">
                     {locale === 'es' ? 'Cerrar' : 'Close'}
                   </Button>
                 </div>
               </div>
             )}
+            </div>
           </Card>
         </div>
       )}
@@ -481,7 +618,10 @@ export default function AdminPaymentsPage() {
             </div>
             <div>
               <p className="text-sm text-gray-500">{locale === 'es' ? 'Pendientes de Aprobación' : 'Pending Approval'}</p>
-              <p className="text-xl font-bold text-yellow-600">{pendingApprovalPayments.length}</p>
+              <p className="text-xl font-bold text-yellow-600">{pendingApprovalBookingsCount}</p>
+              {pendingApprovalPayments.length !== pendingApprovalBookingsCount && (
+                <p className="text-xs text-gray-400">({pendingApprovalPayments.length} tickets)</p>
+              )}
             </div>
           </div>
         </Card>
@@ -493,6 +633,7 @@ export default function AdminPaymentsPage() {
             <div>
               <p className="text-sm text-gray-500">{locale === 'es' ? 'Total Pendiente' : 'Total Pending'}</p>
               <p className="text-xl font-bold">{formatCurrency(totalPending, 'PYG')}</p>
+              <p className="text-xs text-gray-400">{pendingBookingsCount} {locale === 'es' ? 'reservas' : 'bookings'}</p>
             </div>
           </div>
         </Card>
@@ -504,6 +645,7 @@ export default function AdminPaymentsPage() {
             <div>
               <p className="text-sm text-gray-500">{locale === 'es' ? 'Total Pagado' : 'Total Paid'}</p>
               <p className="text-xl font-bold text-green-600">{formatCurrency(totalPaid, 'PYG')}</p>
+              <p className="text-xs text-gray-400">{paidBookingsCount} {locale === 'es' ? 'reservas' : 'bookings'}</p>
             </div>
           </div>
         </Card>
@@ -513,7 +655,7 @@ export default function AdminPaymentsPage() {
               <BoltIcon className="w-5 h-5 text-blue-600" />
             </div>
             <div>
-              <p className="text-sm text-gray-500">{locale === 'es' ? 'Total Pagos' : 'Total Payments'}</p>
+              <p className="text-sm text-gray-500">{locale === 'es' ? 'Total Tickets' : 'Total Tickets'}</p>
               <p className="text-xl font-bold">{payments.length}</p>
             </div>
           </div>
@@ -521,31 +663,19 @@ export default function AdminPaymentsPage() {
       </div>
 
       {/* Tabs */}
-      <div className="border-b mb-6">
+      <div className="border-b mb-6 overflow-x-auto scrollbar-hide">
-        <nav className="flex gap-4">
+        <nav className="flex gap-4 min-w-max">
-          <button
+          <button onClick={() => setActiveTab('pending_approval')}
-            onClick={() => setActiveTab('pending_approval')}
+            className={clsx('pb-3 px-1 text-sm font-medium border-b-2 transition-colors whitespace-nowrap min-h-[44px]',
-            className={`pb-3 px-1 text-sm font-medium border-b-2 transition-colors ${
+              activeTab === 'pending_approval' ? 'border-primary-yellow text-primary-dark' : 'border-transparent text-gray-500 hover:text-gray-700')}>
-              activeTab === 'pending_approval'
+            {locale === 'es' ? 'Pendientes' : 'Pending Approval'}
-                ? 'border-primary-yellow text-primary-dark'
-                : 'border-transparent text-gray-500 hover:text-gray-700'
-            }`}
-          >
-            {locale === 'es' ? 'Pendientes de Aprobación' : 'Pending Approval'}
             {pendingApprovalPayments.length > 0 && (
-              <span className="ml-2 bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded-full text-xs">
+              <span className="ml-2 bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded-full text-xs">{pendingApprovalPayments.length}</span>
-                {pendingApprovalPayments.length}
-              </span>
             )}
           </button>
-          <button
+          <button onClick={() => setActiveTab('all')}
-            onClick={() => setActiveTab('all')}
+            className={clsx('pb-3 px-1 text-sm font-medium border-b-2 transition-colors whitespace-nowrap min-h-[44px]',
-            className={`pb-3 px-1 text-sm font-medium border-b-2 transition-colors ${
+              activeTab === 'all' ? 'border-primary-yellow text-primary-dark' : 'border-transparent text-gray-500 hover:text-gray-700')}>
-              activeTab === 'all'
-                ? 'border-primary-yellow text-primary-dark'
-                : 'border-transparent text-gray-500 hover:text-gray-700'
-            }`}
-          >
             {locale === 'es' ? 'Todos los Pagos' : 'All Payments'}
           </button>
         </nav>
@@ -565,7 +695,9 @@ export default function AdminPaymentsPage() {
             </Card>
           ) : (
             <div className="space-y-4">
-              {pendingApprovalPayments.map((payment) => (
+              {pendingApprovalPayments.map((payment) => {
+                const bookingInfo = getPendingBookingInfo(payment);
+                return (
                   <Card key={payment.id} className="p-4">
                     <div className="flex items-start justify-between">
                       <div className="flex items-start gap-4">
@@ -574,12 +706,18 @@ export default function AdminPaymentsPage() {
                         </div>
                         <div>
                           <div className="flex items-center gap-2 mb-1">
-                          <p className="font-bold text-lg">{formatCurrency(payment.amount, payment.currency)}</p>
+                            <p className="font-bold text-lg">{formatCurrency(bookingInfo.bookingTotal, payment.currency)}</p>
+                            {bookingInfo.ticketCount > 1 && (
+                              <span className="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full">
+                                📦 {bookingInfo.ticketCount} tickets × {formatCurrency(payment.amount, payment.currency)}
+                              </span>
+                            )}
                             {getStatusBadge(payment.status)}
                           </div>
                           {payment.ticket && (
                             <p className="text-sm font-medium">
                               {payment.ticket.attendeeFirstName} {payment.ticket.attendeeLastName}
+                              {bookingInfo.ticketCount > 1 && <span className="text-gray-400 font-normal"> +{bookingInfo.ticketCount - 1} {locale === 'es' ? 'más' : 'more'}</span>}
                             </p>
                           )}
                           {payment.event && (
@@ -597,32 +735,64 @@ export default function AdminPaymentsPage() {
                               </span>
                             )}
                           </div>
+                          {payment.payerName && (
+                            <p className="text-xs text-amber-600 mt-1 font-medium">
+                              ⚠️ {locale === 'es' ? 'Pago por:' : 'Paid by:'} {payment.payerName}
+                            </p>
+                          )}
                         </div>
                       </div>
-                    <Button onClick={() => setSelectedPayment(payment)}>
+                      <Button onClick={() => setSelectedPayment(payment)} size="sm" className="min-h-[44px] md:min-h-0 flex-shrink-0">
                         {locale === 'es' ? 'Revisar' : 'Review'}
                       </Button>
                     </div>
                   </Card>
-              ))}
+                );
+              })}
             </div>
           )}
         </>
       )}
 
       {/* All Payments Tab */}
-      {activeTab === 'all' && (
+      {activeTab === 'all' && (() => {
+        const q = searchQuery.trim().toLowerCase();
+        const filteredPayments = q
+          ? payments.filter((p) => {
+              const name = `${p.ticket?.attendeeFirstName || ''} ${p.ticket?.attendeeLastName || ''}`.trim().toLowerCase();
+              const email = (p.ticket?.attendeeEmail || '').toLowerCase();
+              const phone = (p.ticket?.attendeePhone || '').toLowerCase();
+              const eventTitle = (p.event?.title || '').toLowerCase();
+              const payerName = (p.payerName || '').toLowerCase();
+              const reference = (p.reference || '').toLowerCase();
+              const id = (p.id || '').toLowerCase();
+              return name.includes(q) || email.includes(q) || phone.includes(q) ||
+                eventTitle.includes(q) || payerName.includes(q) || reference.includes(q) || id.includes(q);
+            })
+          : payments;
+
+        return (
         <>
-          {/* Filters */}
+          {/* Desktop Filters */}
-          <Card className="p-4 mb-6">
+          <Card className="p-4 mb-6 hidden md:block">
             <div className="flex flex-wrap gap-4">
+              <div className="flex-1 min-w-[200px]">
+                <label className="block text-sm font-medium mb-1">{locale === 'es' ? 'Buscar' : 'Search'}</label>
+                <div className="relative">
+                  <MagnifyingGlassIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+                  <input
+                    type="text"
+                    placeholder={locale === 'es' ? 'Nombre, email, evento...' : 'Name, email, event...'}
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="w-full pl-9 pr-3 py-2 rounded-btn border border-secondary-light-gray text-sm focus:outline-none focus:ring-2 focus:ring-primary-yellow min-w-[200px]"
+                  />
+                </div>
+              </div>
               <div>
                 <label className="block text-sm font-medium mb-1">Status</label>
-                <select
+                <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}
-                  value={statusFilter}
+                  className="px-4 py-2 rounded-btn border border-secondary-light-gray min-w-[150px] text-sm">
-                  onChange={(e) => setStatusFilter(e.target.value)}
-                  className="px-4 py-2 rounded-btn border border-secondary-light-gray min-w-[150px]"
-                >
                   <option value="">{locale === 'es' ? 'Todos los Estados' : 'All Statuses'}</option>
                   <option value="pending">{locale === 'es' ? 'Pendiente' : 'Pending'}</option>
                   <option value="pending_approval">{locale === 'es' ? 'Esperando Aprobación' : 'Pending Approval'}</option>
@@ -633,112 +803,250 @@ export default function AdminPaymentsPage() {
               </div>
               <div>
                 <label className="block text-sm font-medium mb-1">{locale === 'es' ? 'Método' : 'Provider'}</label>
-                <select
+                <select value={providerFilter} onChange={(e) => setProviderFilter(e.target.value)}
-                  value={providerFilter}
+                  className="px-4 py-2 rounded-btn border border-secondary-light-gray min-w-[150px] text-sm">
-                  onChange={(e) => setProviderFilter(e.target.value)}
-                  className="px-4 py-2 rounded-btn border border-secondary-light-gray min-w-[150px]"
-                >
                   <option value="">{locale === 'es' ? 'Todos los Métodos' : 'All Providers'}</option>
                   <option value="lightning">Lightning</option>
                   <option value="cash">{locale === 'es' ? 'Efectivo' : 'Cash'}</option>
-                  <option value="bank_transfer">{locale === 'es' ? 'Transferencia Bancaria' : 'Bank Transfer'}</option>
+                  <option value="bank_transfer">{locale === 'es' ? 'Transferencia' : 'Bank Transfer'}</option>
                   <option value="tpago">TPago</option>
                 </select>
               </div>
+              <div className="flex-1 min-w-[200px]">
+                <label className="block text-sm font-medium mb-1">{locale === 'es' ? 'Evento(s)' : 'Event(s)'}</label>
+                <select
+                  value=""
+                  onChange={(e) => {
+                    const id = e.target.value;
+                    if (id && !eventFilter.includes(id)) setEventFilter([...eventFilter, id]);
+                    e.target.value = '';
+                  }}
+                  className="px-4 py-2 rounded-btn border border-secondary-light-gray w-full text-sm"
+                >
+                  <option value="">{locale === 'es' ? 'Agregar evento...' : 'Add event...'}</option>
+                  {events.filter(e => !eventFilter.includes(e.id)).map((event) => (
+                    <option key={event.id} value={event.id}>{event.title}</option>
+                  ))}
+                </select>
+                {eventFilter.length > 0 && (
+                  <div className="flex flex-wrap gap-1.5 mt-2">
+                    {eventFilter.map((id) => {
+                      const ev = events.find(e => e.id === id);
+                      return (
+                        <span key={id} className="inline-flex items-center gap-1 px-2 py-0.5 bg-primary-yellow/20 rounded text-xs">
+                          {ev?.title || id}
+                          <button type="button" onClick={() => setEventFilter(eventFilter.filter(x => x !== id))} className="hover:text-red-600">×</button>
+                        </span>
+                      );
+                    })}
+                    <button type="button" onClick={() => setEventFilter([])} className="text-xs text-gray-500 hover:text-primary-dark">
+                      {locale === 'es' ? 'Limpiar' : 'Clear'}
+                    </button>
+                  </div>
+                )}
+              </div>
             </div>
           </Card>
 
-          {/* Payments Table */}
+          {/* Mobile Search & Filter Toolbar */}
-          <Card className="overflow-hidden">
+          <div className="md:hidden mb-4 space-y-2">
+            <div className="relative">
+              <MagnifyingGlassIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+              <input
+                type="text"
+                placeholder={locale === 'es' ? 'Nombre, email, evento...' : 'Name, email, event...'}
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-9 pr-3 py-2.5 rounded-btn border border-secondary-light-gray text-sm focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <button onClick={() => setMobileFilterOpen(true)}
+                className={clsx('flex items-center gap-1.5 px-3 py-2 rounded-btn border text-sm min-h-[44px]',
+                  (statusFilter || providerFilter || eventFilter.length > 0) ? 'border-primary-yellow bg-yellow-50 text-primary-dark' : 'border-secondary-light-gray text-gray-600')}>
+                <FunnelIcon className="w-4 h-4" /> Filters
+              </button>
+              {(statusFilter || providerFilter || eventFilter.length > 0 || searchQuery) && (
+                <button onClick={() => { setStatusFilter(''); setProviderFilter(''); setEventFilter([]); setSearchQuery(''); }}
+                  className="text-xs text-primary-yellow min-h-[44px] flex items-center">Clear</button>
+              )}
+            </div>
+          </div>
+
+          {/* Desktop: Table */}
+          <Card className="overflow-hidden hidden md:block">
             <div className="overflow-x-auto">
               <table className="w-full">
                 <thead className="bg-secondary-gray">
                   <tr>
-                    <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">{locale === 'es' ? 'Asistente' : 'Attendee'}</th>
+                    <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">{locale === 'es' ? 'Asistente' : 'Attendee'}</th>
-                    <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">{locale === 'es' ? 'Evento' : 'Event'}</th>
+                    <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">{locale === 'es' ? 'Evento' : 'Event'}</th>
-                    <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">{locale === 'es' ? 'Monto' : 'Amount'}</th>
+                    <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">{locale === 'es' ? 'Monto' : 'Amount'}</th>
-                    <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">{locale === 'es' ? 'Método' : 'Method'}</th>
+                    <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">{locale === 'es' ? 'Método' : 'Method'}</th>
-                    <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">{locale === 'es' ? 'Fecha' : 'Date'}</th>
+                    <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                    <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">Status</th>
+                    <th className="text-right px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">{locale === 'es' ? 'Acciones' : 'Actions'}</th>
-                    <th className="text-right px-6 py-3 text-sm font-medium text-gray-600">{locale === 'es' ? 'Acciones' : 'Actions'}</th>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-secondary-light-gray">
-                  {payments.length === 0 ? (
+                  {filteredPayments.length === 0 ? (
-                    <tr>
+                    <tr><td colSpan={6} className="px-4 py-12 text-center text-gray-500 text-sm">{locale === 'es' ? 'No se encontraron pagos' : 'No payments found'}</td></tr>
-                      <td colSpan={7} className="px-6 py-12 text-center text-gray-500">
-                        {locale === 'es' ? 'No se encontraron pagos' : 'No payments found'}
-                      </td>
-                    </tr>
                   ) : (
-                    payments.map((payment) => (
+                    filteredPayments.map((payment) => {
+                      const bookingInfo = getBookingInfo(payment);
+                      return (
                         <tr key={payment.id} className="hover:bg-gray-50">
-                        <td className="px-6 py-4">
+                          <td className="px-4 py-3">
                             {payment.ticket ? (
                               <div>
-                              <p className="font-medium text-sm">
+                                <p className="font-medium text-sm">{payment.ticket.attendeeFirstName} {payment.ticket.attendeeLastName}</p>
-                                {payment.ticket.attendeeFirstName} {payment.ticket.attendeeLastName}
+                                <p className="text-xs text-gray-500 truncate max-w-[180px]">{payment.ticket.attendeeEmail}</p>
-                              </p>
-                              <p className="text-xs text-gray-500">{payment.ticket.attendeeEmail}</p>
                               </div>
-                          ) : (
+                            ) : <span className="text-gray-400 text-sm">-</span>}
-                            <span className="text-gray-400 text-sm">-</span>
-                          )}
                           </td>
-                        <td className="px-6 py-4">
+                          <td className="px-4 py-3 text-sm truncate max-w-[150px]">{payment.event?.title || '-'}</td>
-                          {payment.event ? (
+                          <td className="px-4 py-3">
-                            <p className="text-sm">{payment.event.title}</p>
+                            <p className="font-medium text-sm">{formatCurrency(bookingInfo.bookingTotal, payment.currency)}</p>
-                          ) : (
+                            {bookingInfo.ticketCount > 1 && <p className="text-[10px] text-purple-600">{bookingInfo.ticketCount} tickets</p>}
-                            <span className="text-gray-400 text-sm">-</span>
-                          )}
                           </td>
-                        <td className="px-6 py-4 font-medium">
+                          <td className="px-4 py-3">
-                          {formatCurrency(payment.amount, payment.currency)}
+                            <div className="flex items-center gap-1.5 text-xs text-gray-600">
-                        </td>
+                              {getProviderIcon(payment.provider)} {getProviderLabel(payment.provider)}
-                        <td className="px-6 py-4">
-                          <div className="flex items-center gap-2 text-sm text-gray-600">
-                            {getProviderIcon(payment.provider)}
-                            {getProviderLabel(payment.provider)}
                             </div>
                           </td>
-                        <td className="px-6 py-4 text-sm text-gray-600">
+                          <td className="px-4 py-3">{getStatusBadge(payment.status)}</td>
-                          {formatDate(payment.createdAt)}
+                          <td className="px-4 py-3">
-                        </td>
+                            <div className="flex items-center justify-end gap-1">
-                        <td className="px-6 py-4">
-                          {getStatusBadge(payment.status)}
-                        </td>
-                        <td className="px-6 py-4">
-                          <div className="flex items-center justify-end gap-2">
                               {(payment.status === 'pending' || payment.status === 'pending_approval') && (
-                              <Button
+                                <Button size="sm" onClick={() => setSelectedPayment(payment)} className="text-xs px-2 py-1">
-                                size="sm"
-                                onClick={() => setSelectedPayment(payment)}
-                              >
-                                <CheckCircleIcon className="w-4 h-4 mr-1" />
                                   {locale === 'es' ? 'Revisar' : 'Review'}
                                 </Button>
                               )}
                               {payment.status === 'paid' && (
-                              <Button
+                                <Button size="sm" variant="outline" onClick={() => handleRefund(payment.id)} className="text-xs px-2 py-1">
-                                size="sm"
-                                variant="outline"
-                                onClick={() => handleRefund(payment.id)}
-                              >
-                                <ArrowPathIcon className="w-4 h-4 mr-1" />
                                   {t('admin.payments.refund')}
                                 </Button>
                               )}
                             </div>
                           </td>
                         </tr>
-                    ))
+                      );
+                    })
                   )}
                 </tbody>
               </table>
             </div>
           </Card>
-        </>
+          {(searchQuery || filteredPayments.length !== payments.length) && (
+            <p className="hidden md:block text-sm text-gray-500 mb-2">
+              {locale === 'es' ? 'Mostrando' : 'Showing'} {filteredPayments.length} {locale === 'es' ? 'de' : 'of'} {payments.length}
+            </p>
           )}
+
+          {/* Mobile: Card List */}
+          <div className="md:hidden space-y-2">
+            {filteredPayments.length === 0 ? (
+              <div className="text-center py-10 text-gray-500 text-sm">{locale === 'es' ? 'No se encontraron pagos' : 'No payments found'}</div>
+            ) : (
+              filteredPayments.map((payment) => {
+                const bookingInfo = getBookingInfo(payment);
+                return (
+                  <Card key={payment.id} className="p-3">
+                    <div className="flex items-start justify-between gap-2">
+                      <div className="min-w-0 flex-1">
+                        {payment.ticket ? (
+                          <p className="font-medium text-sm truncate">{payment.ticket.attendeeFirstName} {payment.ticket.attendeeLastName}</p>
+                        ) : <p className="text-sm text-gray-400">-</p>}
+                        <p className="text-xs text-gray-500 truncate">{payment.event?.title || '-'}</p>
+                      </div>
+                      <div className="flex items-center gap-1.5 flex-shrink-0">
+                        {getStatusBadge(payment.status)}
+                      </div>
+                    </div>
+                    <div className="mt-2 flex items-center gap-2 text-xs text-gray-500">
+                      <span className="font-medium text-gray-700">{formatCurrency(bookingInfo.bookingTotal, payment.currency)}</span>
+                      <span className="text-gray-300">|</span>
+                      <span className="flex items-center gap-1">{getProviderIcon(payment.provider)} {getProviderLabel(payment.provider)}</span>
+                      {bookingInfo.ticketCount > 1 && (
+                        <><span className="text-gray-300">|</span><span className="text-purple-600">{bookingInfo.ticketCount} tickets</span></>
+                      )}
+                    </div>
+                    <div className="flex items-center justify-between mt-2 pt-2 border-t border-gray-100">
+                      <p className="text-[10px] text-gray-400">{formatDate(payment.createdAt)}</p>
+                      <div className="flex items-center gap-1">
+                        {(payment.status === 'pending' || payment.status === 'pending_approval') && (
+                          <Button size="sm" onClick={() => setSelectedPayment(payment)} className="text-xs px-2.5 py-1.5 min-h-[36px]">
+                            {locale === 'es' ? 'Revisar' : 'Review'}
+                          </Button>
+                        )}
+                        {payment.status === 'paid' && (
+                          <Button size="sm" variant="outline" onClick={() => handleRefund(payment.id)} className="text-xs px-2.5 py-1.5 min-h-[36px]">
+                            {t('admin.payments.refund')}
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  </Card>
+                );
+              })
+            )}
+          </div>
+
+          {/* Mobile Filter BottomSheet */}
+          <BottomSheet open={mobileFilterOpen} onClose={() => setMobileFilterOpen(false)} title={locale === 'es' ? 'Filtros' : 'Filters'}>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">{locale === 'es' ? 'Evento(s)' : 'Event(s)'}</label>
+                <div className="max-h-40 overflow-y-auto border border-secondary-light-gray rounded-btn p-2 space-y-1">
+                  {events.map((event) => (
+                    <label key={event.id} className="flex items-center gap-2 py-1.5 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={eventFilter.includes(event.id)}
+                        onChange={(e) => {
+                          if (e.target.checked) setEventFilter([...eventFilter, event.id]);
+                          else setEventFilter(eventFilter.filter(id => id !== event.id));
+                        }}
+                        className="w-4 h-4 rounded border-gray-300 text-primary-yellow focus:ring-primary-yellow"
+                      />
+                      <span className="text-sm">{event.title}</span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
+                <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-btn border border-secondary-light-gray text-sm min-h-[44px]">
+                  <option value="">{locale === 'es' ? 'Todos los Estados' : 'All Statuses'}</option>
+                  <option value="pending">{locale === 'es' ? 'Pendiente' : 'Pending'}</option>
+                  <option value="pending_approval">{locale === 'es' ? 'Esperando Aprobación' : 'Pending Approval'}</option>
+                  <option value="paid">{locale === 'es' ? 'Pagado' : 'Paid'}</option>
+                  <option value="refunded">{locale === 'es' ? 'Reembolsado' : 'Refunded'}</option>
+                  <option value="failed">{locale === 'es' ? 'Fallido' : 'Failed'}</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">{locale === 'es' ? 'Método' : 'Provider'}</label>
+                <select value={providerFilter} onChange={(e) => setProviderFilter(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-btn border border-secondary-light-gray text-sm min-h-[44px]">
+                  <option value="">{locale === 'es' ? 'Todos los Métodos' : 'All Providers'}</option>
+                  <option value="lightning">Lightning</option>
+                  <option value="cash">{locale === 'es' ? 'Efectivo' : 'Cash'}</option>
+                  <option value="bank_transfer">{locale === 'es' ? 'Transferencia' : 'Bank Transfer'}</option>
+                  <option value="tpago">TPago</option>
+                </select>
+              </div>
+              <div className="flex gap-3 pt-2">
+                <Button variant="outline" onClick={() => { setStatusFilter(''); setProviderFilter(''); setEventFilter([]); setSearchQuery(''); setMobileFilterOpen(false); }} className="flex-1 min-h-[44px]">Clear</Button>
+                <Button onClick={() => setMobileFilterOpen(false)} className="flex-1 min-h-[44px]">Apply</Button>
+              </div>
+            </div>
+          </BottomSheet>
+        </>
+        );
+      })()}
+
+      <AdminMobileStyles />
     </div>
   );
 }

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

@@ -1,8 +1,9 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import Link from 'next/link';
 import { useLanguage } from '@/context/LanguageContext';
-import { siteSettingsApi, SiteSettings, TimezoneOption } from '@/lib/api';
+import { siteSettingsApi, eventsApi, legalSettingsApi, SiteSettings, TimezoneOption, Event, LegalSettingsData } from '@/lib/api';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
@@ -13,14 +14,22 @@ import {
   EnvelopeIcon,
   WrenchScrewdriverIcon,
   CheckCircleIcon,
+  StarIcon,
+  ScaleIcon,
 } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
 
+type SettingsTab = 'general' | 'legal';
+
 export default function AdminSettingsPage() {
   const { t, locale } = useLanguage();
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
+  const [savingLegal, setSavingLegal] = useState(false);
+  const [activeTab, setActiveTab] = useState<SettingsTab>('general');
   const [timezones, setTimezones] = useState<TimezoneOption[]>([]);
+  const [featuredEvent, setFeaturedEvent] = useState<Event | null>(null);
+  const [clearingFeatured, setClearingFeatured] = useState(false);
   
   const [settings, setSettings] = useState<SiteSettings>({
     timezone: 'America/Asuncion',
@@ -33,23 +42,52 @@ export default function AdminSettingsPage() {
     instagramUrl: null,
     twitterUrl: null,
     linkedinUrl: null,
+    featuredEventId: null,
     maintenanceMode: false,
     maintenanceMessage: null,
     maintenanceMessageEs: null,
   });
 
+  const [legalSettings, setLegalSettings] = useState<LegalSettingsData>({
+    companyName: null,
+    legalEntityName: null,
+    rucNumber: null,
+    companyAddress: null,
+    companyCity: null,
+    companyCountry: null,
+    supportEmail: null,
+    legalEmail: null,
+    governingLaw: null,
+    jurisdictionCity: null,
+  });
+
+  const [legalErrors, setLegalErrors] = useState<Record<string, string>>({});
+
   useEffect(() => {
     loadData();
   }, []);
 
   const loadData = async () => {
     try {
-      const [settingsRes, timezonesRes] = await Promise.all([
+      const [settingsRes, timezonesRes, legalRes] = await Promise.all([
         siteSettingsApi.get(),
         siteSettingsApi.getTimezones(),
+        legalSettingsApi.get().catch(() => ({ settings: {} as LegalSettingsData })),
       ]);
       setSettings(settingsRes.settings);
       setTimezones(timezonesRes.timezones);
+      setLegalSettings(legalRes.settings);
+      
+      // Load featured event details if one is set
+      if (settingsRes.settings.featuredEventId) {
+        try {
+          const { event } = await eventsApi.getById(settingsRes.settings.featuredEventId);
+          setFeaturedEvent(event);
+        } catch {
+          // Featured event may no longer exist
+          setFeaturedEvent(null);
+        }
+      }
     } catch (error) {
       toast.error('Failed to load settings');
     } finally {
@@ -57,6 +95,20 @@ export default function AdminSettingsPage() {
     }
   };
 
+  const handleClearFeatured = async () => {
+    setClearingFeatured(true);
+    try {
+      await siteSettingsApi.setFeaturedEvent(null);
+      setSettings(prev => ({ ...prev, featuredEventId: null }));
+      setFeaturedEvent(null);
+      toast.success(locale === 'es' ? 'Evento destacado eliminado' : 'Featured event removed');
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to clear featured event');
+    } finally {
+      setClearingFeatured(false);
+    }
+  };
+
   const handleSave = async () => {
     setSaving(true);
     try {
@@ -70,10 +122,53 @@ export default function AdminSettingsPage() {
     }
   };
 
+  const validateLegalSettings = (): boolean => {
+    const errors: Record<string, string> = {};
+
+    // Validate email formats if provided
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (legalSettings.supportEmail && !emailRegex.test(legalSettings.supportEmail)) {
+      errors.supportEmail = locale === 'es' ? 'Email no válido' : 'Invalid email address';
+    }
+    if (legalSettings.legalEmail && !emailRegex.test(legalSettings.legalEmail)) {
+      errors.legalEmail = locale === 'es' ? 'Email no válido' : 'Invalid email address';
+    }
+
+    setLegalErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleSaveLegal = async () => {
+    if (!validateLegalSettings()) return;
+
+    setSavingLegal(true);
+    try {
+      const response = await legalSettingsApi.update(legalSettings);
+      setLegalSettings(response.settings);
+      toast.success(locale === 'es' ? 'Configuración legal guardada' : 'Legal settings saved');
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to save legal settings');
+    } finally {
+      setSavingLegal(false);
+    }
+  };
+
   const updateSetting = <K extends keyof SiteSettings>(key: K, value: SiteSettings[K]) => {
     setSettings((prev) => ({ ...prev, [key]: value }));
   };
 
+  const updateLegalSetting = <K extends keyof LegalSettingsData>(key: K, value: LegalSettingsData[K]) => {
+    setLegalSettings((prev) => ({ ...prev, [key]: value }));
+    // Clear error for this field when user types
+    if (legalErrors[key]) {
+      setLegalErrors((prev) => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+    }
+  };
+
   if (loading) {
     return (
       <div className="flex items-center justify-center py-12">
@@ -82,6 +177,21 @@ export default function AdminSettingsPage() {
     );
   }
 
+  const tabs: { id: SettingsTab; label: string; labelEs: string; icon: React.ReactNode }[] = [
+    {
+      id: 'general',
+      label: 'General Settings',
+      labelEs: 'Configuración General',
+      icon: <Cog6ToothIcon className="w-4 h-4" />,
+    },
+    {
+      id: 'legal',
+      label: 'Legal Settings',
+      labelEs: 'Configuración Legal',
+      icon: <ScaleIcon className="w-4 h-4" />,
+    },
+  ];
+
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
@@ -96,12 +206,42 @@ export default function AdminSettingsPage() {
               : 'Configure general website settings'}
           </p>
         </div>
+        {activeTab === 'general' && (
           <Button onClick={handleSave} isLoading={saving}>
             <CheckCircleIcon className="w-5 h-5 mr-2" />
             {locale === 'es' ? 'Guardar Cambios' : 'Save Changes'}
           </Button>
+        )}
+        {activeTab === 'legal' && (
+          <Button onClick={handleSaveLegal} isLoading={savingLegal}>
+            <CheckCircleIcon className="w-5 h-5 mr-2" />
+            {locale === 'es' ? 'Guardar Cambios' : 'Save Changes'}
+          </Button>
+        )}
       </div>
 
+      {/* Tabs */}
+      <div className="border-b border-secondary-light-gray mb-6">
+        <nav className="flex space-x-0" aria-label="Tabs">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex items-center gap-2 px-4 py-3 border-b-2 text-sm font-medium transition-colors ${
+                activeTab === tab.id
+                  ? 'border-primary-yellow text-primary-dark'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              }`}
+            >
+              {tab.icon}
+              {locale === 'es' ? tab.labelEs : tab.label}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {/* General Settings Tab */}
+      {activeTab === 'general' && (
         <div className="space-y-6">
           {/* Timezone Settings */}
           <Card>
@@ -146,6 +286,94 @@ export default function AdminSettingsPage() {
             </div>
           </Card>
 
+          {/* Featured Event */}
+          <Card>
+            <div className="p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
+                  <StarIcon className="w-5 h-5 text-amber-600" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-lg">
+                    {locale === 'es' ? 'Evento Destacado' : 'Featured Event'}
+                  </h3>
+                  <p className="text-sm text-gray-500">
+                    {locale === 'es' 
+                      ? 'El evento destacado aparece en la página de inicio y linktree' 
+                      : 'The featured event is displayed on the homepage and linktree'}
+                  </p>
+                </div>
+              </div>
+
+              {featuredEvent ? (
+                <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex items-center gap-3">
+                      {featuredEvent.bannerUrl && (
+                        <img 
+                          src={featuredEvent.bannerUrl} 
+                          alt={featuredEvent.title}
+                          className="w-16 h-16 rounded-lg object-cover"
+                        />
+                      )}
+                      <div>
+                        <p className="font-medium text-amber-900">{featuredEvent.title}</p>
+                        <p className="text-sm text-amber-700">
+                          {new Date(featuredEvent.startDatetime).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
+                            month: 'long',
+                            day: 'numeric',
+                            year: 'numeric',
+                            timeZone: 'America/Asuncion',
+                          })}
+                        </p>
+                        <p className="text-xs text-amber-600 mt-1">
+                          {locale === 'es' ? 'Estado:' : 'Status:'} {featuredEvent.status}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex gap-2">
+                      <Link 
+                        href="/admin/events"
+                        className="text-sm text-amber-700 hover:text-amber-900 underline"
+                      >
+                        {locale === 'es' ? 'Cambiar' : 'Change'}
+                      </Link>
+                      <button
+                        onClick={handleClearFeatured}
+                        disabled={clearingFeatured}
+                        className="text-sm text-red-600 hover:text-red-800 underline disabled:opacity-50"
+                      >
+                        {clearingFeatured 
+                          ? (locale === 'es' ? 'Eliminando...' : 'Removing...') 
+                          : (locale === 'es' ? 'Eliminar' : 'Remove')}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
+                  <p className="text-gray-600 mb-3">
+                    {locale === 'es' 
+                      ? 'No hay evento destacado. El próximo evento publicado se mostrará automáticamente.' 
+                      : 'No featured event set. The next upcoming published event will be shown automatically.'}
+                  </p>
+                  <Link 
+                    href="/admin/events"
+                    className="text-sm text-primary-yellow hover:underline font-medium"
+                  >
+                    {locale === 'es' ? 'Ir a Eventos para destacar uno' : 'Go to Events to feature one'}
+                  </Link>
+                </div>
+              )}
+
+              <p className="text-xs text-gray-400 mt-3">
+                {locale === 'es' 
+                  ? 'Cuando el evento destacado termine o se despublique, el sistema mostrará automáticamente el próximo evento.' 
+                  : 'When the featured event ends or is unpublished, the system will automatically show the next upcoming event.'}
+              </p>
+            </div>
+          </Card>
+
           {/* Site Information */}
           <Card>
             <div className="p-6">
@@ -371,6 +599,196 @@ export default function AdminSettingsPage() {
             </Button>
           </div>
         </div>
+      )}
+
+      {/* Legal Settings Tab */}
+      {activeTab === 'legal' && (
+        <div className="space-y-6">
+          {/* Info Banner */}
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+            <p className="text-blue-800 text-sm">
+              <span className="font-medium">
+                {locale === 'es' ? 'Nota:' : 'Note:'}
+              </span>{' '}
+              {locale === 'es'
+                ? 'Estos valores se usan como marcadores de posición en las páginas legales. Los marcadores como {{COMPANY_NAME}} se reemplazan automáticamente con los valores configurados aquí.'
+                : 'These values are used as placeholders in legal pages. Placeholders like {{COMPANY_NAME}} are automatically replaced with the values configured here.'}
+            </p>
+          </div>
+
+          {/* Company Information */}
+          <Card>
+            <div className="p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center">
+                  <ScaleIcon className="w-5 h-5 text-indigo-600" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-lg">
+                    {locale === 'es' ? 'Información de la Empresa' : 'Company Information'}
+                  </h3>
+                  <p className="text-sm text-gray-500">
+                    {locale === 'es'
+                      ? 'Datos legales de la empresa que aparecerán en las páginas legales'
+                      : 'Legal company details that will appear in legal pages'}
+                  </p>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <Input
+                  label={locale === 'es' ? 'Nombre de la Empresa' : 'Company Name'}
+                  value={legalSettings.companyName || ''}
+                  onChange={(e) => updateLegalSetting('companyName', e.target.value || null)}
+                  placeholder={locale === 'es' ? 'Ej: Spanglish S.A.' : 'e.g. Spanglish S.A.'}
+                />
+                <Input
+                  label={locale === 'es' ? 'Nombre de la Entidad Legal' : 'Legal Entity Name'}
+                  value={legalSettings.legalEntityName || ''}
+                  onChange={(e) => updateLegalSetting('legalEntityName', e.target.value || null)}
+                  placeholder={locale === 'es' ? 'Ej: Spanglish S.A.' : 'e.g. Spanglish S.A.'}
+                />
+                <Input
+                  label={locale === 'es' ? 'Número de RUC' : 'RUC Number'}
+                  value={legalSettings.rucNumber || ''}
+                  onChange={(e) => updateLegalSetting('rucNumber', e.target.value || null)}
+                  placeholder={locale === 'es' ? 'Ej: 80012345-6' : 'e.g. 80012345-6'}
+                />
+              </div>
+            </div>
+          </Card>
+
+          {/* Address & Location */}
+          <Card>
+            <div className="p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-10 h-10 bg-teal-100 rounded-full flex items-center justify-center">
+                  <GlobeAltIcon className="w-5 h-5 text-teal-600" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-lg">
+                    {locale === 'es' ? 'Dirección y Ubicación' : 'Address & Location'}
+                  </h3>
+                  <p className="text-sm text-gray-500">
+                    {locale === 'es'
+                      ? 'Dirección física y jurisdicción legal'
+                      : 'Physical address and legal jurisdiction'}
+                  </p>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <div className="max-w-lg">
+                  <Input
+                    label={locale === 'es' ? 'Dirección de la Empresa' : 'Company Address'}
+                    value={legalSettings.companyAddress || ''}
+                    onChange={(e) => updateLegalSetting('companyAddress', e.target.value || null)}
+                    placeholder={locale === 'es' ? 'Ej: Av. Mariscal López 1234' : 'e.g. 1234 Main Street'}
+                  />
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <Input
+                    label={locale === 'es' ? 'Ciudad' : 'City'}
+                    value={legalSettings.companyCity || ''}
+                    onChange={(e) => updateLegalSetting('companyCity', e.target.value || null)}
+                    placeholder={locale === 'es' ? 'Ej: Asunción' : 'e.g. Asunción'}
+                  />
+                  <Input
+                    label={locale === 'es' ? 'País' : 'Country'}
+                    value={legalSettings.companyCountry || ''}
+                    onChange={(e) => updateLegalSetting('companyCountry', e.target.value || null)}
+                    placeholder={locale === 'es' ? 'Ej: Paraguay' : 'e.g. Paraguay'}
+                  />
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          {/* Contact Emails */}
+          <Card>
+            <div className="p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-10 h-10 bg-rose-100 rounded-full flex items-center justify-center">
+                  <EnvelopeIcon className="w-5 h-5 text-rose-600" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-lg">
+                    {locale === 'es' ? 'Emails Legales' : 'Legal Emails'}
+                  </h3>
+                  <p className="text-sm text-gray-500">
+                    {locale === 'es'
+                      ? 'Direcciones de email para asuntos legales y soporte'
+                      : 'Email addresses for legal matters and support'}
+                  </p>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <Input
+                  label={locale === 'es' ? 'Email de Soporte' : 'Support Email'}
+                  type="email"
+                  value={legalSettings.supportEmail || ''}
+                  onChange={(e) => updateLegalSetting('supportEmail', e.target.value || null)}
+                  placeholder="support@example.com"
+                  error={legalErrors.supportEmail}
+                />
+                <Input
+                  label={locale === 'es' ? 'Email Legal' : 'Legal Email'}
+                  type="email"
+                  value={legalSettings.legalEmail || ''}
+                  onChange={(e) => updateLegalSetting('legalEmail', e.target.value || null)}
+                  placeholder="legal@example.com"
+                  error={legalErrors.legalEmail}
+                />
+              </div>
+            </div>
+          </Card>
+
+          {/* Legal Jurisdiction */}
+          <Card>
+            <div className="p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
+                  <ScaleIcon className="w-5 h-5 text-amber-600" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-lg">
+                    {locale === 'es' ? 'Jurisdicción Legal' : 'Legal Jurisdiction'}
+                  </h3>
+                  <p className="text-sm text-gray-500">
+                    {locale === 'es'
+                      ? 'Ley aplicable y jurisdicción para las páginas legales'
+                      : 'Governing law and jurisdiction for legal pages'}
+                  </p>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <Input
+                  label={locale === 'es' ? 'Ley Aplicable' : 'Governing Law'}
+                  value={legalSettings.governingLaw || ''}
+                  onChange={(e) => updateLegalSetting('governingLaw', e.target.value || null)}
+                  placeholder={locale === 'es' ? 'Ej: las leyes de la República del Paraguay' : 'e.g. the laws of the Republic of Paraguay'}
+                />
+                <Input
+                  label={locale === 'es' ? 'Ciudad de Jurisdicción' : 'Jurisdiction City'}
+                  value={legalSettings.jurisdictionCity || ''}
+                  onChange={(e) => updateLegalSetting('jurisdictionCity', e.target.value || null)}
+                  placeholder={locale === 'es' ? 'Ej: Asunción' : 'e.g. Asunción'}
+                />
+              </div>
+            </div>
+          </Card>
+
+          {/* Save Button at Bottom */}
+          <div className="flex justify-end">
+            <Button onClick={handleSaveLegal} isLoading={savingLegal} size="lg">
+              <CheckCircleIcon className="w-5 h-5 mr-2" />
+              {locale === 'es' ? 'Guardar Configuración Legal' : 'Save Legal Settings'}
+            </Button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

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

@@ -6,7 +6,8 @@ import { ticketsApi, eventsApi, Ticket, Event } from '@/lib/api';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
-import { CheckCircleIcon, XCircleIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { BottomSheet, MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
+import { CheckCircleIcon, XCircleIcon, PlusIcon, FunnelIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
 import clsx from 'clsx';
 
@@ -17,26 +18,17 @@ export default function AdminTicketsPage() {
   const [loading, setLoading] = useState(true);
   const [selectedEvent, setSelectedEvent] = useState<string>('');
   const [statusFilter, setStatusFilter] = useState<string>('');
+  const [mobileFilterOpen, setMobileFilterOpen] = useState(false);
   
-  // Manual ticket creation state
   const [showCreateForm, setShowCreateForm] = useState(false);
   const [creating, setCreating] = useState(false);
   const [createForm, setCreateForm] = useState({
-    eventId: '',
+    eventId: '', firstName: '', lastName: '', email: '', phone: '',
-    firstName: '',
+    preferredLanguage: 'en' as 'en' | 'es', autoCheckin: false, adminNote: '',
-    lastName: '',
-    email: '',
-    phone: '',
-    preferredLanguage: 'en' as 'en' | 'es',
-    autoCheckin: false,
-    adminNote: '',
   });
 
   useEffect(() => {
-    Promise.all([
+    Promise.all([ticketsApi.getAll(), eventsApi.getAll()])
-      ticketsApi.getAll(),
-      eventsApi.getAll(),
-    ])
       .then(([ticketsRes, eventsRes]) => {
         setTickets(ticketsRes.tickets);
         setEvents(eventsRes.events);
@@ -58,9 +50,7 @@ export default function AdminTicketsPage() {
   };
 
   useEffect(() => {
-    if (!loading) {
+    if (!loading) loadTickets();
-      loadTickets();
-    }
   }, [selectedEvent, statusFilter]);
 
   const handleCheckin = async (id: string) => {
@@ -75,7 +65,6 @@ export default function AdminTicketsPage() {
 
   const handleCancel = async (id: string) => {
     if (!confirm('Are you sure you want to cancel this ticket?')) return;
-
     try {
       await ticketsApi.cancel(id);
       toast.success('Ticket cancelled');
@@ -97,35 +86,18 @@ export default function AdminTicketsPage() {
 
   const handleCreateTicket = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!createForm.eventId) {
+    if (!createForm.eventId) { toast.error('Please select an event'); return; }
-      toast.error('Please select an event');
-      return;
-    }
-    
     setCreating(true);
     try {
       await ticketsApi.adminCreate({
-        eventId: createForm.eventId,
+        eventId: createForm.eventId, firstName: createForm.firstName,
-        firstName: createForm.firstName,
+        lastName: createForm.lastName || undefined, email: createForm.email,
-        lastName: createForm.lastName || undefined,
+        phone: createForm.phone, preferredLanguage: createForm.preferredLanguage,
-        email: createForm.email,
+        autoCheckin: createForm.autoCheckin, adminNote: createForm.adminNote || undefined,
-        phone: createForm.phone,
-        preferredLanguage: createForm.preferredLanguage,
-        autoCheckin: createForm.autoCheckin,
-        adminNote: createForm.adminNote || undefined,
       });
       toast.success('Ticket created successfully');
       setShowCreateForm(false);
-      setCreateForm({
+      setCreateForm({ eventId: '', firstName: '', lastName: '', email: '', phone: '', preferredLanguage: 'en', autoCheckin: false, adminNote: '' });
-        eventId: '',
-        firstName: '',
-        lastName: '',
-        email: '',
-        phone: '',
-        preferredLanguage: 'en',
-        autoCheckin: false,
-        adminNote: '',
-      });
       loadTickets();
     } catch (error: any) {
       toast.error(error.message || 'Failed to create ticket');
@@ -136,32 +108,29 @@ export default function AdminTicketsPage() {
 
   const formatDate = (dateStr: string) => {
     return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
-      month: 'short',
+      month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', timeZone: 'America/Asuncion',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
     });
   };
 
   const getStatusBadge = (status: string) => {
     const styles: Record<string, string> = {
-      pending: 'badge-warning',
+      pending: 'badge-warning', confirmed: 'badge-success', cancelled: 'badge-danger', checked_in: 'badge-info',
-      confirmed: 'badge-success',
-      cancelled: 'badge-danger',
-      checked_in: 'badge-info',
     };
     const labels: Record<string, string> = {
-      pending: t('admin.tickets.status.pending'),
+      pending: t('admin.tickets.status.pending'), confirmed: t('admin.tickets.status.confirmed'),
-      confirmed: t('admin.tickets.status.confirmed'),
+      cancelled: t('admin.tickets.status.cancelled'), checked_in: t('admin.tickets.status.checkedIn'),
-      cancelled: t('admin.tickets.status.cancelled'),
-      checked_in: t('admin.tickets.status.checkedIn'),
     };
     return <span className={`badge ${styles[status] || 'badge-gray'}`}>{labels[status] || status}</span>;
   };
 
-  const getEventName = (eventId: string) => {
+  const getEventName = (eventId: string) => events.find(e => e.id === eventId)?.title || 'Unknown Event';
-    const event = events.find(e => e.id === eventId);
+
-    return event?.title || 'Unknown Event';
+  const hasActiveFilters = selectedEvent || statusFilter;
+
+  const getPrimaryAction = (ticket: Ticket) => {
+    if (ticket.status === 'pending') return { label: 'Confirm', onClick: () => handleConfirm(ticket.id) };
+    if (ticket.status === 'confirmed') return { label: t('admin.tickets.checkin'), onClick: () => handleCheckin(ticket.id) };
+    return null;
   };
 
   if (loading) {
@@ -175,134 +144,86 @@ export default function AdminTicketsPage() {
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <h1 className="text-2xl font-bold text-primary-dark">{t('admin.tickets.title')}</h1>
+        <h1 className="text-xl md:text-2xl font-bold text-primary-dark">{t('admin.tickets.title')}</h1>
-        <Button onClick={() => setShowCreateForm(true)}>
+        <Button onClick={() => setShowCreateForm(true)} className="hidden md:flex">
-          <PlusIcon className="w-5 h-5 mr-2" />
+          <PlusIcon className="w-5 h-5 mr-2" /> Create Ticket
-          Create Ticket
         </Button>
       </div>
 
-      {/* Manual Ticket Creation Modal */}
+      {/* Create Ticket Modal */}
       {showCreateForm && (
-        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
-          <Card className="w-full max-w-lg p-6">
+          <Card className="w-full md:max-w-lg max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card">
-            <h2 className="text-xl font-bold mb-6">Create Ticket Manually</h2>
+            <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray flex-shrink-0">
-            <form onSubmit={handleCreateTicket} className="space-y-4">
+              <h2 className="text-base font-bold">Create Ticket Manually</h2>
+              <button onClick={() => setShowCreateForm(false)}
+                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
+                <XMarkIcon className="w-5 h-5" />
+              </button>
+            </div>
+            <form onSubmit={handleCreateTicket} className="p-4 space-y-4 overflow-y-auto flex-1 min-h-0">
               <div>
                 <label className="block text-sm font-medium mb-1">Event *</label>
-                <select
+                <select value={createForm.eventId}
-                  value={createForm.eventId}
                   onChange={(e) => setCreateForm({ ...createForm, eventId: e.target.value })}
-                  className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray"
+                  className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray min-h-[44px]" required>
-                  required
-                >
                   <option value="">Select an event</option>
-                  {events.filter(e => e.status === 'published').map((event) => (
+                  {events.filter(e => e.status === 'published' || e.status === 'unlisted').map((event) => (
-                    <option key={event.id} value={event.id}>
+                    <option key={event.id} value={event.id}>{event.title} ({event.availableSeats} spots left)</option>
-                      {event.title} ({event.availableSeats} spots left)
-                    </option>
                   ))}
                 </select>
               </div>
-              
               <div className="grid grid-cols-2 gap-3">
-                <Input
+                <Input label="First Name *" value={createForm.firstName}
-                  label="First Name *"
+                  onChange={(e) => setCreateForm({ ...createForm, firstName: e.target.value })} required placeholder="First name" />
-                  value={createForm.firstName}
+                <Input label="Last Name" value={createForm.lastName}
-                  onChange={(e) => setCreateForm({ ...createForm, firstName: e.target.value })}
+                  onChange={(e) => setCreateForm({ ...createForm, lastName: e.target.value })} placeholder="Last name" />
-                  required
-                  placeholder="First name"
-                />
-                <Input
-                  label="Last Name (optional)"
-                  value={createForm.lastName}
-                  onChange={(e) => setCreateForm({ ...createForm, lastName: e.target.value })}
-                  placeholder="Last name"
-                />
               </div>
-              
+              <Input label="Email (optional)" type="email" value={createForm.email}
-              <Input
+                onChange={(e) => setCreateForm({ ...createForm, email: e.target.value })} placeholder="attendee@email.com" />
-                label="Email (optional)"
+              <Input label="Phone (optional)" value={createForm.phone}
-                type="email"
+                onChange={(e) => setCreateForm({ ...createForm, phone: e.target.value })} placeholder="+595 XXX XXX XXX" />
-                value={createForm.email}
-                onChange={(e) => setCreateForm({ ...createForm, email: e.target.value })}
-                placeholder="attendee@email.com"
-              />
-              
-              <Input
-                label="Phone (optional)"
-                value={createForm.phone}
-                onChange={(e) => setCreateForm({ ...createForm, phone: e.target.value })}
-                placeholder="+595 XXX XXX XXX"
-              />
-              
               <div>
                 <label className="block text-sm font-medium mb-1">Preferred Language</label>
-                <select
+                <select value={createForm.preferredLanguage}
-                  value={createForm.preferredLanguage}
                   onChange={(e) => setCreateForm({ ...createForm, preferredLanguage: e.target.value as 'en' | 'es' })}
-                  className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray"
+                  className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray min-h-[44px]">
-                >
                   <option value="en">English</option>
                   <option value="es">Spanish</option>
                 </select>
               </div>
-              
               <div>
                 <label className="block text-sm font-medium mb-1">Admin Note</label>
-                <textarea
+                <textarea value={createForm.adminNote}
-                  value={createForm.adminNote}
                   onChange={(e) => setCreateForm({ ...createForm, adminNote: e.target.value })}
-                  className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray"
+                  className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray" rows={2}
-                  rows={2}
+                  placeholder="Internal note (optional)" />
-                  placeholder="Internal note about this booking (optional)"
-                />
               </div>
-              
+              <div className="flex items-center gap-3">
-              <div className="flex items-center gap-2">
+                <input type="checkbox" id="autoCheckin" checked={createForm.autoCheckin}
-                <input
-                  type="checkbox"
-                  id="autoCheckin"
-                  checked={createForm.autoCheckin}
                   onChange={(e) => setCreateForm({ ...createForm, autoCheckin: e.target.checked })}
-                  className="w-4 h-4"
+                  className="w-4 h-4 rounded border-secondary-light-gray text-primary-yellow focus:ring-primary-yellow" />
-                />
+                <label htmlFor="autoCheckin" className="text-sm">Auto check-in immediately</label>
-                <label htmlFor="autoCheckin" className="text-sm">
-                  Automatically check in (mark as present)
-                </label>
               </div>
-              
               <div className="bg-yellow-50 border border-yellow-200 rounded-btn p-3 text-sm text-yellow-800">
-                Note: This creates a ticket with cash payment marked as paid. Use this for walk-ins at the door. Email and phone are optional for door entries.
+                Creates a ticket with cash payment marked as paid. Use for walk-ins at the door.
               </div>
-              
+              <div className="flex gap-3 pt-2">
-              <div className="flex gap-3 pt-4">
+                <Button type="button" variant="outline" onClick={() => setShowCreateForm(false)} className="flex-1 min-h-[44px]">Cancel</Button>
-                <Button type="submit" isLoading={creating}>
+                <Button type="submit" isLoading={creating} className="flex-1 min-h-[44px]">Create Ticket</Button>
-                  Create Ticket
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => setShowCreateForm(false)}
-                >
-                  Cancel
-                </Button>
               </div>
             </form>
           </Card>
         </div>
       )}
 
-      {/* Filters */}
+      {/* Desktop Filters */}
-      <Card className="p-4 mb-6">
+      <Card className="p-4 mb-6 hidden md:block">
         <div className="flex flex-wrap gap-4">
           <div>
             <label className="block text-sm font-medium mb-1">Event</label>
-            <select
+            <select value={selectedEvent} onChange={(e) => setSelectedEvent(e.target.value)}
-              value={selectedEvent}
+              className="px-4 py-2 rounded-btn border border-secondary-light-gray min-w-[200px] text-sm">
-              onChange={(e) => setSelectedEvent(e.target.value)}
-              className="px-4 py-2 rounded-btn border border-secondary-light-gray min-w-[200px]"
-            >
               <option value="">All Events</option>
               {events.map((event) => (
                 <option key={event.id} value={event.id}>{event.title}</option>
@@ -311,11 +232,8 @@ export default function AdminTicketsPage() {
           </div>
           <div>
             <label className="block text-sm font-medium mb-1">Status</label>
-            <select
+            <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}
-              value={statusFilter}
+              className="px-4 py-2 rounded-btn border border-secondary-light-gray min-w-[150px] text-sm">
-              onChange={(e) => setStatusFilter(e.target.value)}
-              className="px-4 py-2 rounded-btn border border-secondary-light-gray min-w-[150px]"
-            >
               <option value="">All Statuses</option>
               <option value="pending">Pending</option>
               <option value="confirmed">Confirmed</option>
@@ -326,70 +244,61 @@ export default function AdminTicketsPage() {
         </div>
       </Card>
 
-      {/* Tickets Table */}
+      {/* Mobile Toolbar */}
-      <Card className="overflow-hidden">
+      <div className="md:hidden mb-4 flex items-center gap-2">
+        <button onClick={() => setMobileFilterOpen(true)}
+          className={clsx(
+            'flex items-center gap-1.5 px-3 py-2 rounded-btn border text-sm min-h-[44px]',
+            hasActiveFilters ? 'border-primary-yellow bg-yellow-50 text-primary-dark' : 'border-secondary-light-gray text-gray-600'
+          )}>
+          <FunnelIcon className="w-4 h-4" />
+          Filters {hasActiveFilters && `(${tickets.length})`}
+        </button>
+        {hasActiveFilters && (
+          <button onClick={() => { setSelectedEvent(''); setStatusFilter(''); }}
+            className="text-xs text-primary-yellow min-h-[44px] flex items-center">Clear</button>
+        )}
+      </div>
+
+      {/* Desktop: Table */}
+      <Card className="overflow-hidden hidden md:block">
         <div className="overflow-x-auto">
           <table className="w-full">
             <thead className="bg-secondary-gray">
               <tr>
-                <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">Ticket</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Ticket</th>
-                <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">Event</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-6 py-3 text-sm font-medium text-gray-600">Booked</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Booked</th>
-                <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">Status</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                <th className="text-right px-6 py-3 text-sm font-medium text-gray-600">Actions</th>
+                <th className="text-right px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-secondary-light-gray">
               {tickets.length === 0 ? (
-                <tr>
+                <tr><td colSpan={5} className="px-4 py-12 text-center text-gray-500 text-sm">No tickets found</td></tr>
-                  <td colSpan={5} className="px-6 py-12 text-center text-gray-500">
-                    No tickets found
-                  </td>
-                </tr>
               ) : (
                 tickets.map((ticket) => (
                   <tr key={ticket.id} className="hover:bg-gray-50">
-                    <td className="px-6 py-4">
+                    <td className="px-4 py-3">
-                      <div>
                       <p className="font-mono text-sm font-medium">{ticket.qrCode}</p>
-                        <p className="text-xs text-gray-500">ID: {ticket.id.slice(0, 8)}...</p>
+                      <p className="text-[10px] text-gray-400">ID: {ticket.id.slice(0, 8)}...</p>
-                      </div>
                     </td>
-                    <td className="px-6 py-4 text-sm">
+                    <td className="px-4 py-3 text-sm">{getEventName(ticket.eventId)}</td>
-                      {getEventName(ticket.eventId)}
+                    <td className="px-4 py-3 text-xs text-gray-500">{formatDate(ticket.createdAt)}</td>
-                    </td>
+                    <td className="px-4 py-3">{getStatusBadge(ticket.status)}</td>
-                    <td className="px-6 py-4 text-sm text-gray-600">
+                    <td className="px-4 py-3">
-                      {formatDate(ticket.createdAt)}
+                      <div className="flex items-center justify-end gap-1">
-                    </td>
-                    <td className="px-6 py-4">
-                      {getStatusBadge(ticket.status)}
-                    </td>
-                    <td className="px-6 py-4">
-                      <div className="flex items-center justify-end gap-2">
                         {ticket.status === 'pending' && (
-                          <Button
+                          <Button size="sm" variant="ghost" onClick={() => handleConfirm(ticket.id)}>Confirm</Button>
-                            size="sm"
-                            variant="ghost"
-                            onClick={() => handleConfirm(ticket.id)}
-                          >
-                            Confirm
-                          </Button>
                         )}
                         {ticket.status === 'confirmed' && (
-                          <Button
+                          <Button size="sm" onClick={() => handleCheckin(ticket.id)}>
-                            size="sm"
+                            <CheckCircleIcon className="w-4 h-4 mr-1" /> {t('admin.tickets.checkin')}
-                            onClick={() => handleCheckin(ticket.id)}
-                          >
-                            <CheckCircleIcon className="w-4 h-4 mr-1" />
-                            {t('admin.tickets.checkin')}
                           </Button>
                         )}
                         {ticket.status !== 'cancelled' && ticket.status !== 'checked_in' && (
-                          <button
+                          <button onClick={() => handleCancel(ticket.id)}
-                            onClick={() => handleCancel(ticket.id)}
+                            className="p-2 hover:bg-red-100 text-red-600 rounded-btn" title="Cancel">
-                            className="p-2 hover:bg-red-100 text-red-600 rounded-btn"
-                            title="Cancel"
-                          >
                             <XCircleIcon className="w-4 h-4" />
                           </button>
                         )}
@@ -402,6 +311,102 @@ export default function AdminTicketsPage() {
           </table>
         </div>
       </Card>
+
+      {/* Mobile: Card List */}
+      <div className="md:hidden space-y-2">
+        {tickets.length === 0 ? (
+          <div className="text-center py-10 text-gray-500 text-sm">No tickets found</div>
+        ) : (
+          tickets.map((ticket) => {
+            const primary = getPrimaryAction(ticket);
+            return (
+              <Card key={ticket.id} className="p-3">
+                <div className="flex items-start justify-between gap-2">
+                  <div className="min-w-0 flex-1">
+                    <p className="font-mono text-sm font-medium">{ticket.qrCode}</p>
+                    <p className="text-xs text-gray-500 truncate">{getEventName(ticket.eventId)}</p>
+                  </div>
+                  {getStatusBadge(ticket.status)}
+                </div>
+                <div className="flex items-center justify-between mt-2 pt-2 border-t border-gray-100">
+                  <p className="text-[10px] text-gray-400">{formatDate(ticket.createdAt)}</p>
+                  <div className="flex items-center gap-1">
+                    {primary && (
+                      <Button size="sm" variant={ticket.status === 'confirmed' ? 'primary' : 'outline'}
+                        onClick={primary.onClick} className="text-xs px-2.5 py-1.5 min-h-[36px]">
+                        {primary.label}
+                      </Button>
+                    )}
+                    {ticket.status !== 'cancelled' && ticket.status !== 'checked_in' && (
+                      <MoreMenu>
+                        <DropdownItem onClick={() => handleCancel(ticket.id)} className="text-red-600">
+                          <XCircleIcon className="w-4 h-4 mr-2" /> Cancel Ticket
+                        </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
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </Card>
+            );
+          })
+        )}
+      </div>
+
+      {/* Mobile FAB */}
+      <div className="md:hidden fixed bottom-6 right-6 z-40">
+        <button onClick={() => setShowCreateForm(true)}
+          className="w-14 h-14 bg-primary-yellow text-primary-dark rounded-full shadow-lg flex items-center justify-center hover:bg-yellow-400 active:scale-95 transition-transform">
+          <PlusIcon className="w-6 h-6" />
+        </button>
+      </div>
+
+      {/* Mobile Filter BottomSheet */}
+      <BottomSheet open={mobileFilterOpen} onClose={() => setMobileFilterOpen(false)} title="Filters">
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Event</label>
+            <select value={selectedEvent} onChange={(e) => setSelectedEvent(e.target.value)}
+              className="w-full px-3 py-2.5 rounded-btn border border-secondary-light-gray text-sm min-h-[44px]">
+              <option value="">All Events</option>
+              {events.map((event) => (
+                <option key={event.id} value={event.id}>{event.title}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
+            <div className="space-y-1">
+              {[
+                { value: '', label: 'All Statuses' },
+                { value: 'pending', label: 'Pending' },
+                { value: 'confirmed', label: 'Confirmed' },
+                { value: 'checked_in', label: 'Checked In' },
+                { value: 'cancelled', label: 'Cancelled' },
+              ].map((opt) => (
+                <button key={opt.value} onClick={() => setStatusFilter(opt.value)}
+                  className={clsx(
+                    'w-full text-left px-3 py-2.5 rounded-btn text-sm min-h-[44px] flex items-center justify-between',
+                    statusFilter === opt.value ? 'bg-yellow-50 text-primary-dark font-medium' : 'hover:bg-gray-50'
+                  )}>
+                  {opt.label}
+                  {statusFilter === opt.value && <CheckCircleIcon className="w-4 h-4 text-primary-yellow" />}
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="flex gap-3 pt-2">
+            <Button variant="outline" onClick={() => { setSelectedEvent(''); setStatusFilter(''); setMobileFilterOpen(false); }} className="flex-1 min-h-[44px]">Clear</Button>
+            <Button onClick={() => setMobileFilterOpen(false)} className="flex-1 min-h-[44px]">Apply</Button>
+          </div>
+        </div>
+      </BottomSheet>
+
+      <AdminMobileStyles />
     </div>
   );
 }

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

@@ -5,14 +5,29 @@ import { useLanguage } from '@/context/LanguageContext';
 import { usersApi, User } from '@/lib/api';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
-import { TrashIcon } from '@heroicons/react/24/outline';
+import Input from '@/components/ui/Input';
+import { MoreMenu, DropdownItem, BottomSheet, AdminMobileStyles } from '@/components/admin/MobileComponents';
+import { TrashIcon, PencilSquareIcon, FunnelIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { CheckCircleIcon } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
+import clsx from 'clsx';
 
 export default function AdminUsersPage() {
   const { t, locale } = useLanguage();
   const [users, setUsers] = useState<User[]>([]);
   const [loading, setLoading] = useState(true);
   const [roleFilter, setRoleFilter] = useState<string>('');
+  const [editingUser, setEditingUser] = useState<User | null>(null);
+  const [editForm, setEditForm] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    role: '' as User['role'],
+    languagePreference: '' as string,
+    accountStatus: '' as string,
+  });
+  const [saving, setSaving] = useState(false);
+  const [mobileFilterOpen, setMobileFilterOpen] = useState(false);
 
   useEffect(() => {
     loadUsers();
@@ -41,7 +56,6 @@ export default function AdminUsersPage() {
 
   const handleDelete = async (userId: string) => {
     if (!confirm('Are you sure you want to delete this user?')) return;
-
     try {
       await usersApi.delete(userId);
       toast.success('User deleted');
@@ -51,21 +65,54 @@ export default function AdminUsersPage() {
     }
   };
 
+  const openEditModal = (user: User) => {
+    setEditingUser(user);
+    setEditForm({
+      name: user.name, email: user.email, phone: user.phone || '',
+      role: user.role, languagePreference: user.languagePreference || '',
+      accountStatus: user.accountStatus || 'active',
+    });
+  };
+
+  const handleEditSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!editingUser) return;
+    if (!editForm.name.trim() || editForm.name.trim().length < 2) {
+      toast.error('Name must be at least 2 characters');
+      return;
+    }
+    if (!editForm.email.trim()) {
+      toast.error('Email is required');
+      return;
+    }
+    setSaving(true);
+    try {
+      await usersApi.update(editingUser.id, {
+        name: editForm.name.trim(), email: editForm.email.trim(),
+        phone: editForm.phone.trim() || undefined, role: editForm.role,
+        languagePreference: editForm.languagePreference || undefined,
+        accountStatus: editForm.accountStatus || undefined,
+      } as Partial<User>);
+      toast.success('User updated successfully');
+      setEditingUser(null);
+      loadUsers();
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to update user');
+    } finally {
+      setSaving(false);
+    }
+  };
+
   const formatDate = (dateStr: string) => {
     return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
-      year: 'numeric',
+      year: 'numeric', month: 'short', day: 'numeric', timeZone: 'America/Asuncion',
-      month: 'short',
-      day: 'numeric',
     });
   };
 
   const getRoleBadge = (role: string) => {
     const styles: Record<string, string> = {
-      admin: 'badge-danger',
+      admin: 'badge-danger', organizer: 'badge-info', staff: 'badge-warning',
-      organizer: 'badge-info',
+      marketing: 'badge-success', user: 'badge-gray',
-      staff: 'badge-warning',
-      marketing: 'badge-success',
-      user: 'badge-gray',
     };
     return <span className={`badge ${styles[role] || 'badge-gray'}`}>{t(`admin.users.roles.${role}`)}</span>;
   };
@@ -81,19 +128,16 @@ export default function AdminUsersPage() {
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <h1 className="text-2xl font-bold text-primary-dark">{t('admin.users.title')}</h1>
+        <h1 className="text-xl md:text-2xl font-bold text-primary-dark">{t('admin.users.title')}</h1>
       </div>
 
-      {/* Filters */}
+      {/* Desktop Filters */}
-      <Card className="p-4 mb-6">
+      <Card className="p-4 mb-6 hidden md:block">
         <div className="flex flex-wrap gap-4">
           <div>
             <label className="block text-sm font-medium mb-1">{t('admin.users.role')}</label>
-            <select
+            <select value={roleFilter} onChange={(e) => setRoleFilter(e.target.value)}
-              value={roleFilter}
+              className="px-4 py-2 rounded-btn border border-secondary-light-gray min-w-[150px] text-sm">
-              onChange={(e) => setRoleFilter(e.target.value)}
-              className="px-4 py-2 rounded-btn border border-secondary-light-gray min-w-[150px]"
-            >
               <option value="">All Roles</option>
               <option value="admin">{t('admin.users.roles.admin')}</option>
               <option value="organizer">{t('admin.users.roles.organizer')}</option>
@@ -105,51 +149,58 @@ export default function AdminUsersPage() {
         </div>
       </Card>
 
-      {/* Users Table */}
+      {/* Mobile Toolbar */}
-      <Card className="overflow-hidden">
+      <div className="md:hidden mb-4 flex items-center gap-2">
+        <button onClick={() => setMobileFilterOpen(true)}
+          className={clsx(
+            'flex items-center gap-1.5 px-3 py-2 rounded-btn border text-sm min-h-[44px]',
+            roleFilter ? 'border-primary-yellow bg-yellow-50 text-primary-dark' : 'border-secondary-light-gray text-gray-600'
+          )}>
+          <FunnelIcon className="w-4 h-4" />
+          {roleFilter ? t(`admin.users.roles.${roleFilter}`) : 'Filter by Role'}
+        </button>
+        {roleFilter && (
+          <button onClick={() => setRoleFilter('')} className="text-xs text-primary-yellow min-h-[44px] flex items-center">
+            Clear
+          </button>
+        )}
+        <span className="text-xs text-gray-500 ml-auto">{users.length} users</span>
+      </div>
+
+      {/* Desktop: Table */}
+      <Card className="overflow-hidden hidden md:block">
         <div className="overflow-x-auto">
           <table className="w-full">
             <thead className="bg-secondary-gray">
               <tr>
-                <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">User</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
-                <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">Contact</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th>
-                <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">Role</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
-                <th className="text-left px-6 py-3 text-sm font-medium text-gray-600">Joined</th>
+                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Joined</th>
-                <th className="text-right px-6 py-3 text-sm font-medium text-gray-600">Actions</th>
+                <th className="text-right px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-secondary-light-gray">
               {users.length === 0 ? (
-                <tr>
+                <tr><td colSpan={5} className="px-4 py-12 text-center text-gray-500 text-sm">No users found</td></tr>
-                  <td colSpan={5} className="px-6 py-12 text-center text-gray-500">
-                    No users found
-                  </td>
-                </tr>
               ) : (
                 users.map((user) => (
                   <tr key={user.id} className="hover:bg-gray-50">
-                    <td className="px-6 py-4">
+                    <td className="px-4 py-3">
                       <div className="flex items-center gap-3">
-                        <div className="w-10 h-10 bg-primary-yellow/20 rounded-full flex items-center justify-center">
+                        <div className="w-8 h-8 bg-primary-yellow/20 rounded-full flex items-center justify-center flex-shrink-0">
-                          <span className="font-semibold text-primary-dark">
+                          <span className="font-semibold text-sm text-primary-dark">{user.name.charAt(0).toUpperCase()}</span>
-                            {user.name.charAt(0).toUpperCase()}
-                          </span>
                         </div>
                         <div>
-                          <p className="font-medium">{user.name}</p>
+                          <p className="font-medium text-sm">{user.name}</p>
-                          <p className="text-sm text-gray-500">{user.email}</p>
+                          <p className="text-xs text-gray-500">{user.email}</p>
                         </div>
                       </div>
                     </td>
-                    <td className="px-6 py-4 text-sm text-gray-600">
+                    <td className="px-4 py-3 text-sm text-gray-600">{user.phone || '-'}</td>
-                      {user.phone || '-'}
+                    <td className="px-4 py-3">
-                    </td>
+                      <select value={user.role} onChange={(e) => handleRoleChange(user.id, e.target.value)}
-                    <td className="px-6 py-4">
+                        className="px-2 py-1 rounded border border-secondary-light-gray text-sm">
-                      <select
-                        value={user.role}
-                        onChange={(e) => handleRoleChange(user.id, e.target.value)}
-                        className="px-2 py-1 rounded border border-secondary-light-gray text-sm"
-                      >
                         <option value="user">{t('admin.users.roles.user')}</option>
                         <option value="staff">{t('admin.users.roles.staff')}</option>
                         <option value="marketing">{t('admin.users.roles.marketing')}</option>
@@ -157,16 +208,15 @@ export default function AdminUsersPage() {
                         <option value="admin">{t('admin.users.roles.admin')}</option>
                       </select>
                     </td>
-                    <td className="px-6 py-4 text-sm text-gray-600">
+                    <td className="px-4 py-3 text-xs text-gray-500">{formatDate(user.createdAt)}</td>
-                      {formatDate(user.createdAt)}
+                    <td className="px-4 py-3">
-                    </td>
+                      <div className="flex items-center justify-end gap-1">
-                    <td className="px-6 py-4">
+                        <button onClick={() => openEditModal(user)}
-                      <div className="flex items-center justify-end gap-2">
+                          className="p-2 hover:bg-blue-100 text-blue-600 rounded-btn" title="Edit">
-                        <button
+                          <PencilSquareIcon className="w-4 h-4" />
-                          onClick={() => handleDelete(user.id)}
+                        </button>
-                          className="p-2 hover:bg-red-100 text-red-600 rounded-btn"
+                        <button onClick={() => handleDelete(user.id)}
-                          title="Delete"
+                          className="p-2 hover:bg-red-100 text-red-600 rounded-btn" title="Delete">
-                        >
                           <TrashIcon className="w-4 h-4" />
                         </button>
                       </div>
@@ -178,6 +228,128 @@ export default function AdminUsersPage() {
           </table>
         </div>
       </Card>
+
+      {/* Mobile: Card List */}
+      <div className="md:hidden space-y-2">
+        {users.length === 0 ? (
+          <div className="text-center py-10 text-gray-500 text-sm">No users found</div>
+        ) : (
+          users.map((user) => (
+            <Card key={user.id} className="p-3">
+              <div className="flex items-start gap-3">
+                <div className="w-10 h-10 bg-primary-yellow/20 rounded-full flex items-center justify-center flex-shrink-0">
+                  <span className="font-semibold text-primary-dark">{user.name.charAt(0).toUpperCase()}</span>
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="min-w-0">
+                      <p className="font-medium text-sm truncate">{user.name}</p>
+                      <p className="text-xs text-gray-500 truncate">{user.email}</p>
+                      {user.phone && <p className="text-[10px] text-gray-400">{user.phone}</p>}
+                    </div>
+                    {getRoleBadge(user.role)}
+                  </div>
+                  <div className="flex items-center justify-between mt-2 pt-2 border-t border-gray-100">
+                    <p className="text-[10px] text-gray-400">Joined {formatDate(user.createdAt)}</p>
+                    <MoreMenu>
+                      <DropdownItem onClick={() => openEditModal(user)}>
+                        <PencilSquareIcon className="w-4 h-4 mr-2" /> Edit User
+                      </DropdownItem>
+                      <DropdownItem onClick={() => handleDelete(user.id)} className="text-red-600">
+                        <TrashIcon className="w-4 h-4 mr-2" /> Delete
+                      </DropdownItem>
+                    </MoreMenu>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          ))
+        )}
+      </div>
+
+      {/* Mobile Filter BottomSheet */}
+      <BottomSheet open={mobileFilterOpen} onClose={() => setMobileFilterOpen(false)} title="Filter by Role">
+        <div className="space-y-1">
+          {[
+            { value: '', label: 'All Roles' },
+            { value: 'admin', label: t('admin.users.roles.admin') },
+            { value: 'organizer', label: t('admin.users.roles.organizer') },
+            { value: 'staff', label: t('admin.users.roles.staff') },
+            { value: 'marketing', label: t('admin.users.roles.marketing') },
+            { value: 'user', label: t('admin.users.roles.user') },
+          ].map((opt) => (
+            <button key={opt.value}
+              onClick={() => { setRoleFilter(opt.value); setMobileFilterOpen(false); }}
+              className={clsx(
+                'w-full text-left px-4 py-3 rounded-btn text-sm min-h-[44px] flex items-center justify-between',
+                roleFilter === opt.value ? 'bg-yellow-50 text-primary-dark font-medium' : 'hover:bg-gray-50'
+              )}>
+              {opt.label}
+              {roleFilter === opt.value && <CheckCircleIcon className="w-4 h-4 text-primary-yellow" />}
+            </button>
+          ))}
+        </div>
+      </BottomSheet>
+
+      {/* Edit User Modal */}
+      {editingUser && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
+          <Card className="w-full md:max-w-lg max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card">
+            <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray flex-shrink-0">
+              <h2 className="text-base font-bold">Edit User</h2>
+              <button onClick={() => setEditingUser(null)}
+                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
+                <XMarkIcon className="w-5 h-5" />
+              </button>
+            </div>
+            <form onSubmit={handleEditSubmit} className="p-4 space-y-4 overflow-y-auto flex-1 min-h-0">
+              <Input label="Name" value={editForm.name}
+                onChange={(e) => setEditForm({ ...editForm, name: e.target.value })} required minLength={2} />
+              <Input label="Email" type="email" value={editForm.email}
+                onChange={(e) => setEditForm({ ...editForm, email: e.target.value })} required />
+              <Input label="Phone" value={editForm.phone}
+                onChange={(e) => setEditForm({ ...editForm, phone: e.target.value })} placeholder="Optional" />
+              <div>
+                <label className="block text-sm font-medium text-primary-dark mb-1.5">Role</label>
+                <select value={editForm.role} onChange={(e) => setEditForm({ ...editForm, role: e.target.value as User['role'] })}
+                  className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow min-h-[44px]">
+                  <option value="user">{t('admin.users.roles.user')}</option>
+                  <option value="staff">{t('admin.users.roles.staff')}</option>
+                  <option value="marketing">{t('admin.users.roles.marketing')}</option>
+                  <option value="organizer">{t('admin.users.roles.organizer')}</option>
+                  <option value="admin">{t('admin.users.roles.admin')}</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-primary-dark mb-1.5">Language Preference</label>
+                <select value={editForm.languagePreference}
+                  onChange={(e) => setEditForm({ ...editForm, languagePreference: e.target.value })}
+                  className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow min-h-[44px]">
+                  <option value="">Not set</option>
+                  <option value="en">English</option>
+                  <option value="es">Espa&#241;ol</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-primary-dark mb-1.5">Account Status</label>
+                <select value={editForm.accountStatus}
+                  onChange={(e) => setEditForm({ ...editForm, accountStatus: e.target.value })}
+                  className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow min-h-[44px]">
+                  <option value="active">Active</option>
+                  <option value="unclaimed">Unclaimed</option>
+                  <option value="suspended">Suspended</option>
+                </select>
+              </div>
+              <div className="flex gap-3 pt-2">
+                <Button type="button" variant="outline" onClick={() => setEditingUser(null)} className="flex-1 min-h-[44px]">Cancel</Button>
+                <Button type="submit" isLoading={saving} className="flex-1 min-h-[44px]">Save Changes</Button>
+              </div>
+            </form>
+          </Card>
+        </div>
+      )}
+
+      <AdminMobileStyles />
     </div>
   );
 }

frontend/src/app/api/revalidate/route.ts

@@ -0,0 +1,31 @@
+import { revalidateTag } from 'next/cache';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { secret, tag } = body;
+
+    // Validate the revalidation secret
+    const revalidateSecret = process.env.REVALIDATE_SECRET;
+    if (!revalidateSecret || secret !== revalidateSecret) {
+      return NextResponse.json({ error: 'Invalid secret' }, { status: 401 });
+    }
+
+    // Validate tag(s) - supports single tag or array of tags
+    const allowedTags = ['events-sitemap', 'next-event'];
+    const tags: string[] = Array.isArray(tag) ? tag : [tag];
+    const invalidTags = tags.filter((t: string) => !allowedTags.includes(t));
+    if (tags.length === 0 || invalidTags.length > 0) {
+      return NextResponse.json({ error: 'Invalid tag' }, { status: 400 });
+    }
+
+    for (const t of tags) {
+      revalidateTag(t);
+    }
+
+    return NextResponse.json({ revalidated: true, tags, now: Date.now() });
+  } catch {
+    return NextResponse.json({ error: 'Failed to revalidate' }, { status: 500 });
+  }
+}

frontend/src/app/globals.css

@@ -99,3 +99,57 @@
     text-wrap: balance;
   }
 }
+
+/* TipTap Rich Text Editor Styles */
+.ProseMirror {
+  outline: none;
+}
+
+.ProseMirror p.is-editor-empty:first-child::before {
+  @apply text-gray-400 pointer-events-none float-left h-0;
+  content: attr(data-placeholder);
+}
+
+.ProseMirror > * + * {
+  margin-top: 0.75em;
+}
+
+.ProseMirror h1 {
+  @apply text-2xl font-bold mt-6 mb-3;
+}
+
+.ProseMirror h2 {
+  @apply text-xl font-bold mt-5 mb-2;
+}
+
+.ProseMirror h3 {
+  @apply text-lg font-semibold mt-4 mb-2;
+}
+
+.ProseMirror ul {
+  @apply list-disc list-inside my-3;
+}
+
+.ProseMirror ol {
+  @apply list-decimal list-inside my-3;
+}
+
+.ProseMirror li {
+  @apply my-1;
+}
+
+.ProseMirror blockquote {
+  @apply border-l-4 border-gray-300 pl-4 my-4 italic text-gray-600;
+}
+
+.ProseMirror hr {
+  @apply border-t border-gray-300 my-6;
+}
+
+.ProseMirror strong {
+  @apply font-bold;
+}
+
+.ProseMirror em {
+  @apply italic;
+}

frontend/src/app/linktree/page.tsx

@@ -2,12 +2,13 @@
 
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 import { useLanguage } from '@/context/LanguageContext';
 import { eventsApi, Event } from '@/lib/api';
+import { formatPrice, formatDateShort, formatTime } from '@/lib/utils';
 import { 
   CalendarIcon, 
   MapPinIcon,
-  ChatBubbleLeftRightIcon,
 } from '@heroicons/react/24/outline';
 
 export default function LinktreePage() {
@@ -23,25 +24,22 @@ export default function LinktreePage() {
 
   useEffect(() => {
     eventsApi.getNextUpcoming()
-      .then(({ event }) => setNextEvent(event))
+      .then(({ event }) => {
+        if (event) {
+          const endTime = event.endDatetime || event.startDatetime;
+          if (new Date(endTime).getTime() <= Date.now()) {
+            setNextEvent(null);
+            return;
+          }
+        }
+        setNextEvent(event);
+      })
       .catch(console.error)
       .finally(() => setLoading(false));
   }, []);
 
-  const formatDate = (dateStr: string) => {
+  const formatDate = (dateStr: string) => formatDateShort(dateStr, locale as 'en' | 'es');
-    return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
+  const fmtTime = (dateStr: string) => formatTime(dateStr, locale as 'en' | 'es');
-      weekday: 'short',
-      month: 'short',
-      day: 'numeric',
-    });
-  };
-
-  const formatTime = (dateStr: string) => {
-    return new Date(dateStr).toLocaleTimeString(locale === 'es' ? 'es-ES' : 'en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  };
 
   // Handle both full URLs and handles
   const instagramUrl = instagramHandle 
@@ -61,8 +59,8 @@ export default function LinktreePage() {
       <div className="max-w-md mx-auto px-4 py-8 pb-16">
         {/* Profile Header */}
         <div className="text-center mb-8">
-          <div className="w-24 h-24 mx-auto bg-primary-yellow rounded-full flex items-center justify-center mb-4 shadow-lg">
+          <div className="w-24 h-24 mx-auto rounded-full overflow-hidden flex items-center justify-center mb-4 shadow-lg bg-white">
-            <ChatBubbleLeftRightIcon className="w-12 h-12 text-primary-dark" />
+            <Image src="/images/spanglish-icon.png" alt="Spanglish" width={96} height={96} className="object-contain" />
           </div>
           <h1 className="text-2xl font-bold text-white">Spanglish</h1>
           <p className="text-gray-400 mt-1">{t('linktree.tagline')}</p>
@@ -79,7 +77,7 @@ export default function LinktreePage() {
               <div className="animate-spin w-6 h-6 border-2 border-primary-yellow border-t-transparent rounded-full mx-auto" />
             </div>
           ) : nextEvent ? (
-            <Link href={`/book/${nextEvent.id}`} className="block group">
+            <Link href={`/events/${nextEvent.id}`} className="block group">
               <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-5 border border-white/10 transition-all duration-300 hover:bg-white/15 hover:scale-[1.02] hover:shadow-xl">
                 <h3 className="font-bold text-lg text-white group-hover:text-primary-yellow transition-colors">
                   {locale === 'es' && nextEvent.titleEs ? nextEvent.titleEs : nextEvent.title}
@@ -88,7 +86,7 @@ export default function LinktreePage() {
                 <div className="mt-3 space-y-2">
                   <div className="flex items-center gap-2 text-gray-300 text-sm">
                     <CalendarIcon className="w-4 h-4 text-primary-yellow flex-shrink-0" />
-                    <span>{formatDate(nextEvent.startDatetime)} • {formatTime(nextEvent.startDatetime)}</span>
+                    <span>{formatDate(nextEvent.startDatetime)} • {fmtTime(nextEvent.startDatetime)}</span>
                   </div>
                   <div className="flex items-center gap-2 text-gray-300 text-sm">
                     <MapPinIcon className="w-4 h-4 text-primary-yellow flex-shrink-0" />
@@ -100,7 +98,7 @@ export default function LinktreePage() {
                   <span className="font-bold text-primary-yellow">
                     {nextEvent.price === 0 
                       ? t('events.details.free')
-                      : `${nextEvent.price.toLocaleString()} ${nextEvent.currency}`}
+                      : formatPrice(nextEvent.price, nextEvent.currency)}
                   </span>
                   {!nextEvent.externalBookingEnabled && (
                     <span className="text-sm text-gray-400">
@@ -110,7 +108,7 @@ export default function LinktreePage() {
                 </div>
 
                 <div className="mt-4 bg-primary-yellow text-primary-dark font-semibold py-3 px-4 rounded-xl text-center transition-all duration-200 group-hover:bg-yellow-400">
-                  {t('linktree.bookNow')}
+                  {t('linktree.moreInfo')}
                 </div>
               </div>
             </Link>