Merge pull request 'security-update' (#23) from security-update into main

Reviewed-on: #23

backend/.env.example

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

backend/package.json

@@ -25,7 +25,6 @@
     "hono": "^4.4.7",
     "ioredis": "^5.11.1",
     "jose": "^5.4.0",
-    "moment-timezone": "^0.6.2",
     "nanoid": "^5.0.7",
     "nodemailer": "^7.0.13",
     "pdfkit": "^0.17.2",

backend/src/db/migrate.ts

@@ -238,15 +238,6 @@ async function migrate() {
     try {
       await (db as any).run(sql`ALTER TABLE payments ADD COLUMN reminder_sent_at TEXT`);
     } catch (e) { /* column may already exist */ }
-    try {
-      await (db as any).run(sql`ALTER TABLE payments ADD COLUMN lnbits_invoice TEXT`);
-    } catch (e) { /* column may already exist */ }
-    try {
-      await (db as any).run(sql`ALTER TABLE payments ADD COLUMN lnbits_expires_at TEXT`);
-    } catch (e) { /* column may already exist */ }
-    try {
-      await (db as any).run(sql`ALTER TABLE payments ADD COLUMN lnbits_amount_sats INTEGER`);
-    } catch (e) { /* column may already exist */ }
 
     // Invoices table
     await (db as any).run(sql`
@@ -728,15 +719,6 @@ async function migrate() {
     try {
       await (db as any).execute(sql`ALTER TABLE payments ADD COLUMN reminder_sent_at TIMESTAMP`);
     } catch (e) { /* column may already exist */ }
-    try {
-      await (db as any).execute(sql`ALTER TABLE payments ADD COLUMN lnbits_invoice TEXT`);
-    } catch (e) { /* column may already exist */ }
-    try {
-      await (db as any).execute(sql`ALTER TABLE payments ADD COLUMN lnbits_expires_at TIMESTAMP`);
-    } catch (e) { /* column may already exist */ }
-    try {
-      await (db as any).execute(sql`ALTER TABLE payments ADD COLUMN lnbits_amount_sats INTEGER`);
-    } catch (e) { /* column may already exist */ }
 
     // Invoices table
     await (db as any).execute(sql`

backend/src/db/schema.ts

@@ -104,7 +104,7 @@ export const sqliteTickets = sqliteTable('tickets', {
   attendeePhone: text('attendee_phone'),
   attendeeRuc: text('attendee_ruc'), // Paraguayan tax ID for invoicing
   preferredLanguage: text('preferred_language'),
-  status: text('status', { enum: ['pending', 'confirmed', 'cancelled', 'checked_in', 'on_hold'] }).notNull().default('pending'),
+  status: text('status', { enum: ['pending', 'confirmed', 'cancelled', 'checked_in'] }).notNull().default('pending'),
   checkinAt: text('checkin_at'),
   checkedInByAdminId: text('checked_in_by_admin_id').references(() => sqliteUsers.id), // Who performed the check-in
   qrCode: text('qr_code'),
@@ -119,11 +119,8 @@ export const sqlitePayments = sqliteTable('payments', {
   provider: text('provider', { enum: ['bancard', 'lightning', 'cash', 'bank_transfer', 'tpago'] }).notNull(),
   amount: real('amount').notNull(),
   currency: text('currency').notNull().default('PYG'),
-  status: text('status', { enum: ['pending', 'pending_approval', 'paid', 'refunded', 'failed', 'cancelled', 'on_hold'] }).notNull().default('pending'),
+  status: text('status', { enum: ['pending', 'pending_approval', 'paid', 'refunded', 'failed', 'cancelled'] }).notNull().default('pending'),
   reference: text('reference'),
-  lnbitsInvoice: text('lnbits_invoice'), // BOLT11 string, stored so an unpaid invoice can be redisplayed without a new LNbits call
-  lnbitsExpiresAt: text('lnbits_expires_at'), // When lnbitsInvoice expires
-  lnbitsAmountSats: integer('lnbits_amount_sats'), // Sats amount for display (from LNbits' fiat conversion)
   userMarkedPaidAt: text('user_marked_paid_at'), // When user clicked "I Have Paid"
   payerName: text('payer_name'), // Name of payer if different from attendee
   paidAt: text('paid_at'),
@@ -479,9 +476,6 @@ export const pgPayments = pgTable('payments', {
   currency: varchar('currency', { length: 10 }).notNull().default('PYG'),
   status: varchar('status', { length: 20 }).notNull().default('pending'),
   reference: varchar('reference', { length: 255 }),
-  lnbitsInvoice: pgText('lnbits_invoice'), // BOLT11 string, stored so an unpaid invoice can be redisplayed without a new LNbits call
-  lnbitsExpiresAt: timestamp('lnbits_expires_at'), // When lnbitsInvoice expires
-  lnbitsAmountSats: pgInteger('lnbits_amount_sats'), // Sats amount for display (from LNbits' fiat conversion)
   userMarkedPaidAt: timestamp('user_marked_paid_at'),
   payerName: varchar('payer_name', { length: 255 }), // Name of payer if different from attendee
   paidAt: timestamp('paid_at'),

backend/src/index.ts

@@ -26,8 +26,6 @@ import faqRoutes from './routes/faq.js';
 import emailService from './lib/email.js';
 import { initEmailQueue } from './lib/emailQueue.js';
 import { startBookingCleanup } from './lib/bookingCleanup.js';
-import { startHoldSweep } from './lib/holdSweep.js';
-import { startEventEndSweep } from './lib/eventEndSweep.js';
 import { getLock } from './lib/stores/lock.js';
 import { describeBackends, describeRedis, logSelectedBackends } from './lib/backends.js';
 
@@ -1934,12 +1932,6 @@ initEmailQueue(emailService);
 // Periodically expire abandoned pending bookings so they stop holding seats.
 startBookingCleanup();
 
-// Periodically put stale pending-approval payments on hold, releasing their seats.
-startHoldSweep();
-
-// Periodically auto-reject unconfirmed payments once their event is over (no email).
-startEventEndSweep();
-
 // Initialize email templates on startup.
 // Guarded by a distributed lock so that, when running multiple replicas, only
 // one instance seeds/updates templates per boot instead of all of them racing.

backend/src/lib/eventEndSweep.ts

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

backend/src/lib/holdRecovery.ts

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

backend/src/lib/holdSweep.ts

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

backend/src/lib/lnbits.ts

@@ -36,11 +36,6 @@ export interface CreateInvoiceParams {
   extra?: Record<string, any>; // Additional metadata
 }
 
-// How long a booking's Lightning invoice is valid for, in seconds. Shared
-// between initial booking creation and invoice regeneration so both produce
-// invoices with the same lifetime.
-export const LNBITS_INVOICE_EXPIRY_SECONDS = 900; // 15 minutes
-
 /**
  * Check if LNbits is configured
  */

backend/src/lib/utils.ts

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

backend/src/routes/admin.ts

@@ -76,14 +76,7 @@ adminRouter.get('/dashboard', requireAuth(['admin', 'organizer']), async (c) =>
       .from(payments)
       .where(eq((payments as any).status, 'pending'))
   );
-
-  const onHoldPayments = await dbGet<any>(
-    (db as any)
-      .select({ count: sql<number>`count(*)` })
-      .from(payments)
-      .where(eq((payments as any).status, 'on_hold'))
-  );
-
+  
   const revenueRow = await dbGet<any>(
     (db as any)
       .select({ total: sql<number>`COALESCE(SUM(${(payments as any).amount}), 0)` })
@@ -115,7 +108,6 @@ adminRouter.get('/dashboard', requireAuth(['admin', 'organizer']), async (c) =>
         totalTickets: totalTickets?.count || 0,
         confirmedTickets: confirmedTickets?.count || 0,
         pendingPayments: pendingPayments?.count || 0,
-        onHoldPayments: onHoldPayments?.count || 0,
         totalRevenue,
         newContacts: newContacts?.count || 0,
         totalSubscribers: totalSubscribers?.count || 0,
@@ -221,7 +213,6 @@ adminRouter.get('/export/tickets', requireAuth(['admin']), async (c) => {
         userName: user?.name,
         userEmail: user?.email,
         userPhone: user?.phone,
-        attendeeRuc: ticket.attendeeRuc || user?.rucNumber || null,
         eventTitle: event?.title,
         eventDate: event?.startDatetime,
         paymentStatus: payment?.status,
@@ -300,7 +291,6 @@ adminRouter.get('/events/:eventId/attendees/export', requireAuth(['admin']), asy
         'Full Name': fullName,
         'Email': ticket.attendeeEmail || '',
         'Phone': ticket.attendeePhone || '',
-        'RUC': ticket.attendeeRuc || '',
         'Status': ticket.status,
         'Checked In': isCheckedIn ? 'true' : 'false',
         'Check-in Time': ticket.checkinAt || '',
@@ -312,7 +302,7 @@ adminRouter.get('/events/:eventId/attendees/export', requireAuth(['admin']), asy
   );
 
   const columns = [
-    'Ticket ID', 'Full Name', 'Email', 'Phone', 'RUC',
+    'Ticket ID', 'Full Name', 'Email', 'Phone',
     'Status', 'Checked In', 'Check-in Time', 'Payment Status',
     'Booked At', 'Notes',
   ];
@@ -390,13 +380,12 @@ adminRouter.get('/events/:eventId/tickets/export', requireAuth(['admin']), async
     });
   }
 
-  const columns = ['Ticket ID', 'Booking ID', 'Attendee Name', 'RUC', 'Status', 'Check-in Time', 'Booked At'];
+  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(' '),
-    'RUC': ticket.attendeeRuc || '',
     'Status': ticket.status,
     'Check-in Time': ticket.checkinAt || '',
     'Booked At': ticket.createdAt || '',
@@ -469,7 +458,6 @@ adminRouter.get('/export/financial', requireAuth(['admin']), async (c) => {
         attendeeFirstName: ticket.attendeeFirstName,
         attendeeLastName: ticket.attendeeLastName,
         attendeeEmail: ticket.attendeeEmail,
-        attendeeRuc: ticket.attendeeRuc || null,
         eventId: event?.id,
         eventTitle: event?.title,
         eventDate: event?.startDatetime,

backend/src/routes/lnbits.ts

@@ -1,15 +1,9 @@
 import { Hono } from 'hono';
 import { streamSSE } from 'hono/streaming';
-import { db, dbGet, dbAll, tickets, payments, events } from '../db/index.js';
-import { eq, and, inArray } from 'drizzle-orm';
-import { getNow, toDbDate } from '../lib/utils.js';
-import {
-  verifyWebhookPayment,
-  getPaymentStatus,
-  createInvoice,
-  isLNbitsConfigured,
-  LNBITS_INVOICE_EXPIRY_SECONDS,
-} from '../lib/lnbits.js';
+import { db, dbGet, dbAll, tickets, payments } from '../db/index.js';
+import { eq, and } from 'drizzle-orm';
+import { getNow } from '../lib/utils.js';
+import { verifyWebhookPayment, getPaymentStatus } from '../lib/lnbits.js';
 import emailService from '../lib/email.js';
 import { getPubSub } from '../lib/stores/pubsub.js';
 import { getLock } from '../lib/stores/lock.js';
@@ -397,145 +391,6 @@ lnbitsRouter.get('/stream/:ticketId', async (c) => {
   });
 });
 
-/**
- * Get a Lightning invoice for a ticket to pay or re-pay.
- *
- * Reuses the stored invoice if it still has more than 5 minutes of validity
- * left; otherwise generates a fresh one from LNbits. This is what lets a user
- * come back to an unpaid Lightning booking later (e.g. from "Pay now" on the
- * dashboard) instead of hitting a dead end.
- */
-lnbitsRouter.post('/invoice/:ticketId', async (c) => {
-  const ticketId = c.req.param('ticketId');
-
-  const ticket = await dbGet<any>(
-    (db as any).select().from(tickets).where(eq((tickets as any).id, ticketId))
-  );
-  if (!ticket) {
-    return c.json({ error: 'Ticket not found' }, 404);
-  }
-
-  const payment = await dbGet<any>(
-    (db as any).select().from(payments).where(eq((payments as any).ticketId, ticketId))
-  );
-  if (!payment) {
-    return c.json({ error: 'Payment not found' }, 404);
-  }
-
-  if (payment.provider !== 'lightning') {
-    return c.json({ error: 'This booking is not a Lightning payment' }, 400);
-  }
-
-  if (ticket.status === 'confirmed' || payment.status === 'paid') {
-    return c.json({ alreadyPaid: true });
-  }
-
-  if (ticket.status !== 'pending' || payment.status !== 'pending') {
-    return c.json({
-      error: 'This booking is no longer active. Please make a new booking.',
-    }, 400);
-  }
-
-  // Gather every ticket/payment in the booking group - a multi-ticket booking
-  // shares a single Lightning invoice for the combined total.
-  let groupTickets: any[] = [ticket];
-  if (ticket.bookingId) {
-    groupTickets = await dbAll<any>(
-      (db as any).select().from(tickets).where(eq((tickets as any).bookingId, ticket.bookingId))
-    );
-  }
-  const groupPayments = await dbAll<any>(
-    (db as any).select().from(payments).where(inArray((payments as any).ticketId, groupTickets.map((t: any) => t.id)))
-  );
-  const invoiceHolder = groupPayments.find((p: any) => p.reference) || payment;
-  const totalAmount = groupPayments.reduce((sum: number, p: any) => sum + Number(p.amount), 0);
-  const currency = invoiceHolder.currency;
-
-  const now = Date.now();
-  const FIVE_MIN_MS = 5 * 60 * 1000;
-  const expiresAtMs = invoiceHolder.lnbitsExpiresAt ? new Date(invoiceHolder.lnbitsExpiresAt).getTime() : 0;
-
-  if (invoiceHolder.reference && invoiceHolder.lnbitsInvoice && expiresAtMs - now > FIVE_MIN_MS) {
-    return c.json({
-      invoice: {
-        paymentHash: invoiceHolder.reference,
-        paymentRequest: invoiceHolder.lnbitsInvoice,
-        amount: invoiceHolder.lnbitsAmountSats || 0,
-        fiatAmount: totalAmount,
-        fiatCurrency: currency,
-        expiresAt: invoiceHolder.lnbitsExpiresAt,
-      },
-      reused: true,
-    });
-  }
-
-  // No usable stored invoice (never created, expired, or expiring soon) - get a fresh one.
-  if (!isLNbitsConfigured()) {
-    return c.json({ error: 'Bitcoin Lightning payments are not available at this time' }, 400);
-  }
-
-  const event = await dbGet<any>(
-    (db as any).select().from(events).where(eq((events as any).id, ticket.eventId))
-  );
-
-  const apiUrl = process.env.API_URL || 'http://localhost:3001';
-  const webhookSecret = process.env.LNBITS_WEBHOOK_SECRET || '';
-  const webhookUrl = webhookSecret
-    ? `${apiUrl}/api/lnbits/webhook?token=${encodeURIComponent(webhookSecret)}`
-    : `${apiUrl}/api/lnbits/webhook`;
-  const attendeeName = `${ticket.attendeeFirstName} ${ticket.attendeeLastName || ''}`.trim();
-
-  try {
-    const lnbitsInvoice = await createInvoice({
-      amount: totalAmount,
-      unit: currency,
-      memo: `Spanglish: ${event?.title || 'Event'} - ${attendeeName}${groupTickets.length > 1 ? ` (${groupTickets.length} tickets)` : ''}`,
-      webhookUrl,
-      expiry: LNBITS_INVOICE_EXPIRY_SECONDS,
-      extra: {
-        ticketId: invoiceHolder.ticketId,
-        bookingId: ticket.bookingId || null,
-        ticketIds: groupTickets.map((t: any) => t.id),
-        eventId: ticket.eventId,
-        eventTitle: event?.title,
-        attendeeName,
-        attendeeEmail: ticket.attendeeEmail,
-        ticketCount: groupTickets.length,
-      },
-    });
-
-    const lnbitsExpiresAt = toDbDate(new Date(now + LNBITS_INVOICE_EXPIRY_SECONDS * 1000));
-
-    await (db as any)
-      .update(payments)
-      .set({
-        reference: lnbitsInvoice.paymentHash,
-        lnbitsInvoice: lnbitsInvoice.paymentRequest,
-        lnbitsExpiresAt,
-        lnbitsAmountSats: lnbitsInvoice.amount,
-        updatedAt: getNow(),
-      })
-      .where(eq((payments as any).id, invoiceHolder.id));
-
-    return c.json({
-      invoice: {
-        paymentHash: lnbitsInvoice.paymentHash,
-        paymentRequest: lnbitsInvoice.paymentRequest,
-        amount: lnbitsInvoice.amount,
-        fiatAmount: lnbitsInvoice.fiatAmount ?? totalAmount,
-        fiatCurrency: lnbitsInvoice.fiatCurrency ?? currency,
-        expiresAt: lnbitsExpiresAt,
-      },
-      reused: false,
-    });
-  } catch (error: any) {
-    console.error('Failed to create Lightning invoice:', error);
-    return c.json({
-      error: `Failed to create Lightning invoice: ${error.message || 'Unknown error'}`,
-    }, 500);
-  }
-});
-
 /**
  * Get payment status for a ticket (fallback polling endpoint)
  */

backend/src/routes/payments.ts

@@ -2,16 +2,15 @@ import { Hono } from 'hono';
 import { zValidator } from '@hono/zod-validator';
 import { z } from 'zod';
 import { db, dbGet, dbAll, payments, tickets, events } from '../db/index.js';
-import { eq, desc, and, or, sql, inArray } from 'drizzle-orm';
+import { eq, desc, and, or, sql } from 'drizzle-orm';
 import { requireAuth } from '../lib/auth.js';
 import { getNow } from '../lib/utils.js';
 import emailService from '../lib/email.js';
-import { reserveOnHoldBooking, HoldCapacityError } from '../lib/holdRecovery.js';
 
 const paymentsRouter = new Hono();
 
 const updatePaymentSchema = z.object({
-  status: z.enum(['pending', 'pending_approval', 'paid', 'refunded', 'failed', 'on_hold']),
+  status: z.enum(['pending', 'pending_approval', 'paid', 'refunded', 'failed']),
   reference: z.string().optional(),
   adminNote: z.string().optional(),
 });
@@ -86,7 +85,6 @@ paymentsRouter.get('/', requireAuth(['admin']), async (c) => {
           attendeeLastName: ticket.attendeeLastName,
           attendeeEmail: ticket.attendeeEmail,
           attendeePhone: ticket.attendeePhone,
-          attendeeRuc: ticket.attendeeRuc,
           status: ticket.status,
         } : null,
         event: event ? {
@@ -97,7 +95,7 @@ paymentsRouter.get('/', requireAuth(['admin']), async (c) => {
       };
     })
   );
-
+  
   // Filter by event(s)
   if (eventId) {
     enrichedPayments = enrichedPayments.filter((p: any) => p.event?.id === eventId);
@@ -166,13 +164,12 @@ paymentsRouter.get('/pending-approval', requireAuth(['admin', 'organizer']), asy
 
 // Get payment statistics (admin) — registered before /:id so "stats" is not parsed as an id
 paymentsRouter.get('/stats/overview', requireAuth(['admin']), async (c) => {
-  const [totalRow, pendingRow, paidRow, refundedRow, failedRow, onHoldRow, revenueRow] = await Promise.all([
+  const [totalRow, pendingRow, paidRow, refundedRow, failedRow, revenueRow] = await Promise.all([
     dbGet<any>((db as any).select({ count: sql<number>`count(*)` }).from(payments)),
     dbGet<any>((db as any).select({ count: sql<number>`count(*)` }).from(payments).where(eq((payments as any).status, 'pending'))),
     dbGet<any>((db as any).select({ count: sql<number>`count(*)` }).from(payments).where(eq((payments as any).status, 'paid'))),
     dbGet<any>((db as any).select({ count: sql<number>`count(*)` }).from(payments).where(eq((payments as any).status, 'refunded'))),
     dbGet<any>((db as any).select({ count: sql<number>`count(*)` }).from(payments).where(eq((payments as any).status, 'failed'))),
-    dbGet<any>((db as any).select({ count: sql<number>`count(*)` }).from(payments).where(eq((payments as any).status, 'on_hold'))),
     dbGet<any>((db as any).select({ total: sql<number>`COALESCE(SUM(${(payments as any).amount}), 0)` }).from(payments).where(eq((payments as any).status, 'paid'))),
   ]);
 
@@ -183,7 +180,6 @@ paymentsRouter.get('/stats/overview', requireAuth(['admin']), async (c) => {
       paid: Number(paidRow?.count || 0),
       refunded: Number(refundedRow?.count || 0),
       failed: Number(failedRow?.count || 0),
-      onHold: Number(onHoldRow?.count || 0),
       totalRevenue: Number(revenueRow?.total || 0),
     },
   });
@@ -321,13 +317,13 @@ paymentsRouter.post('/:id/approve', requireAuth(['admin', 'organizer']), zValida
     return c.json({ error: 'Payment not found' }, 404);
   }
   
-  // Can approve pending, pending_approval, or on_hold payments
-  if (!['pending', 'pending_approval', 'on_hold'].includes(payment.status)) {
+  // Can approve pending or pending_approval payments
+  if (!['pending', 'pending_approval'].includes(payment.status)) {
     return c.json({ error: 'Payment cannot be approved in its current state' }, 400);
   }
-
+  
   const now = getNow();
-
+  
   // Get the ticket associated with this payment
   const ticket = await dbGet<any>(
     (db as any)
@@ -335,10 +331,10 @@ paymentsRouter.post('/:id/approve', requireAuth(['admin', 'organizer']), zValida
       .from(tickets)
       .where(eq((tickets as any).id, payment.ticketId))
   );
-
+  
   // Check if this is part of a multi-ticket booking
   let ticketsToConfirm: any[] = [ticket];
-
+  
   if (ticket?.bookingId) {
     // Get all tickets in this booking
     ticketsToConfirm = await dbAll(
@@ -349,54 +345,27 @@ paymentsRouter.post('/:id/approve', requireAuth(['admin', 'organizer']), zValida
     );
     console.log(`[Payment] Approving multi-ticket booking: ${ticket.bookingId}, ${ticketsToConfirm.length} tickets`);
   }
-
-  if (payment.status === 'on_hold') {
-    // The seat was released when this booking went on hold - re-check capacity
-    // before confirming it directly.
-    try {
-      await reserveOnHoldBooking(
-        ticket.eventId,
-        ticketsToConfirm.map((t: any) => t.id),
-        'confirmed',
-        'paid',
-        { paidByAdminId: user.id }
-      );
-    } catch (err) {
-      if (err instanceof HoldCapacityError) {
-        return c.json({
-          error: 'This event is now full. Your spot was released after the payment deadline passed.',
-        }, 400);
-      }
-      throw err;
-    }
-    if (adminNote) {
-      await (db as any)
-        .update(payments)
-        .set({ adminNote })
-        .where(inArray((payments as any).ticketId, ticketsToConfirm.map((t: any) => t.id)));
-    }
-  } else {
-    // Update all payments in the booking to paid
-    for (const t of ticketsToConfirm) {
-      await (db as any)
-        .update(payments)
-        .set({
-          status: 'paid',
-          paidAt: now,
-          paidByAdminId: user.id,
-          adminNote: adminNote || payment.adminNote,
-          updatedAt: now,
-        })
-        .where(eq((payments as any).ticketId, (t as any).id));
-
-      // Update ticket status to confirmed
-      await (db as any)
-        .update(tickets)
-        .set({ status: 'confirmed' })
-        .where(eq((tickets as any).id, (t as any).id));
-    }
+  
+  // Update all payments in the booking to paid
+  for (const t of ticketsToConfirm) {
+    await (db as any)
+      .update(payments)
+      .set({ 
+        status: 'paid',
+        paidAt: now,
+        paidByAdminId: user.id,
+        adminNote: adminNote || payment.adminNote,
+        updatedAt: now,
+      })
+      .where(eq((payments as any).ticketId, (t as any).id));
+    
+    // Update ticket status to confirmed
+    await (db as any)
+      .update(tickets)
+      .set({ status: 'confirmed' })
+      .where(eq((tickets as any).id, (t as any).id));
   }
-
+  
   // Send confirmation emails asynchronously (if sendEmail is true, which is the default)
   if (sendEmail !== false) {
     Promise.all([
@@ -436,7 +405,7 @@ paymentsRouter.post('/:id/reject', requireAuth(['admin', 'organizer']), zValidat
     return c.json({ error: 'Payment not found' }, 404);
   }
   
-  if (!['pending', 'pending_approval', 'on_hold'].includes(payment.status)) {
+  if (!['pending', 'pending_approval'].includes(payment.status)) {
     return c.json({ error: 'Payment cannot be rejected in its current state' }, 400);
   }
   
@@ -495,59 +464,6 @@ paymentsRouter.post('/:id/reject', requireAuth(['admin', 'organizer']), zValidat
   return c.json({ payment: updated, message: 'Payment rejected and booking cancelled' });
 });
 
-// Reactivate an on-hold payment back to pending_approval (admin) - re-reserves the seat
-paymentsRouter.post('/:id/reactivate', requireAuth(['admin', 'organizer']), async (c) => {
-  const id = c.req.param('id');
-
-  const payment = await dbGet<any>(
-    (db as any).select().from(payments).where(eq((payments as any).id, id))
-  );
-
-  if (!payment) {
-    return c.json({ error: 'Payment not found' }, 404);
-  }
-
-  if (payment.status !== 'on_hold') {
-    return c.json({ error: 'Only on-hold payments can be reactivated' }, 400);
-  }
-
-  const ticket = await dbGet<any>(
-    (db as any).select().from(tickets).where(eq((tickets as any).id, payment.ticketId))
-  );
-  if (!ticket) {
-    return c.json({ error: 'Ticket not found' }, 404);
-  }
-
-  let ticketsToReactivate: any[] = [ticket];
-  if (ticket.bookingId) {
-    ticketsToReactivate = await dbAll<any>(
-      (db as any).select().from(tickets).where(eq((tickets as any).bookingId, ticket.bookingId))
-    );
-  }
-
-  try {
-    await reserveOnHoldBooking(
-      ticket.eventId,
-      ticketsToReactivate.map((t: any) => t.id),
-      'pending',
-      'pending_approval'
-    );
-  } catch (err) {
-    if (err instanceof HoldCapacityError) {
-      return c.json({
-        error: 'This event is now full. Your spot was released after the payment deadline passed.',
-      }, 400);
-    }
-    throw err;
-  }
-
-  const updated = await dbGet(
-    (db as any).select().from(payments).where(eq((payments as any).id, id))
-  );
-
-  return c.json({ payment: updated, message: 'Booking reactivated and pending admin review' });
-});
-
 // Send payment reminder email
 paymentsRouter.post('/:id/send-reminder', requireAuth(['admin', 'organizer']), async (c) => {
   const id = c.req.param('id');

backend/src/routes/tickets.ts

@@ -4,12 +4,11 @@ import { z } from 'zod';
 import { db, dbGet, dbAll, tickets, events, users, payments, paymentOptions, eventPaymentOverrides, siteSettings, isSqlite } from '../db/index.js';
 import { eq, and, or, sql, inArray } from 'drizzle-orm';
 import { requireAuth, getAuthUser } from '../lib/auth.js';
-import { generateId, generateTicketCode, getNow, toDbDate, calculateAvailableSeats, isEventSoldOut } from '../lib/utils.js';
-import { createInvoice, isLNbitsConfigured, LNBITS_INVOICE_EXPIRY_SECONDS } from '../lib/lnbits.js';
+import { generateId, generateTicketCode, getNow, calculateAvailableSeats, isEventSoldOut } from '../lib/utils.js';
+import { createInvoice, isLNbitsConfigured } from '../lib/lnbits.js';
 import { rateLimitMiddleware } from '../lib/rateLimit.js';
 import emailService from '../lib/email.js';
 import { generateTicketPDF, generateCombinedTicketsPDF } from '../lib/pdf.js';
-import { reserveOnHoldBooking, HoldCapacityError } from '../lib/holdRecovery.js';
 
 const ticketsRouter = new Hono();
 
@@ -31,19 +30,11 @@ const createTicketSchema = z.object({
   preferredLanguage: z.enum(['en', 'es']).optional(),
   // 'bancard' intentionally excluded: no checkout integration exists for it
   paymentMethod: z.enum(['lightning', 'cash', 'bank_transfer', 'tpago']).default('cash'),
-  // Base + optional "-" + check digit; digits-only kept for older clients, normalized to dashed form on save
-  ruc: z.string().regex(/^(\d{6,10}|\d{5,8}-\d)$/, 'Invalid RUC format').optional().or(z.literal('')),
+  ruc: z.string().regex(/^\d{6,10}$/, 'Invalid RUC format').optional().or(z.literal('')),
   // Optional: array of attendees for multi-ticket booking (capped at MAX_TICKETS_PER_BOOKING)
   attendees: z.array(attendeeSchema).min(1).max(MAX_TICKETS_PER_BOOKING).optional(),
 });
 
-// Canonical stored RUC form is "base-checkdigit" (e.g. 1234567-9); older clients send digits only
-function normalizeRuc(ruc: string | undefined): string | null {
-  if (!ruc) return null;
-  if (ruc.includes('-')) return ruc;
-  return `${ruc.slice(0, -1)}-${ruc.slice(-1)}`;
-}
-
 // Maps a payment provider to the merged payment-option flag that enables it
 function isPaymentMethodEnabled(method: string, merged: Record<string, any>): boolean {
   const truthy = (v: any) => v === true || v === 1;
@@ -62,7 +53,7 @@ function isPaymentMethodEnabled(method: string, merged: Record<string, any>): bo
 }
 
 const updateTicketSchema = z.object({
-  status: z.enum(['pending', 'confirmed', 'cancelled', 'checked_in', 'on_hold']).optional(),
+  status: z.enum(['pending', 'confirmed', 'cancelled', 'checked_in']).optional(),
   adminNote: z.string().optional(),
 });
 
@@ -84,8 +75,7 @@ const adminCreateTicketSchema = z.object({
 // Book a ticket (public) - supports single or multi-ticket bookings
 ticketsRouter.post('/', zValidator('json', createTicketSchema), async (c) => {
   const data = c.req.valid('json');
-  const rucNumber = normalizeRuc(data.ruc);
-
+  
   // Determine attendees list (use attendees array if provided, otherwise single attendee from main fields)
   const attendeesList = data.attendees && data.attendees.length > 0
     ? data.attendees
@@ -177,21 +167,12 @@ ticketsRouter.post('/', zValidator('json', createTicketSchema), async (c) => {
       phone: data.phone || null,
       role: 'user',
       languagePreference: null,
-      rucNumber,
       createdAt: now,
       updatedAt: now,
     };
     await (db as any).insert(users).values(user);
-  } else if (rucNumber) {
-    // Keep the user's saved RUC up to date for future bookings, but never blank
-    // out an existing value if this booking didn't include one.
-    await (db as any)
-      .update(users)
-      .set({ rucNumber, updatedAt: now })
-      .where(eq((users as any).id, user.id));
-    user.rucNumber = rucNumber;
   }
-
+  
   // Check for duplicate booking (unless allowDuplicateBookings is enabled)
   const allowDuplicateBookings = globalPaymentOptions?.allowDuplicateBookings ?? false;
   
@@ -262,7 +243,7 @@ ticketsRouter.post('/', zValidator('json', createTicketSchema), async (c) => {
             attendeeLastName: attendee.lastName && attendee.lastName.trim() ? attendee.lastName.trim() : null,
             attendeeEmail: data.email,
             attendeePhone: data.phone && data.phone.trim() ? data.phone.trim() : null,
-            attendeeRuc: rucNumber,
+            attendeeRuc: data.ruc || null,
             preferredLanguage: data.preferredLanguage || null,
             status: 'pending',
             qrCode,
@@ -323,7 +304,7 @@ ticketsRouter.post('/', zValidator('json', createTicketSchema), async (c) => {
             attendeeLastName: attendee.lastName && attendee.lastName.trim() ? attendee.lastName.trim() : null,
             attendeeEmail: data.email,
             attendeePhone: data.phone && data.phone.trim() ? data.phone.trim() : null,
-            attendeeRuc: rucNumber,
+            attendeeRuc: data.ruc || null,
             preferredLanguage: data.preferredLanguage || null,
             status: 'pending',
             qrCode,
@@ -427,7 +408,7 @@ ticketsRouter.post('/', zValidator('json', createTicketSchema), async (c) => {
         unit: event.currency, // LNbits supports fiat currencies like USD, PYG, etc.
         memo: `Spanglish: ${event.title} - ${fullName}${ticketCount > 1 ? ` (${ticketCount} tickets)` : ''}`,
         webhookUrl,
-        expiry: LNBITS_INVOICE_EXPIRY_SECONDS, // 15 minutes expiry for faster UX
+        expiry: 900, // 15 minutes expiry for faster UX
         extra: {
           ticketId: primaryTicket.id,
           bookingId: ticketCount > 1 ? bookingId : null,
@@ -439,22 +420,13 @@ ticketsRouter.post('/', zValidator('json', createTicketSchema), async (c) => {
           ticketCount,
         },
       });
-
-      const lnbitsExpiresAt = toDbDate(new Date(Date.now() + LNBITS_INVOICE_EXPIRY_SECONDS * 1000));
-
-      // Update primary payment with the LNbits invoice - the BOLT11 string and
-      // expiry are persisted so the "Pay now" page can redisplay this same
-      // invoice later instead of erroring out on an unpaid Lightning booking.
+      
+      // Update primary payment with LNbits payment hash reference
       await (db as any)
         .update(payments)
-        .set({
-          reference: lnbitsInvoice.paymentHash,
-          lnbitsInvoice: lnbitsInvoice.paymentRequest,
-          lnbitsExpiresAt,
-          lnbitsAmountSats: lnbitsInvoice.amount,
-        })
+        .set({ reference: lnbitsInvoice.paymentHash })
         .where(eq((payments as any).id, primaryPayment.id));
-
+        
       (primaryPayment as any).reference = lnbitsInvoice.paymentHash;
     } catch (error: any) {
       console.error('Failed to create Lightning invoice:', error);
@@ -1132,47 +1104,26 @@ ticketsRouter.post('/:id/mark-paid', requireAuth(['admin', 'organizer', 'staff']
     );
   }
   
-  if (ticket.status === 'on_hold') {
-    // The seat was released when this booking went on hold - re-check capacity
-    // before confirming it directly.
-    try {
-      await reserveOnHoldBooking(
-        ticket.eventId,
-        ticketsToConfirm.map((t: any) => t.id),
-        'confirmed',
-        'paid',
-        { paidByAdminId: user.id }
-      );
-    } catch (err) {
-      if (err instanceof HoldCapacityError) {
-        return c.json({
-          error: 'This event is now full. Your spot was released after the payment deadline passed.',
-        }, 400);
-      }
-      throw err;
-    }
-  } else {
-    // Confirm all tickets in the booking
-    for (const t of ticketsToConfirm) {
-      // Update ticket status
-      await (db as any)
-        .update(tickets)
-        .set({ status: 'confirmed' })
-        .where(eq((tickets as any).id, t.id));
-
-      // Update payment status
-      await (db as any)
-        .update(payments)
-        .set({
-          status: 'paid',
-          paidAt: now,
-          paidByAdminId: user.id,
-          updatedAt: now,
-        })
-        .where(eq((payments as any).ticketId, t.id));
-    }
+  // Confirm all tickets in the booking
+  for (const t of ticketsToConfirm) {
+    // Update ticket status
+    await (db as any)
+      .update(tickets)
+      .set({ status: 'confirmed' })
+      .where(eq((tickets as any).id, t.id));
+    
+    // Update payment status
+    await (db as any)
+      .update(payments)
+      .set({ 
+        status: 'paid',
+        paidAt: now,
+        paidByAdminId: user.id,
+        updatedAt: now,
+      })
+      .where(eq((payments as any).ticketId, t.id));
   }
-
+  
   // Get payment for sending receipt
   const payment = await dbGet<any>(
     (db as any)
@@ -1243,55 +1194,18 @@ ticketsRouter.post('/:id/mark-payment-sent', rateLimitMiddleware({ max: 10, wind
   }
   
   if (payment.status === 'paid') {
-    return c.json({
-      payment,
+    return c.json({ 
+      payment, 
       message: 'Payment has already been confirmed.',
       alreadyProcessed: true,
     });
   }
-
-  // A booking that was auto-released after the hold threshold: recover it by
-  // re-reserving the seat(s) and moving back into the admin approval queue.
-  if (payment.status === 'on_hold') {
-    let ticketsToRecover: any[] = [ticket];
-    if (ticket.bookingId) {
-      ticketsToRecover = await dbAll<any>(
-        (db as any).select().from(tickets).where(eq((tickets as any).bookingId, ticket.bookingId))
-      );
-    }
-
-    try {
-      await reserveOnHoldBooking(
-        ticket.eventId,
-        ticketsToRecover.map((t: any) => t.id),
-        'pending',
-        'pending_approval',
-        { extraPaymentFields: { userMarkedPaidAt: getNow(), payerName: payerName?.trim() || null } }
-      );
-    } catch (err) {
-      if (err instanceof HoldCapacityError) {
-        return c.json({
-          error: 'This event is now full. Your spot was released after the payment deadline passed.',
-        }, 400);
-      }
-      throw err;
-    }
-
-    const recoveredPayment = await dbGet(
-      (db as any).select().from(payments).where(eq((payments as any).id, payment.id))
-    );
-
-    return c.json({
-      payment: recoveredPayment,
-      message: 'Payment marked as sent. Waiting for admin approval.',
-    });
-  }
-
+  
   // Only allow if currently pending
   if (payment.status !== 'pending') {
     return c.json({ error: 'Payment has already been processed' }, 400);
   }
-
+  
   const now = getNow();
   
   // Update payment status to pending_approval for this ticket and any siblings

backend/src/routes/users.ts

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

deploy/front-end_nginx.conf

@@ -18,28 +18,11 @@ server {
     }
 }
 
-# Canonical host is the apex (non-www). Redirect the www HTTPS vhost to it with a
-# 301 so only one host is served and indexed.
 server {
     listen 443 ssl;
     http2 on;
 
-    server_name www.spanglishcommunity.com;
-
-    ssl_certificate /etc/letsencrypt/live/spanglishcommunity.com/fullchain.pem;
-    ssl_certificate_key /etc/letsencrypt/live/spanglishcommunity.com/privkey.pem;
-
-    include /etc/letsencrypt/options-ssl-nginx.conf;
-    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
-
-    return 301 https://spanglishcommunity.com$request_uri;
-}
-
-server {
-    listen 443 ssl;
-    http2 on;
-
-    server_name spanglishcommunity.com;
+    server_name spanglishcommunity.com www.spanglishcommunity.com;
 
     # Upload size limit (covers same-origin /api uploads via this vhost)
     client_max_body_size 20m;

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

@@ -1,21 +1,22 @@
 import { useEffect } from 'react';
 import toast from 'react-hot-toast';
 import { ticketsApi } from '@/lib/api';
+import type { BookingStep } from '../_types';
 
 /**
- * Watch for Lightning payment confirmation while an invoice is on screen.
+ * Watch for Lightning payment confirmation while on the paying step.
  * SSE gives instant updates; a 3s poll runs in parallel as a safety net so a
  * buffered/stuck stream (e.g. a proxy that doesn't flush SSE) can't strand the UI.
  */
 export function useLightningWatcher(
-  active: boolean,
+  step: BookingStep,
   ticketId: string | undefined,
   locale: string,
-  onPaid: () => void,
-  onExpired: () => void
+  setPaymentPending: (value: boolean) => void,
+  setStep: (value: BookingStep) => void
 ) {
   useEffect(() => {
-    if (!active || !ticketId) return;
+    if (step !== 'paying' || !ticketId) return;
 
     let settled = false;
     let pollTimer: ReturnType<typeof setTimeout> | null = null;
@@ -24,14 +25,15 @@ export function useLightningWatcher(
       if (settled) return;
       settled = true;
       toast.success(locale === 'es' ? '¡Pago confirmado!' : 'Payment confirmed!');
-      onPaid();
+      setPaymentPending(false);
+      setStep('success');
     };
 
     const expire = () => {
       if (settled) return;
       settled = true;
       toast.error(locale === 'es' ? 'La factura ha expirado' : 'Invoice has expired');
-      onExpired();
+      setPaymentPending(false);
     };
 
     // Always same-origin so the streaming proxy route handler is used (it
@@ -77,5 +79,5 @@ export function useLightningWatcher(
       eventSource.close();
       if (pollTimer) clearTimeout(pollTimer);
     };
-  }, [active, ticketId, locale]);
+  }, [step, ticketId, locale]);
 }

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

@@ -8,17 +8,11 @@ import {
 } from '@heroicons/react/24/outline';
 import type { PaymentMethod, BookingResult } from '../_types';
 
-// Paraguayan RUC: 5-8 digit base + "-" + 1 check digit (DV), e.g. 1234567-9 or 80012345-0
-export const rucPattern = /^\d{5,8}-\d$/;
+export const rucPattern = /^\d{6,10}$/;
 
-/** Sanitize RUC input: digits and a single user-typed dash, max 10 chars. No dash is auto-inserted. */
+/** Format RUC input: digits only, max 10. */
 export function formatRuc(value: string): string {
-  const cleaned = value.replace(/[^\d-]/g, '');
-  const firstDash = cleaned.indexOf('-');
-  const oneDash = firstDash === -1
-    ? cleaned
-    : cleaned.slice(0, firstDash + 1) + cleaned.slice(firstDash + 1).replace(/-/g, '');
-  return oneDash.slice(0, 10);
+  return value.replace(/\D/g, '').slice(0, 10);
 }
 
 /** Truncate a long invoice string for display. */

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

@@ -226,10 +226,25 @@ export function BookingFormStep({
                     onBlur={handleRucBlur}
                     placeholder={t('booking.form.rucPlaceholder')}
                     error={errors.ruc}
+                    inputMode="numeric"
                     maxLength={10}
                     aria-label={t('booking.form.ruc')}
                   />
                 </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    {t('booking.form.preferredLanguage')}
+                  </label>
+                  <select
+                    value={formData.preferredLanguage}
+                    onChange={(e) => setFormData({ ...formData, preferredLanguage: e.target.value as 'en' | 'es' })}
+                    className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                  >
+                    <option value="en">English</option>
+                    <option value="es">Español</option>
+                  </select>
+                </div>
               </div>
             </Card>
 
@@ -320,7 +335,7 @@ export function BookingFormStep({
                       <button
                         key={method.id}
                         type="button"
-                        onClick={() => setFormData((prev) => ({ ...prev, paymentMethod: method.id }))}
+                        onClick={() => setFormData({ ...formData, paymentMethod: method.id })}
                         className={`w-full p-4 rounded-lg border-2 transition-all text-left flex items-start gap-4 ${
                           formData.paymentMethod === method.id
                             ? 'border-primary-yellow bg-primary-yellow/10'
@@ -362,9 +377,6 @@ export function BookingFormStep({
                   </>
                 )}
               </div>
-              {errors.paymentMethod && (
-                <p className="mt-3 text-sm text-red-600">{errors.paymentMethod}</p>
-              )}
             </Card>
 
             {/* Terms & Privacy agreement */}
@@ -418,7 +430,7 @@ export function BookingFormStep({
               size="lg"
               className="w-full"
               isLoading={submitting}
-              disabled={paymentMethods.length === 0 || !formData.paymentMethod || !agreedToTerms}
+              disabled={paymentMethods.length === 0 || !agreedToTerms}
             >
               {formData.paymentMethod === 'cash'
                 ? t('booking.form.reserveSpot')

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

@@ -12,8 +12,8 @@ export interface BookingFormData {
   lastName: string;
   email: string;
   phone: string;
-  // Empty until the user explicitly picks a method (no default selection).
-  paymentMethod: PaymentMethod | '';
+  preferredLanguage: 'en' | 'es';
+  paymentMethod: PaymentMethod;
   ruc: string;
 }
 

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

@@ -5,7 +5,7 @@ import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { useLanguage } from '@/context/LanguageContext';
 import { useAuth } from '@/context/AuthContext';
 import { eventsApi, ticketsApi, paymentOptionsApi, Event, PaymentOptionsConfig } from '@/lib/api';
-import { formatDateLong, formatTime, formatRucDisplay } from '@/lib/utils';
+import { formatDateLong, formatTime } from '@/lib/utils';
 import { isSafeExternalUrl } from '@/lib/safeRedirect';
 import toast from 'react-hot-toast';
 import type {
@@ -16,7 +16,7 @@ import type {
   PaymentMethod,
 } from './_types';
 import { buildPaymentMethods, formatRuc, rucPattern } from './_logic/booking';
-import { useLightningWatcher } from '@/hooks/useLightningWatcher';
+import { useLightningWatcher } from './_hooks/useLightningWatcher';
 import { PayingStep } from './_steps/PayingStep';
 import { ManualPaymentStep } from './_steps/ManualPaymentStep';
 import { PendingApprovalStep } from './_steps/PendingApprovalStep';
@@ -35,6 +35,7 @@ export default function BookingPage() {
   const [step, setStep] = useState<BookingStep>('form');
   const [submitting, setSubmitting] = useState(false);
   const [bookingResult, setBookingResult] = useState<BookingResult | null>(null);
+  const [, setPaymentPending] = useState(false);
   const [markingPaid, setMarkingPaid] = useState(false);
 
   // State for payer name (when paid under different name)
@@ -56,7 +57,8 @@ export default function BookingPage() {
     lastName: '',
     email: '',
     phone: '',
-    paymentMethod: '',
+    preferredLanguage: locale as 'en' | 'es',
+    paymentMethod: 'cash',
     ruc: '',
   });
 
@@ -77,10 +79,11 @@ export default function BookingPage() {
     }
   };
 
-  // Validate RUC on blur (optional field: base + "-" + check digit)
+  // Validate RUC on blur (optional field: 6–10 digits)
   const handleRucBlur = () => {
     if (!formData.ruc) return;
-    if (!rucPattern.test(formData.ruc)) {
+    const digits = formData.ruc.replace(/\D/g, '');
+    if (digits.length > 0 && !rucPattern.test(digits)) {
       setErrors({ ...errors, ruc: t('booking.form.errors.rucInvalidFormat') });
     }
   };
@@ -128,7 +131,18 @@ export default function BookingPage() {
             return Array(need).fill(null).map((_, i) => prev[i] ?? { firstName: '', lastName: '' });
           });
           setPaymentConfig(paymentRes.paymentOptions);
-          // No payment method is pre-selected; the user must choose one.
+
+          // Set default payment method based on what's enabled
+          const config = paymentRes.paymentOptions;
+          if (config.lightningEnabled) {
+            setFormData(prev => ({ ...prev, paymentMethod: 'lightning' }));
+          } else if (config.cashEnabled) {
+            setFormData(prev => ({ ...prev, paymentMethod: 'cash' }));
+          } else if (config.bankTransferEnabled) {
+            setFormData(prev => ({ ...prev, paymentMethod: 'bank_transfer' }));
+          } else if (config.tpagoEnabled) {
+            setFormData(prev => ({ ...prev, paymentMethod: 'tpago' }));
+          }
         })
         .catch(() => router.push('/events'))
         .finally(() => setLoading(false));
@@ -150,7 +164,8 @@ export default function BookingPage() {
           lastName: prev.lastName || lastName,
           email: prev.email || user.email || '',
           phone: prev.phone || user.phone || '',
-          ruc: prev.ruc || formatRucDisplay(user.rucNumber),
+          preferredLanguage: (user.languagePreference as 'en' | 'es') || prev.preferredLanguage,
+          ruc: prev.ruc || user.rucNumber || '',
         };
       });
     }
@@ -194,18 +209,12 @@ export default function BookingPage() {
       newErrors.phone = t('booking.form.errors.phoneTooShort');
     }
 
-    // RUC validation (optional field - base + "-" + check digit if filled)
-    if (formData.ruc.trim() && !rucPattern.test(formData.ruc.trim())) {
-      newErrors.ruc = t('booking.form.errors.rucInvalidFormat');
-    }
-
-    // Payment method must be explicitly chosen and currently enabled
-    const availableMethods = buildPaymentMethods(paymentConfig, locale);
-    if (
-      !formData.paymentMethod ||
-      !availableMethods.some((m) => m.id === formData.paymentMethod)
-    ) {
-      newErrors.paymentMethod = t('booking.form.errors.paymentMethodRequired');
+    // RUC validation (optional field - 6–10 digits if filled)
+    if (formData.ruc.trim()) {
+      const digits = formData.ruc.replace(/\D/g, '');
+      if (!/^\d{6,10}$/.test(digits)) {
+        newErrors.ruc = t('booking.form.errors.rucInvalidFormat');
+      }
     }
 
     // Validate additional attendees (if multi-ticket)
@@ -236,13 +245,7 @@ export default function BookingPage() {
   };
 
   // Watch for Lightning payment confirmation while on the paying step.
-  useLightningWatcher(
-    step === 'paying',
-    bookingResult?.ticketId,
-    locale,
-    () => setStep('success'),
-    () => {}
-  );
+  useLightningWatcher(step, bookingResult?.ticketId, locale, setPaymentPending, setStep);
 
   // Handle "I Have Paid" button click
   const handleMarkPaymentSent = async () => {
@@ -295,9 +298,9 @@ export default function BookingPage() {
         lastName: formData.lastName,
         email: formData.email,
         phone: formData.phone,
-        preferredLanguage: locale as 'en' | 'es',
-        paymentMethod: formData.paymentMethod as PaymentMethod,
-        ...(formData.ruc.trim() && { ruc: formData.ruc.trim() }),
+        preferredLanguage: formData.preferredLanguage,
+        paymentMethod: formData.paymentMethod,
+        ...(formData.ruc.trim() && { ruc: formData.ruc.replace(/\D/g, '') }),
         // Include attendees array for multi-ticket bookings
         ...(allAttendees.length > 1 && { attendees: allAttendees }),
       });
@@ -327,6 +330,7 @@ export default function BookingPage() {
         };
         setBookingResult(result);
         setStep('paying');
+        setPaymentPending(true);
         // Payment confirmation is handled by the paying-step watcher effect.
       } else if (formData.paymentMethod === 'bank_transfer' || formData.paymentMethod === 'tpago') {
         // Manual payment methods - show payment details
@@ -358,7 +362,7 @@ export default function BookingPage() {
           bookingId,
           qrCode: primaryTicket.qrCode,
           qrCodes: ticketsList?.map((t: any) => t.qrCode),
-          paymentMethod: formData.paymentMethod as PaymentMethod,
+          paymentMethod: formData.paymentMethod,
           ticketCount,
         });
         setStep('success');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -6,7 +6,6 @@ import { emailsApi, EmailTemplate, EmailLog, EmailStats } from '@/lib/api';
 import { parseDate } from '@/lib/utils';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
-import { AdminPageSkeleton } from '@/components/ui/Skeleton';
 import Input from '@/components/ui/Input';
 import { MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
 import {
@@ -419,7 +418,11 @@ export default function AdminEmailsPage() {
   };
 
   if (loading) {
-    return <AdminPageSkeleton cols={5} />;
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
+      </div>
+    );
   }
 
   return (

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

@@ -6,7 +6,6 @@ export function StatusBadge({ status, compact = false }: { status: string; compa
     confirmed: 'bg-green-100 text-green-800',
     cancelled: 'bg-red-100 text-red-800',
     checked_in: 'bg-blue-100 text-blue-800',
-    on_hold: 'bg-slate-100 text-slate-600',
   };
   return (
     <span className={clsx(

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

@@ -20,7 +20,6 @@ interface EventModalsProps {
   confirmedCount: number;
   checkedInCount: number;
   cancelledCount: number;
-  onHoldCount: number;
   statusFilter: AttendeeStatusFilter;
   setStatusFilter: (value: AttendeeStatusFilter) => void;
   // mobile filter sheet
@@ -76,7 +75,6 @@ export function EventModals(props: EventModalsProps) {
     confirmedCount,
     checkedInCount,
     cancelledCount,
-    onHoldCount,
     statusFilter,
     setStatusFilter,
     mobileFilterOpen,
@@ -131,7 +129,6 @@ export function EventModals(props: EventModalsProps) {
             { value: 'confirmed', label: `Confirmed (${confirmedCount})` },
             { value: 'checked_in', label: `Checked In (${checkedInCount})` },
             { value: 'cancelled', label: `Cancelled (${cancelledCount})` },
-            { value: 'on_hold', label: `On Hold (${onHoldCount})` },
           ].map((option) => (
             <button
               key={option.value}

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

@@ -13,7 +13,6 @@ import {
   StarIcon,
   FunnelIcon,
   ChatBubbleLeftIcon,
-  ArrowPathIcon,
 } from '@heroicons/react/24/outline';
 import { StatusBadge } from '../_components/StatusBadge';
 import type { AttendeeStatusFilter, PrimaryAction } from '../_types';
@@ -30,7 +29,6 @@ interface AttendeesTabProps {
   confirmedCount: number;
   checkedInCount: number;
   cancelledCount: number;
-  onHoldCount: number;
   exporting: boolean;
   showExportDropdown: boolean;
   setShowExportDropdown: (value: boolean) => void;
@@ -45,7 +43,6 @@ interface AttendeesTabProps {
   setShowAddTicketSheet: (value: boolean) => void;
   getPrimaryAction: (ticket: Ticket) => PrimaryAction | null;
   handleOpenNoteModal: (ticket: Ticket) => void;
-  handleReactivate: (ticket: Ticket) => void;
 }
 
 export function AttendeesTab({
@@ -60,7 +57,6 @@ export function AttendeesTab({
   confirmedCount,
   checkedInCount,
   cancelledCount,
-  onHoldCount,
   exporting,
   showExportDropdown,
   setShowExportDropdown,
@@ -75,7 +71,6 @@ export function AttendeesTab({
   setShowAddTicketSheet,
   getPrimaryAction,
   handleOpenNoteModal,
-  handleReactivate,
 }: AttendeesTabProps) {
   return (
     <div className="space-y-3">
@@ -103,7 +98,6 @@ export function AttendeesTab({
             <option value="confirmed">Confirmed ({confirmedCount})</option>
             <option value="checked_in">Checked In ({checkedInCount})</option>
             <option value="cancelled">Cancelled ({cancelledCount})</option>
-            <option value="on_hold">On Hold ({onHoldCount})</option>
           </select>
 
           <div className="flex-1" />
@@ -247,7 +241,6 @@ export function AttendeesTab({
                       <td className="px-4 py-2.5">
                         <p className="text-sm text-gray-600 truncate max-w-[200px]">{ticket.attendeeEmail}</p>
                         {ticket.attendeePhone && <p className="text-xs text-gray-400">{ticket.attendeePhone}</p>}
-                        {ticket.attendeeRuc && <p className="text-xs text-gray-400">RUC: {ticket.attendeeRuc}</p>}
                       </td>
                       <td className="px-4 py-2.5">
                         <div className="flex items-center gap-1 flex-wrap">
@@ -274,11 +267,6 @@ export function AttendeesTab({
                             </Button>
                           )}
                           <MoreMenu>
-                            {ticket.status === 'on_hold' && (
-                              <DropdownItem onClick={() => handleReactivate(ticket)}>
-                                <ArrowPathIcon className="w-4 h-4 mr-2" /> Reactivate
-                              </DropdownItem>
-                            )}
                             <DropdownItem onClick={() => handleOpenNoteModal(ticket)}>
                               <ChatBubbleLeftIcon className="w-4 h-4 mr-2" />
                               {ticket.adminNote ? 'Edit Note' : 'Add Note'}
@@ -319,7 +307,6 @@ export function AttendeesTab({
                     <p className="font-medium text-sm truncate">{ticket.attendeeFirstName} {ticket.attendeeLastName || ''}</p>
                     <p className="text-xs text-gray-500 truncate">{ticket.attendeeEmail}</p>
                     {ticket.attendeePhone && <p className="text-[10px] text-gray-400">{ticket.attendeePhone}</p>}
-                    {ticket.attendeeRuc && <p className="text-[10px] text-gray-400">RUC: {ticket.attendeeRuc}</p>}
                   </div>
                   <div className="flex items-center gap-1.5 flex-shrink-0 flex-wrap justify-end">
                     <StatusBadge status={ticket.status} compact />
@@ -341,11 +328,6 @@ export function AttendeesTab({
                       </Button>
                     )}
                     <MoreMenu>
-                      {ticket.status === 'on_hold' && (
-                        <DropdownItem onClick={() => handleReactivate(ticket)}>
-                          <ArrowPathIcon className="w-4 h-4 mr-2" /> Reactivate
-                        </DropdownItem>
-                      )}
                       <DropdownItem onClick={() => handleOpenNoteModal(ticket)}>
                         <ChatBubbleLeftIcon className="w-4 h-4 mr-2" />
                         {ticket.adminNote ? 'Edit Note' : 'Add Note'}

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

@@ -2,7 +2,7 @@ import type { ComponentType } from 'react';
 
 export type TabType = 'overview' | 'attendees' | 'tickets' | 'email' | 'payments';
 
-export type AttendeeStatusFilter = 'all' | 'pending' | 'confirmed' | 'checked_in' | 'cancelled' | 'on_hold';
+export type AttendeeStatusFilter = 'all' | 'pending' | 'confirmed' | 'checked_in' | 'cancelled';
 export type TicketStatusFilter = 'all' | 'confirmed' | 'checked_in';
 export type RecipientFilter = 'all' | 'confirmed' | 'pending' | 'checked_in';
 

frontend/src/app/admin/events/[id]/page.tsx

@@ -1,14 +1,13 @@
 'use client';
 
 import { useState, useEffect, useRef } from 'react';
-import { useParams } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { useLanguage } from '@/context/LanguageContext';
-import { ticketsApi, emailsApi, adminApi, paymentsApi, siteSettingsApi, Ticket } from '@/lib/api';
+import { ticketsApi, emailsApi, adminApi, Ticket } from '@/lib/api';
 import { formatDateLong, formatDateCompact, formatTime } from '@/lib/utils';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
-import { Skeleton, TableSkeleton } from '@/components/ui/Skeleton';
 import { Dropdown, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
 import {
   ArrowLeftIcon,
@@ -49,10 +48,10 @@ import { TicketsTab } from './_tabs/TicketsTab';
 import { EmailTab } from './_tabs/EmailTab';
 import { PaymentsTab } from './_tabs/PaymentsTab';
 import { EventModals } from './_modals/EventModals';
-import EventFormModal from '../_components/EventFormModal';
 
 export default function AdminEventDetailPage() {
   const params = useParams();
+  const router = useRouter();
   const eventId = params.id as string;
   const { locale } = useLanguage();
 
@@ -117,17 +116,6 @@ export default function AdminEventDetailPage() {
   // Payment options state + handlers
   const payments = usePaymentOverrides(eventId, locale);
 
-  // Edit event modal (opens in place instead of redirecting to the list page)
-  const [showEditForm, setShowEditForm] = useState(false);
-  const [featuredEventId, setFeaturedEventId] = useState<string | null>(null);
-
-  useEffect(() => {
-    siteSettingsApi
-      .get()
-      .then(({ settings }) => setFeaturedEventId(settings.featuredEventId || null))
-      .catch(() => {});
-  }, []);
-
   // Mobile-specific state
   const [mobileHeaderMenuOpen, setMobileHeaderMenuOpen] = useState(false);
   const [mobileFilterOpen, setMobileFilterOpen] = useState(false);
@@ -175,17 +163,6 @@ export default function AdminEventDetailPage() {
     }
   };
 
-  const handleReactivate = async (ticket: Ticket) => {
-    if (!ticket.payment?.id) return;
-    try {
-      await paymentsApi.reactivate(ticket.payment.id);
-      toast.success('Booking reactivated');
-      loadEventData();
-    } catch (error: any) {
-      toast.error(error.message || 'Failed to reactivate booking');
-    }
-  };
-
   const handleRemoveCheckin = async (ticketId: string) => {
     if (!confirm('Are you sure you want to remove the check-in for this attendee?')) return;
     try {
@@ -421,12 +398,8 @@ export default function AdminEventDetailPage() {
 
   if (loading) {
     return (
-      <div>
-        <div className="flex items-center justify-between mb-6">
-          <Skeleton className="h-8 w-64" />
-          <Skeleton className="h-10 w-36 rounded-btn hidden md:block" />
-        </div>
-        <TableSkeleton rows={5} cols={4} />
+      <div className="flex items-center justify-center py-12">
+        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
       </div>
     );
   }
@@ -448,7 +421,6 @@ export default function AdminEventDetailPage() {
   const pendingCount = getTicketsByStatus('pending').length;
   const checkedInCount = getTicketsByStatus('checked_in').length;
   const cancelledCount = getTicketsByStatus('cancelled').length;
-  const onHoldCount = getTicketsByStatus('on_hold').length;
   const paidConfirmedCount = getTicketsByStatus('confirmed').filter(t => !t.isGuest).length;
   const paidCheckedInCount = getTicketsByStatus('checked_in').filter(t => !t.isGuest).length;
   const revenue = (paidConfirmedCount + paidCheckedInCount) * event.price;
@@ -463,7 +435,7 @@ export default function AdminEventDetailPage() {
 
   // ========== Primary action for a ticket ==========
   const getPrimaryAction = (ticket: Ticket): PrimaryAction | null => {
-    if (ticket.status === 'pending' || ticket.status === 'on_hold') {
+    if (ticket.status === 'pending') {
       return { label: 'Mark Paid', onClick: () => handleMarkPaid(ticket.id), variant: 'outline' };
     }
     if (ticket.status === 'confirmed') {
@@ -500,10 +472,12 @@ export default function AdminEventDetailPage() {
               View Public
             </Button>
           </Link>
-          <Button variant="outline" size="sm" onClick={() => setShowEditForm(true)}>
-            <PencilIcon className="w-4 h-4 mr-1.5" />
-            Edit
-          </Button>
+          <Link href={`/admin/events?edit=${event.id}`}>
+            <Button variant="outline" size="sm">
+              <PencilIcon className="w-4 h-4 mr-1.5" />
+              Edit
+            </Button>
+          </Link>
         </div>
         {/* Mobile header overflow menu */}
         <div className="md:hidden flex-shrink-0">
@@ -519,7 +493,7 @@ export default function AdminEventDetailPage() {
             <DropdownItem onClick={() => { window.open(`/events/${event.slug}`, '_blank'); setMobileHeaderMenuOpen(false); }}>
               <EyeIcon className="w-4 h-4 mr-2" /> View Public
             </DropdownItem>
-            <DropdownItem onClick={() => { setShowEditForm(true); setMobileHeaderMenuOpen(false); }}>
+            <DropdownItem onClick={() => { router.push(`/admin/events?edit=${event.id}`); setMobileHeaderMenuOpen(false); }}>
               <PencilIcon className="w-4 h-4 mr-2" /> Edit Event
             </DropdownItem>
             <DropdownItem onClick={() => { toggleStats(); setMobileHeaderMenuOpen(false); }}>
@@ -697,7 +671,6 @@ export default function AdminEventDetailPage() {
             confirmedCount={confirmedCount}
             checkedInCount={checkedInCount}
             cancelledCount={cancelledCount}
-            onHoldCount={onHoldCount}
             exporting={exporting}
             showExportDropdown={showExportDropdown}
             setShowExportDropdown={setShowExportDropdown}
@@ -712,7 +685,6 @@ export default function AdminEventDetailPage() {
             setShowAddTicketSheet={setShowAddTicketSheet}
             getPrimaryAction={getPrimaryAction}
             handleOpenNoteModal={handleOpenNoteModal}
-            handleReactivate={handleReactivate}
           />
         )}
 
@@ -770,7 +742,6 @@ export default function AdminEventDetailPage() {
         confirmedCount={confirmedCount}
         checkedInCount={checkedInCount}
         cancelledCount={cancelledCount}
-        onHoldCount={onHoldCount}
         statusFilter={statusFilter}
         setStatusFilter={setStatusFilter}
         mobileFilterOpen={mobileFilterOpen}
@@ -810,15 +781,6 @@ export default function AdminEventDetailPage() {
         setPreviewHtml={setPreviewHtml}
       />
 
-      <EventFormModal
-        open={showEditForm}
-        event={event}
-        featuredEventId={featuredEventId}
-        onFeaturedChange={setFeaturedEventId}
-        onClose={() => setShowEditForm(false)}
-        onSaved={() => { setShowEditForm(false); loadEventData(); }}
-      />
-
       <AdminMobileStyles />
     </div>
   );

frontend/src/app/admin/events/_components/EventFormModal.tsx

@@ -1,392 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-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 { StarIcon, TrashIcon, XMarkIcon } from '@heroicons/react/24/outline';
-import toast from 'react-hot-toast';
-import { useLanguage } from '@/context/LanguageContext';
-import { parseDate, EVENT_TIMEZONE } from '@/lib/utils';
-
-interface EventFormData {
-  title: string;
-  titleEs: string;
-  slug: string;
-  description: string;
-  descriptionEs: string;
-  shortDescription: string;
-  shortDescriptionEs: string;
-  startDatetime: string;
-  endDatetime: string;
-  location: string;
-  locationUrl: string;
-  price: number;
-  currency: string;
-  capacity: number;
-  status: 'draft' | 'published' | 'unlisted' | 'cancelled' | 'completed' | 'archived';
-  bannerUrl: string;
-  externalBookingEnabled: boolean;
-  externalBookingUrl: string;
-}
-
-const EMPTY_FORM: EventFormData = {
-  title: '', titleEs: '', slug: '', description: '', descriptionEs: '',
-  shortDescription: '', shortDescriptionEs: '',
-  startDatetime: '', endDatetime: '', location: '', locationUrl: '',
-  price: 0, currency: 'PYG', capacity: 50, status: 'draft',
-  bannerUrl: '', externalBookingEnabled: false, externalBookingUrl: '',
-};
-
-function isoToLocalDatetime(isoString: string): string {
-  const date = parseDate(isoString);
-  const parts = new Intl.DateTimeFormat('en-US', {
-    timeZone: EVENT_TIMEZONE,
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false,
-  }).formatToParts(date);
-  const get = (type: string) => parts.find(p => p.type === type)!.value;
-  const h = get('hour') === '24' ? '00' : get('hour');
-  return `${get('year')}-${get('month')}-${get('day')}T${h}:${get('minute')}`;
-}
-
-interface EventFormModalProps {
-  /** When true the modal is rendered. */
-  open: boolean;
-  /** The event being edited, or null to create a new event. */
-  event: Event | null;
-  /** Currently featured event id (owned by the parent page). */
-  featuredEventId: string | null;
-  /** Notify the parent when the featured event changes. */
-  onFeaturedChange: (id: string | null) => void;
-  /** Close the modal without saving. */
-  onClose: () => void;
-  /** Called after a successful create/update so the parent can refresh. */
-  onSaved: () => void;
-}
-
-/**
- * Shared create/edit event modal used by both the events list page and the
- * single-event detail page. Owns its own form state so it can be dropped in
- * anywhere; the parent only supplies the event to edit and refresh callbacks.
- */
-export default function EventFormModal({
-  open,
-  event,
-  featuredEventId,
-  onFeaturedChange,
-  onClose,
-  onSaved,
-}: EventFormModalProps) {
-  const { t } = useLanguage();
-  const [formData, setFormData] = useState<EventFormData>(EMPTY_FORM);
-  const [slugAliases, setSlugAliases] = useState<{ slug: string; createdAt: string }[]>([]);
-  const [saving, setSaving] = useState(false);
-  const [settingFeatured, setSettingFeatured] = useState(false);
-
-  useEffect(() => {
-    if (!open) return;
-    if (event) {
-      setFormData({
-        title: event.title, titleEs: event.titleEs || '', slug: event.slug || '',
-        description: event.description, descriptionEs: event.descriptionEs || '',
-        shortDescription: event.shortDescription || '', shortDescriptionEs: event.shortDescriptionEs || '',
-        startDatetime: isoToLocalDatetime(event.startDatetime),
-        endDatetime: event.endDatetime ? isoToLocalDatetime(event.endDatetime) : '',
-        location: event.location, locationUrl: event.locationUrl || '',
-        price: event.price, currency: event.currency, capacity: event.capacity,
-        status: event.status, bannerUrl: event.bannerUrl || '',
-        externalBookingEnabled: event.externalBookingEnabled || false,
-        externalBookingUrl: event.externalBookingUrl || '',
-      });
-      loadSlugAliases(event.id);
-    } else {
-      setFormData(EMPTY_FORM);
-      setSlugAliases([]);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, event]);
-
-  const loadSlugAliases = async (eventId: string) => {
-    try {
-      const { aliases } = await eventsApi.getSlugAliases(eventId);
-      setSlugAliases(aliases);
-    } catch (error) {
-      setSlugAliases([]);
-    }
-  };
-
-  const handleRemoveAlias = async (slug: string) => {
-    if (!event) return;
-    if (!confirm(`Remove alias "${slug}"? The old URL /events/${slug} will stop working.`)) return;
-    try {
-      await eventsApi.deleteSlugAlias(event.id, slug);
-      toast.success('Alias removed');
-      setSlugAliases((prev) => prev.filter((a) => a.slug !== slug));
-    } catch (error: any) {
-      toast.error(error.message || 'Failed to remove alias');
-    }
-  };
-
-  const handleSetFeatured = async (eventId: string | null) => {
-    setSettingFeatured(true);
-    try {
-      await siteSettingsApi.setFeaturedEvent(eventId);
-      onFeaturedChange(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(false);
-    }
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setSaving(true);
-    try {
-      if (formData.externalBookingEnabled && !formData.externalBookingUrl) {
-        toast.error('External booking URL is required when external booking is enabled');
-        setSaving(false);
-        return;
-      }
-      if (formData.externalBookingEnabled && !formData.externalBookingUrl.startsWith('https://')) {
-        toast.error('External booking URL must be a valid HTTPS link');
-        setSaving(false);
-        return;
-      }
-      const eventData: Partial<Event> = {
-        title: formData.title, titleEs: formData.titleEs || undefined,
-        description: formData.description, descriptionEs: formData.descriptionEs || undefined,
-        shortDescription: formData.shortDescription || undefined, shortDescriptionEs: formData.shortDescriptionEs || undefined,
-        startDatetime: formData.startDatetime,
-        endDatetime: formData.endDatetime || undefined,
-        location: formData.location, locationUrl: formData.locationUrl || undefined,
-        price: formData.price, currency: formData.currency, capacity: formData.capacity,
-        status: formData.status, bannerUrl: formData.bannerUrl || undefined,
-        externalBookingEnabled: formData.externalBookingEnabled,
-        externalBookingUrl: formData.externalBookingEnabled ? formData.externalBookingUrl : undefined,
-      };
-      if (event) {
-        // Only send slug when editing so creates still auto-generate from title
-        eventData.slug = formData.slug || undefined;
-        await eventsApi.update(event.id, eventData);
-        toast.success('Event updated');
-      } else {
-        await eventsApi.create(eventData);
-        toast.success('Event created');
-      }
-      onSaved();
-    } catch (error: any) {
-      toast.error(error.message || 'Failed to save event');
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  if (!open) return null;
-
-  return (
-    <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 md:p-6 border-b border-secondary-light-gray flex-shrink-0">
-          <h2 className="text-lg md:text-xl font-bold">
-            {event ? t('admin.events.edit') : t('admin.events.create')}
-          </h2>
-          <button onClick={onClose}
-            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="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 label="Title (English)" value={formData.title}
-              onChange={(e) => setFormData({ ...formData, title: e.target.value })} required />
-            <Input label="Title (Spanish)" value={formData.titleEs}
-              onChange={(e) => setFormData({ ...formData, titleEs: e.target.value })} />
-          </div>
-
-          {event && (
-            <div>
-              <Input label="URL Slug" value={formData.slug}
-                onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
-                placeholder="auto-generated from title" />
-              <p className="text-xs text-gray-500 mt-1">
-                Public URL: <span className="font-mono">/events/{formData.slug || '...'}</span>
-                . Changing the slug keeps the old one as a redirecting alias.
-              </p>
-              {slugAliases.length > 0 && (
-                <div className="mt-3 rounded-btn border border-secondary-light-gray p-3">
-                  <p className="text-sm font-medium mb-2">URL aliases</p>
-                  <p className="text-xs text-gray-500 mb-2">
-                    Old URLs that still redirect to the current slug. Removing one breaks those links.
-                  </p>
-                  <ul className="space-y-1">
-                    {slugAliases.map((alias) => (
-                      <li key={alias.slug} className="flex items-center justify-between gap-2 text-sm">
-                        <span className="font-mono truncate">/events/{alias.slug}</span>
-                        <button type="button" onClick={() => handleRemoveAlias(alias.slug)}
-                          className="p-1.5 hover:bg-red-50 text-red-600 rounded-btn flex-shrink-0"
-                          title="Remove alias">
-                          <TrashIcon className="w-4 h-4" />
-                        </button>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-            </div>
-          )}
-
-          <div>
-            <label className="block text-sm font-medium mb-1">Description (English)</label>
-            <textarea 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} required />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium mb-1">Description (Spanish)</label>
-            <textarea 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} />
-          </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 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} maxLength={300} placeholder="Brief summary for SEO and cards (max 300 chars)" />
-              <p className="text-xs text-gray-500 mt-1">{formData.shortDescription.length}/300</p>
-            </div>
-            <div>
-              <label className="block text-sm font-medium mb-1">Short Description (Spanish)</label>
-              <textarea 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} maxLength={300} placeholder="Resumen breve (máx 300 caracteres)" />
-              <p className="text-xs text-gray-500 mt-1">{formData.shortDescriptionEs.length}/300</p>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <Input label="Start Date & Time" type="datetime-local" value={formData.startDatetime}
-              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 label="Location" value={formData.location}
-            onChange={(e) => setFormData({ ...formData, location: e.target.value })} required />
-          <Input label="Location URL (Google Maps)" type="url" value={formData.locationUrl}
-            onChange={(e) => setFormData({ ...formData, locationUrl: e.target.value })} />
-
-          <div className="grid 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 value={formData.currency} 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 label="Capacity" 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 value={formData.status} 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>
-
-          <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 platform</p>
-              </div>
-              <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 ${
-                  formData.externalBookingEnabled ? 'bg-primary-yellow' : 'bg-gray-200'
-                }`}>
-                <span className={`inline-block h-5 w-5 transform rounded-full bg-white shadow transition ${
-                  formData.externalBookingEnabled ? 'translate-x-5' : 'translate-x-0'
-                }`} />
-              </button>
-            </div>
-            {formData.externalBookingEnabled && (
-              <div>
-                <Input label="External Booking URL" type="url" value={formData.externalBookingUrl}
-                  onChange={(e) => setFormData({ ...formData, externalBookingUrl: e.target.value })}
-                  placeholder="https://example.com/book" required />
-                <p className="text-xs text-gray-500 mt-1">Must be a valid HTTPS URL</p>
-              </div>
-            )}
-          </div>
-
-          <MediaPicker value={formData.bannerUrl}
-            onChange={(url) => setFormData({ ...formData, bannerUrl: url })}
-            relatedId={event?.id} relatedType="event" />
-
-          {event && event.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}
-                  onClick={() => handleSetFeatured(featuredEventId === event.id ? null : event.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 === event.id ? 'bg-amber-500' : 'bg-gray-200'
-                  }`}>
-                  <span className={`inline-block h-5 w-5 transform rounded-full bg-white shadow transition ${
-                    featuredEventId === event.id ? 'translate-x-5' : 'translate-x-0'
-                  }`} />
-                </button>
-              </div>
-              {featuredEventId && featuredEventId !== event.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} className="flex-1 min-h-[44px]">
-              {event ? 'Update Event' : 'Create Event'}
-            </Button>
-            <Button type="button" variant="outline" onClick={onClose} className="flex-1 min-h-[44px]">
-              Cancel
-            </Button>
-          </div>
-        </form>
-      </Card>
-    </div>
-  );
-}

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

@@ -7,14 +7,14 @@ import { useLanguage } from '@/context/LanguageContext';
 import { eventsApi, siteSettingsApi, Event } from '@/lib/api';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
-import { AdminPageSkeleton } from '@/components/ui/Skeleton';
+import Input from '@/components/ui/Input';
+import MediaPicker from '@/components/MediaPicker';
 import { MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
-import { PlusIcon, PencilIcon, TrashIcon, EyeIcon, PhotoIcon, DocumentDuplicateIcon, ArchiveBoxIcon, StarIcon, LinkIcon } from '@heroicons/react/24/outline';
+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';
-import { parseDate } from '@/lib/utils';
-import EventFormModal from './_components/EventFormModal';
+import { parseDate, EVENT_TIMEZONE } from '@/lib/utils';
 
 export default function AdminEventsPage() {
   const router = useRouter();
@@ -24,8 +24,50 @@ export default function AdminEventsPage() {
   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 [slugAliases, setSlugAliases] = useState<{ slug: string; createdAt: string }[]>([]);
+  const [formData, setFormData] = useState<{
+    title: string;
+    titleEs: string;
+    slug: string;
+    description: string;
+    descriptionEs: string;
+    shortDescription: string;
+    shortDescriptionEs: string;
+    startDatetime: string;
+    endDatetime: string;
+    location: string;
+    locationUrl: string;
+    price: number;
+    currency: string;
+    capacity: number;
+    status: 'draft' | 'published' | 'unlisted' | 'cancelled' | 'completed' | 'archived';
+    bannerUrl: string;
+    externalBookingEnabled: boolean;
+    externalBookingUrl: string;
+  }>({
+    title: '',
+    titleEs: '',
+    slug: '',
+    description: '',
+    descriptionEs: '',
+    shortDescription: '',
+    shortDescriptionEs: '',
+    startDatetime: '',
+    endDatetime: '',
+    location: '',
+    locationUrl: '',
+    price: 0,
+    currency: 'PYG',
+    capacity: 50,
+    status: 'draft',
+    bannerUrl: '',
+    externalBookingEnabled: false,
+    externalBookingUrl: '',
+  });
 
   useEffect(() => {
     loadEvents();
@@ -73,19 +115,116 @@ export default function AdminEventsPage() {
     }
   };
 
-  const handleEdit = (event: Event) => {
-    setEditingEvent(event);
-    setShowForm(true);
-  };
-
-  const handleCloseForm = () => {
-    setShowForm(false);
+  const resetForm = () => {
+    setSlugAliases([]);
+    setFormData({
+      title: '', titleEs: '', slug: '', description: '', descriptionEs: '',
+      shortDescription: '', shortDescriptionEs: '',
+      startDatetime: '', endDatetime: '', location: '', locationUrl: '',
+      price: 0, currency: 'PYG', capacity: 50, status: 'draft' as const,
+      bannerUrl: '', externalBookingEnabled: false, externalBookingUrl: '',
+    });
     setEditingEvent(null);
   };
 
-  const handleFormSaved = () => {
-    handleCloseForm();
-    loadEvents();
+  const isoToLocalDatetime = (isoString: string): string => {
+    const date = parseDate(isoString);
+    const parts = new Intl.DateTimeFormat('en-US', {
+      timeZone: EVENT_TIMEZONE,
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    }).formatToParts(date);
+    const get = (type: string) => parts.find(p => p.type === type)!.value;
+    const h = get('hour') === '24' ? '00' : get('hour');
+    return `${get('year')}-${get('month')}-${get('day')}T${h}:${get('minute')}`;
+  };
+
+  const loadSlugAliases = async (eventId: string) => {
+    try {
+      const { aliases } = await eventsApi.getSlugAliases(eventId);
+      setSlugAliases(aliases);
+    } catch (error) {
+      setSlugAliases([]);
+    }
+  };
+
+  const handleRemoveAlias = async (slug: string) => {
+    if (!editingEvent) return;
+    if (!confirm(`Remove alias "${slug}"? The old URL /events/${slug} will stop working.`)) return;
+    try {
+      await eventsApi.deleteSlugAlias(editingEvent.id, slug);
+      toast.success('Alias removed');
+      setSlugAliases((prev) => prev.filter((a) => a.slug !== slug));
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to remove alias');
+    }
+  };
+
+  const handleEdit = (event: Event) => {
+    setFormData({
+      title: event.title, titleEs: event.titleEs || '', slug: event.slug || '',
+      description: event.description, descriptionEs: event.descriptionEs || '',
+      shortDescription: event.shortDescription || '', shortDescriptionEs: event.shortDescriptionEs || '',
+      startDatetime: isoToLocalDatetime(event.startDatetime),
+      endDatetime: event.endDatetime ? isoToLocalDatetime(event.endDatetime) : '',
+      location: event.location, locationUrl: event.locationUrl || '',
+      price: event.price, currency: event.currency, capacity: event.capacity,
+      status: event.status, bannerUrl: event.bannerUrl || '',
+      externalBookingEnabled: event.externalBookingEnabled || false,
+      externalBookingUrl: event.externalBookingUrl || '',
+    });
+    setEditingEvent(event);
+    setShowForm(true);
+    loadSlugAliases(event.id);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      if (formData.externalBookingEnabled && !formData.externalBookingUrl) {
+        toast.error('External booking URL is required when external booking is enabled');
+        setSaving(false);
+        return;
+      }
+      if (formData.externalBookingEnabled && !formData.externalBookingUrl.startsWith('https://')) {
+        toast.error('External booking URL must be a valid HTTPS link');
+        setSaving(false);
+        return;
+      }
+      const eventData: Partial<Event> = {
+        title: formData.title, titleEs: formData.titleEs || undefined,
+        description: formData.description, descriptionEs: formData.descriptionEs || undefined,
+        shortDescription: formData.shortDescription || undefined, shortDescriptionEs: formData.shortDescriptionEs || undefined,
+        startDatetime: formData.startDatetime,
+        endDatetime: formData.endDatetime || undefined,
+        location: formData.location, locationUrl: formData.locationUrl || undefined,
+        price: formData.price, currency: formData.currency, capacity: formData.capacity,
+        status: formData.status, bannerUrl: formData.bannerUrl || undefined,
+        externalBookingEnabled: formData.externalBookingEnabled,
+        externalBookingUrl: formData.externalBookingEnabled ? formData.externalBookingUrl : undefined,
+      };
+      if (editingEvent) {
+        // Only send slug when editing so creates still auto-generate from title
+        eventData.slug = formData.slug || undefined;
+        await eventsApi.update(editingEvent.id, eventData);
+        toast.success('Event updated');
+      } else {
+        await eventsApi.create(eventData);
+        toast.success('Event created');
+      }
+      setShowForm(false);
+      resetForm();
+      loadEvents();
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to save event');
+    } finally {
+      setSaving(false);
+    }
   };
 
   const handleDelete = async (id: string) => {
@@ -149,27 +288,221 @@ export default function AdminEventsPage() {
   };
 
   if (loading) {
-    return <AdminPageSkeleton cols={5} />;
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
+      </div>
+    );
   }
 
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
         <h1 className="text-xl md:text-2xl font-bold text-primary-dark">{t('admin.events.title')}</h1>
-        <Button onClick={() => { setEditingEvent(null); setShowForm(true); }} className="hidden md:flex">
+        <Button onClick={() => { resetForm(); setShowForm(true); }} className="hidden md:flex">
           <PlusIcon className="w-5 h-5 mr-2" />
           {t('admin.events.create')}
         </Button>
       </div>
 
-      <EventFormModal
-        open={showForm}
-        event={editingEvent}
-        featuredEventId={featuredEventId}
-        onFeaturedChange={setFeaturedEventId}
-        onClose={handleCloseForm}
-        onSaved={handleFormSaved}
-      />
+      {/* Event Form Modal */}
+      {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 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="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 label="Title (English)" value={formData.title}
+                  onChange={(e) => setFormData({ ...formData, title: e.target.value })} required />
+                <Input label="Title (Spanish)" value={formData.titleEs}
+                  onChange={(e) => setFormData({ ...formData, titleEs: e.target.value })} />
+              </div>
+              
+              {editingEvent && (
+                <div>
+                  <Input label="URL Slug" value={formData.slug}
+                    onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
+                    placeholder="auto-generated from title" />
+                  <p className="text-xs text-gray-500 mt-1">
+                    Public URL: <span className="font-mono">/events/{formData.slug || '...'}</span>
+                    . Changing the slug keeps the old one as a redirecting alias.
+                  </p>
+                  {slugAliases.length > 0 && (
+                    <div className="mt-3 rounded-btn border border-secondary-light-gray p-3">
+                      <p className="text-sm font-medium mb-2">URL aliases</p>
+                      <p className="text-xs text-gray-500 mb-2">
+                        Old URLs that still redirect to the current slug. Removing one breaks those links.
+                      </p>
+                      <ul className="space-y-1">
+                        {slugAliases.map((alias) => (
+                          <li key={alias.slug} className="flex items-center justify-between gap-2 text-sm">
+                            <span className="font-mono truncate">/events/{alias.slug}</span>
+                            <button type="button" onClick={() => handleRemoveAlias(alias.slug)}
+                              className="p-1.5 hover:bg-red-50 text-red-600 rounded-btn flex-shrink-0"
+                              title="Remove alias">
+                              <TrashIcon className="w-4 h-4" />
+                            </button>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+                </div>
+              )}
+              
+              <div>
+                <label className="block text-sm font-medium mb-1">Description (English)</label>
+                <textarea 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} required />
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium mb-1">Description (Spanish)</label>
+                <textarea 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} />
+              </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 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} maxLength={300} placeholder="Brief summary for SEO and cards (max 300 chars)" />
+                  <p className="text-xs text-gray-500 mt-1">{formData.shortDescription.length}/300</p>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-1">Short Description (Spanish)</label>
+                  <textarea 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} maxLength={300} placeholder="Resumen breve (máx 300 caracteres)" />
+                  <p className="text-xs text-gray-500 mt-1">{formData.shortDescriptionEs.length}/300</p>
+                </div>
+              </div>
+              
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <Input label="Start Date & Time" type="datetime-local" value={formData.startDatetime}
+                  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 label="Location" value={formData.location}
+                onChange={(e) => setFormData({ ...formData, location: e.target.value })} required />
+              <Input label="Location URL (Google Maps)" type="url" value={formData.locationUrl}
+                onChange={(e) => setFormData({ ...formData, locationUrl: e.target.value })} />
+              
+              <div className="grid 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 value={formData.currency} 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 label="Capacity" 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 value={formData.status} 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>
+
+              <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 platform</p>
+                  </div>
+                  <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 ${
+                      formData.externalBookingEnabled ? 'bg-primary-yellow' : 'bg-gray-200'
+                    }`}>
+                    <span className={`inline-block h-5 w-5 transform rounded-full bg-white shadow transition ${
+                      formData.externalBookingEnabled ? 'translate-x-5' : 'translate-x-0'
+                    }`} />
+                  </button>
+                </div>
+                {formData.externalBookingEnabled && (
+                  <div>
+                    <Input label="External Booking URL" type="url" value={formData.externalBookingUrl}
+                      onChange={(e) => setFormData({ ...formData, externalBookingUrl: e.target.value })}
+                      placeholder="https://example.com/book" required />
+                    <p className="text-xs text-gray-500 mt-1">Must be a valid HTTPS URL</p>
+                  </div>
+                )}
+              </div>
+
+              <MediaPicker value={formData.bannerUrl}
+                onChange={(url) => setFormData({ ...formData, bannerUrl: url })}
+                relatedId={editingEvent?.id} 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} className="flex-1 min-h-[44px]">
+                  {editingEvent ? 'Update Event' : 'Create Event'}
+                </Button>
+                <Button type="button" variant="outline" onClick={() => { setShowForm(false); resetForm(); }} className="flex-1 min-h-[44px]">
+                  Cancel
+                </Button>
+              </div>
+            </form>
+          </Card>
+        </div>
+      )}
 
       {/* Desktop: Table */}
       <Card className="overflow-hidden hidden md:block">
@@ -391,7 +724,7 @@ export default function AdminEventsPage() {
 
       {/* Mobile FAB */}
       <div className="md:hidden fixed bottom-6 right-6 z-40">
-        <button onClick={() => { setEditingEvent(null); setShowForm(true); }}
+        <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>

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

@@ -5,7 +5,6 @@ import { useLanguage } from '@/context/LanguageContext';
 import { faqApi, FaqItemAdmin } from '@/lib/api';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
-import { AdminPageSkeleton } from '@/components/ui/Skeleton';
 import Input from '@/components/ui/Input';
 import { MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
 import toast from 'react-hot-toast';
@@ -186,7 +185,11 @@ export default function AdminFaqPage() {
   const handleDragEnd = () => { setDraggedId(null); setDragOverId(null); };
 
   if (loading) {
-    return <AdminPageSkeleton cols={5} />;
+    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 (

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

@@ -6,7 +6,6 @@ import { mediaApi, Media } from '@/lib/api';
 import { parseDate } from '@/lib/utils';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
-import { Skeleton, ImageGridSkeleton } from '@/components/ui/Skeleton';
 import { 
   PhotoIcon, 
   TrashIcon, 
@@ -127,12 +126,8 @@ export default function AdminGalleryPage() {
 
   if (loading) {
     return (
-      <div>
-        <div className="flex items-center justify-between mb-6">
-          <Skeleton className="h-8 w-48" />
-          <Skeleton className="h-10 w-36 rounded-btn hidden md:block" />
-        </div>
-        <ImageGridSkeleton />
+      <div className="flex items-center justify-center py-12">
+        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
       </div>
     );
   }

frontend/src/app/admin/layout.tsx

@@ -62,10 +62,6 @@ export default function AdminLayout({
   const allowedPathsForRole = new Set(
     navigationWithRoles.filter((item) => item.allowedRoles.includes(userRole)).map((item) => item.href)
   );
-  // All known admin routes regardless of role, used only to tell "not allowed
-  // for this role" apart from "doesn't exist" - the latter should render the
-  // 404 page instead of bouncing to the default route.
-  const allAdminHrefs = new Set(navigationWithRoles.map((item) => item.href));
   const defaultAdminRoute =
     userRole === 'staff' ? '/admin/scanner' : userRole === 'marketing' ? '/admin/contacts' : '/admin';
 
@@ -83,14 +79,11 @@ export default function AdminLayout({
       router.replace(defaultAdminRoute);
       return;
     }
-    const matchesHrefSet = (path: string, hrefs: Set<string>) => {
-      if (hrefs.has(path)) return true;
-      return Array.from(hrefs).some((href) => path.startsWith(href + '/'));
+    const isPathAllowed = (path: string) => {
+      if (allowedPathsForRole.has(path)) return true;
+      return Array.from(allowedPathsForRole).some((allowed) => path.startsWith(allowed + '/'));
     };
-    // Unknown route entirely (e.g. a typo'd URL) - let it fall through to the
-    // admin 404 page instead of silently redirecting away.
-    if (!matchesHrefSet(pathname, allAdminHrefs)) return;
-    if (!matchesHrefSet(pathname, allowedPathsForRole)) {
+    if (!isPathAllowed(pathname)) {
       router.replace(defaultAdminRoute);
     }
   }, [pathname, userRole, defaultAdminRoute, router, user, hasAdminAccess]);

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

@@ -7,7 +7,6 @@ import { legalPagesApi, LegalPage } from '@/lib/api';
 import { parseDate } from '@/lib/utils';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
-import { AdminPageSkeleton } from '@/components/ui/Skeleton';
 import Input from '@/components/ui/Input';
 import toast from 'react-hot-toast';
 import clsx from 'clsx';
@@ -174,7 +173,11 @@ export default function AdminLegalPagesPage() {
   };
 
   if (loading) {
-    return <AdminPageSkeleton cols={5} />;
+    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

frontend/src/app/admin/not-found.tsx

@@ -1,9 +0,0 @@
-import { NotFoundMessage } from '@/components/NotFoundMessage';
-
-export default function AdminNotFound() {
-  return (
-    <div className="flex-1 flex items-center justify-center">
-      <NotFoundMessage />
-    </div>
-  );
-}

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

@@ -3,10 +3,9 @@
 import { useState, useEffect } from 'react';
 import { useLanguage } from '@/context/LanguageContext';
 import { paymentsApi, adminApi, eventsApi, PaymentWithDetails, Event, ExportedPayment, FinancialSummary } from '@/lib/api';
-import { parseDate, formatRucDisplay } from '@/lib/utils';
+import { parseDate } from '@/lib/utils';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
-import { AdminPageSkeleton } from '@/components/ui/Skeleton';
 import Input from '@/components/ui/Input';
 import { BottomSheet, MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
 import { 
@@ -148,20 +147,6 @@ export default function AdminPaymentsPage() {
     }
   };
 
-  const handleReactivate = async (payment: PaymentWithDetails) => {
-    setProcessing(true);
-    try {
-      await paymentsApi.reactivate(payment.id);
-      toast.success(locale === 'es' ? 'Reserva reactivada' : 'Booking reactivated');
-      setSelectedPayment(null);
-      loadData();
-    } catch (error: any) {
-      toast.error(error.message || 'Failed to reactivate booking');
-    } finally {
-      setProcessing(false);
-    }
-  };
-
   const handleRefund = async (id: string) => {
     if (!confirm('Are you sure you want to process this refund?')) return;
 
@@ -193,7 +178,7 @@ export default function AdminPaymentsPage() {
   const downloadCSV = () => {
     if (!exportData) return;
     
-    const headers = ['Payment ID', 'Amount', 'Currency', 'Provider', 'Status', 'Reference', 'Paid At', 'Created At', 'Attendee Name', 'Attendee Email', 'RUC', 'Event Title', 'Event Date'];
+    const headers = ['Payment ID', 'Amount', 'Currency', 'Provider', 'Status', 'Reference', 'Paid At', 'Created At', 'Attendee Name', 'Attendee Email', 'Event Title', 'Event Date'];
     const rows = exportData.payments.map(p => [
       p.paymentId,
       p.amount,
@@ -205,7 +190,6 @@ export default function AdminPaymentsPage() {
       p.createdAt,
       `${p.attendeeFirstName} ${p.attendeeLastName || ''}`.trim(),
       p.attendeeEmail || '',
-      formatRucDisplay(p.attendeeRuc) || '',
       p.eventTitle,
       p.eventDate,
     ]);
@@ -241,7 +225,6 @@ export default function AdminPaymentsPage() {
       refunded: 'bg-blue-100 text-blue-700',
       failed: 'bg-red-100 text-red-700',
       cancelled: 'bg-gray-100 text-gray-700',
-      on_hold: 'bg-slate-100 text-slate-600',
     };
     const labels: Record<string, string> = {
       pending: locale === 'es' ? 'Pendiente' : 'Pending',
@@ -250,7 +233,6 @@ export default function AdminPaymentsPage() {
       refunded: locale === 'es' ? 'Reembolsado' : 'Refunded',
       failed: locale === 'es' ? 'Fallido' : 'Failed',
       cancelled: locale === 'es' ? 'Cancelado' : 'Cancelled',
-      on_hold: locale === 'es' ? 'En Espera' : 'On Hold',
     };
     return (
       <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${styles[status] || 'bg-gray-100 text-gray-700'}`}>
@@ -361,11 +343,13 @@ export default function AdminPaymentsPage() {
     payments.filter(p => p.status === 'paid')
   );
   const pendingApprovalBookingsCount = getUniqueBookingsCount(visiblePendingApprovalPayments);
-  const onHoldPayments = payments.filter(p => p.status === 'on_hold');
-  const onHoldBookingsCount = getUniqueBookingsCount(onHoldPayments);
 
   if (loading) {
-    return <AdminPageSkeleton cols={7} />;
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
+      </div>
+    );
   }
 
   return (
@@ -430,9 +414,6 @@ export default function AdminPaymentsPage() {
                   {selectedPayment.ticket.attendeePhone && (
                     <p className="text-sm text-gray-600">{selectedPayment.ticket.attendeePhone}</p>
                   )}
-                  {selectedPayment.ticket.attendeeRuc && (
-                    <p className="text-sm text-gray-600">RUC: {formatRucDisplay(selectedPayment.ticket.attendeeRuc)}</p>
-                  )}
                 </div>
               )}
               
@@ -494,15 +475,6 @@ export default function AdminPaymentsPage() {
               </div>
             </div>
             
-            {selectedPayment.status === 'on_hold' && (
-              <div className="mb-3">
-                <Button variant="outline" onClick={() => handleReactivate(selectedPayment)} isLoading={processing} className="w-full min-h-[44px]">
-                  <ArrowPathIcon className="w-5 h-5 mr-2" />
-                  {locale === 'es' ? 'Reactivar (volver a pendiente)' : 'Reactivate (back to pending)'}
-                </Button>
-              </div>
-            )}
-
             <div className="flex gap-3">
               <Button onClick={() => handleApprove(selectedPayment)} isLoading={processing} className="flex-1 min-h-[44px]">
                 <CheckCircleIcon className="w-5 h-5 mr-2" />
@@ -514,15 +486,13 @@ export default function AdminPaymentsPage() {
                 {locale === 'es' ? 'Rechazar' : 'Reject'}
               </Button>
             </div>
-
-            {selectedPayment.status !== 'on_hold' && (
-              <div className="pt-2 border-t">
-                <Button variant="outline" onClick={() => handleSendReminder(selectedPayment)} isLoading={sendingReminder} className="w-full min-h-[44px]">
-                  <EnvelopeIcon className="w-5 h-5 mr-2" />
-                  {locale === 'es' ? 'Enviar recordatorio' : 'Send reminder'}
-                </Button>
-              </div>
-            )}
+            
+            <div className="pt-2 border-t">
+              <Button variant="outline" onClick={() => handleSendReminder(selectedPayment)} isLoading={sendingReminder} className="w-full min-h-[44px]">
+                <EnvelopeIcon className="w-5 h-5 mr-2" />
+                {locale === 'es' ? 'Enviar recordatorio' : 'Send reminder'}
+              </Button>
+            </div>
             </div>
           </Card>
         </div>
@@ -657,7 +627,7 @@ export default function AdminPaymentsPage() {
       )}
 
       {/* Summary Cards */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
         <Card className="p-4">
           <div className="flex items-center gap-3">
             <div className="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
@@ -672,20 +642,6 @@ export default function AdminPaymentsPage() {
             </div>
           </div>
         </Card>
-        <Card className="p-4">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-slate-100 rounded-full flex items-center justify-center">
-              <ClockIcon className="w-5 h-5 text-slate-600" />
-            </div>
-            <div>
-              <p className="text-sm text-gray-500">{locale === 'es' ? 'En Espera' : 'On Hold'}</p>
-              <p className="text-xl font-bold text-slate-600">{onHoldBookingsCount}</p>
-              {onHoldPayments.length !== onHoldBookingsCount && (
-                <p className="text-xs text-gray-400">({onHoldPayments.length} tickets)</p>
-              )}
-            </div>
-          </div>
-        </Card>
         <Card className="p-4">
           <div className="flex items-center gap-3">
             <div className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
@@ -860,7 +816,6 @@ export default function AdminPaymentsPage() {
                   <option value="paid">{locale === 'es' ? 'Pagado' : 'Paid'}</option>
                   <option value="refunded">{locale === 'es' ? 'Reembolsado' : 'Refunded'}</option>
                   <option value="failed">{locale === 'es' ? 'Fallido' : 'Failed'}</option>
-                  <option value="on_hold">{locale === 'es' ? 'En Espera' : 'On Hold'}</option>
                 </select>
               </div>
               <div>
@@ -942,7 +897,6 @@ export default function AdminPaymentsPage() {
                 <thead className="bg-secondary-gray">
                   <tr>
                     <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-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">RUC</th>
                     <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">{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' ? 'Monto' : 'Amount'}</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>
@@ -952,7 +906,7 @@ export default function AdminPaymentsPage() {
                 </thead>
                 <tbody className="divide-y divide-secondary-light-gray">
                   {filteredPayments.length === 0 ? (
-                    <tr><td colSpan={7} className="px-4 py-12 text-center text-gray-500 text-sm">{locale === 'es' ? 'No se encontraron pagos' : 'No payments found'}</td></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>
                   ) : (
                     filteredPayments.map((payment) => {
                       const bookingInfo = getBookingInfo(payment);
@@ -966,7 +920,6 @@ export default function AdminPaymentsPage() {
                               </div>
                             ) : <span className="text-gray-400 text-sm">-</span>}
                           </td>
-                          <td className="px-4 py-3 text-sm text-gray-600">{payment.ticket?.attendeeRuc || '-'}</td>
                           <td className="px-4 py-3 text-sm truncate max-w-[150px]">{payment.event?.title || '-'}</td>
                           <td className="px-4 py-3">
                             <p className="font-medium text-sm">{formatCurrency(bookingInfo.bookingTotal, payment.currency)}</p>
@@ -980,16 +933,11 @@ export default function AdminPaymentsPage() {
                           <td className="px-4 py-3">{getStatusBadge(payment.status)}</td>
                           <td className="px-4 py-3">
                             <div className="flex items-center justify-end gap-1">
-                              {(payment.status === 'pending' || payment.status === 'pending_approval' || payment.status === 'on_hold') && (
+                              {(payment.status === 'pending' || payment.status === 'pending_approval') && (
                                 <Button size="sm" onClick={() => setSelectedPayment(payment)} className="text-xs px-2 py-1">
                                   {locale === 'es' ? 'Revisar' : 'Review'}
                                 </Button>
                               )}
-                              {payment.status === 'on_hold' && (
-                                <Button size="sm" variant="outline" onClick={() => handleReactivate(payment)} className="text-xs px-2 py-1">
-                                  {locale === 'es' ? 'Reactivar' : 'Reactivate'}
-                                </Button>
-                              )}
                               {payment.status === 'paid' && (
                                 <Button size="sm" variant="outline" onClick={() => handleRefund(payment.id)} className="text-xs px-2 py-1">
                                   {t('admin.payments.refund')}
@@ -1042,16 +990,11 @@ export default function AdminPaymentsPage() {
                     <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' || payment.status === 'on_hold') && (
+                        {(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 === 'on_hold' && (
-                          <Button size="sm" variant="outline" onClick={() => handleReactivate(payment)} className="text-xs px-2.5 py-1.5 min-h-[36px]">
-                            {locale === 'es' ? 'Reactivar' : 'Reactivate'}
-                          </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')}
@@ -1097,7 +1040,6 @@ export default function AdminPaymentsPage() {
                   <option value="paid">{locale === 'es' ? 'Pagado' : 'Paid'}</option>
                   <option value="refunded">{locale === 'es' ? 'Reembolsado' : 'Refunded'}</option>
                   <option value="failed">{locale === 'es' ? 'Fallido' : 'Failed'}</option>
-                  <option value="on_hold">{locale === 'es' ? 'En Espera' : 'On Hold'}</option>
                 </select>
               </div>
               <div>

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

@@ -6,7 +6,6 @@ import { ticketsApi, eventsApi, Ticket, Event } from '@/lib/api';
 import { parseDate } from '@/lib/utils';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
-import { AdminPageSkeleton } from '@/components/ui/Skeleton';
 import Input from '@/components/ui/Input';
 import { BottomSheet, MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
 import { CheckCircleIcon, XCircleIcon, PlusIcon, FunnelIcon, XMarkIcon } from '@heroicons/react/24/outline';
@@ -136,7 +135,11 @@ export default function AdminTicketsPage() {
   };
 
   if (loading) {
-    return <AdminPageSkeleton cols={5} />;
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
+      </div>
+    );
   }
 
   return (

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

@@ -2,39 +2,22 @@
 
 import { useState, useEffect } from 'react';
 import { useLanguage } from '@/context/LanguageContext';
-import { usersApi, eventsApi, User, Event } from '@/lib/api';
-import { parseDate, formatRucDisplay } from '@/lib/utils';
+import { usersApi, User } from '@/lib/api';
+import { parseDate } from '@/lib/utils';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
-import { AdminPageSkeleton } from '@/components/ui/Skeleton';
 import Input from '@/components/ui/Input';
 import { MoreMenu, DropdownItem, BottomSheet, AdminMobileStyles } from '@/components/admin/MobileComponents';
-import { TrashIcon, PencilSquareIcon, FunnelIcon, XMarkIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+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';
 
-type RegisteredRange = '' | '7d' | '30d' | '90d';
-
-function registeredAfterFromRange(range: RegisteredRange): string | undefined {
-  if (!range) return undefined;
-  const days = range === '7d' ? 7 : range === '30d' ? 30 : 90;
-  const date = new Date(Date.now() - days * 24 * 60 * 60 * 1000);
-  return date.toISOString();
-}
-
 export default function AdminUsersPage() {
   const { t, locale } = useLanguage();
   const [users, setUsers] = useState<User[]>([]);
-  const [total, setTotal] = useState(0);
-  const [events, setEvents] = useState<Event[]>([]);
   const [loading, setLoading] = useState(true);
   const [roleFilter, setRoleFilter] = useState<string>('');
-  const [statusFilter, setStatusFilter] = useState<string>('');
-  const [hasBookingsFilter, setHasBookingsFilter] = useState<'' | 'yes' | 'no'>('');
-  const [registeredRange, setRegisteredRange] = useState<RegisteredRange>('');
-  const [eventFilter, setEventFilter] = useState<string>('');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [debouncedSearch, setDebouncedSearch] = useState('');
   const [editingUser, setEditingUser] = useState<User | null>(null);
   const [editForm, setEditForm] = useState({
     name: '',
@@ -47,45 +30,14 @@ export default function AdminUsersPage() {
   const [saving, setSaving] = useState(false);
   const [mobileFilterOpen, setMobileFilterOpen] = useState(false);
 
-  // Debounce the search box like the Emails page does (300ms).
-  useEffect(() => {
-    const handle = setTimeout(() => setDebouncedSearch(searchQuery), 300);
-    return () => clearTimeout(handle);
-  }, [searchQuery]);
-
-  useEffect(() => {
-    eventsApi.getAll().then((res) => setEvents(res.events)).catch(() => {});
-  }, []);
-
   useEffect(() => {
     loadUsers();
-  }, [roleFilter, statusFilter, hasBookingsFilter, registeredRange, eventFilter, debouncedSearch]);
-
-  const hasActiveFilters =
-    roleFilter || statusFilter || hasBookingsFilter || registeredRange || eventFilter || searchQuery;
-
-  const clearFilters = () => {
-    setRoleFilter('');
-    setStatusFilter('');
-    setHasBookingsFilter('');
-    setRegisteredRange('');
-    setEventFilter('');
-    setSearchQuery('');
-  };
+  }, [roleFilter]);
 
   const loadUsers = async () => {
     try {
-      const { users, total } = await usersApi.getAll({
-        role: roleFilter || undefined,
-        accountStatus: statusFilter || undefined,
-        hasBookings: hasBookingsFilter || undefined,
-        registeredAfter: registeredAfterFromRange(registeredRange),
-        eventId: eventFilter || undefined,
-        search: debouncedSearch.trim() || undefined,
-        pageSize: 200,
-      });
+      const { users } = await usersApi.getAll(roleFilter || undefined);
       setUsers(users);
-      setTotal(total);
     } catch (error) {
       toast.error('Failed to load users');
     } finally {
@@ -167,35 +119,26 @@ export default function AdminUsersPage() {
   };
 
   if (loading) {
-    return <AdminPageSkeleton cols={6} />;
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
+      </div>
+    );
   }
 
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <h1 className="text-xl md:text-2xl font-bold text-primary-dark">{t('admin.users.title')} ({total})</h1>
+        <h1 className="text-xl md:text-2xl font-bold text-primary-dark">{t('admin.users.title')}</h1>
       </div>
 
       {/* Desktop Filters */}
       <Card className="p-4 mb-6 hidden md:block">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-          <div>
-            <label className="block text-sm font-medium 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, email, phone..."
-                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 className="flex flex-wrap gap-4">
           <div>
             <label className="block text-sm font-medium mb-1">{t('admin.users.role')}</label>
             <select value={roleFilter} onChange={(e) => setRoleFilter(e.target.value)}
-              className="w-full px-4 py-2 rounded-btn border border-secondary-light-gray text-sm">
+              className="px-4 py-2 rounded-btn border border-secondary-light-gray min-w-[150px] text-sm">
               <option value="">All Roles</option>
               <option value="admin">{t('admin.users.roles.admin')}</option>
               <option value="organizer">{t('admin.users.roles.organizer')}</option>
@@ -204,82 +147,25 @@ export default function AdminUsersPage() {
               <option value="user">{t('admin.users.roles.user')}</option>
             </select>
           </div>
-          <div>
-            <label className="block text-sm font-medium mb-1">Status</label>
-            <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}
-              className="w-full px-4 py-2 rounded-btn border border-secondary-light-gray text-sm">
-              <option value="">All Statuses</option>
-              <option value="active">Active</option>
-              <option value="unclaimed">Unclaimed</option>
-              <option value="suspended">Suspended</option>
-            </select>
-          </div>
-          <div>
-            <label className="block text-sm font-medium mb-1">Has Bookings</label>
-            <select value={hasBookingsFilter} onChange={(e) => setHasBookingsFilter(e.target.value as '' | 'yes' | 'no')}
-              className="w-full px-4 py-2 rounded-btn border border-secondary-light-gray text-sm">
-              <option value="">All</option>
-              <option value="yes">Yes</option>
-              <option value="no">No</option>
-            </select>
-          </div>
-          <div>
-            <label className="block text-sm font-medium mb-1">Registered</label>
-            <select value={registeredRange} onChange={(e) => setRegisteredRange(e.target.value as RegisteredRange)}
-              className="w-full px-4 py-2 rounded-btn border border-secondary-light-gray text-sm">
-              <option value="">All Time</option>
-              <option value="7d">Last 7 days</option>
-              <option value="30d">Last 30 days</option>
-              <option value="90d">Last 90 days</option>
-            </select>
-          </div>
-          <div>
-            <label className="block text-sm font-medium mb-1">Event</label>
-            <select value={eventFilter} onChange={(e) => setEventFilter(e.target.value)}
-              className="w-full px-4 py-2 rounded-btn border border-secondary-light-gray text-sm">
-              <option value="">All Events</option>
-              {events.map((event) => (
-                <option key={event.id} value={event.id}>{event.title}</option>
-              ))}
-            </select>
-          </div>
         </div>
-        {hasActiveFilters && (
-          <div className="mt-3 text-xs text-gray-500 flex items-center gap-2">
-            <span>Showing {users.length} of {total}</span>
-            <button onClick={clearFilters} className="text-primary-yellow hover:underline">Clear</button>
-          </div>
-        )}
       </Card>
 
       {/* Mobile Toolbar */}
-      <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="Name, email, phone..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full pl-9 pr-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-          />
-        </div>
-        <div className="flex items-center gap-2">
-          <button onClick={() => setMobileFilterOpen(true)}
-            className={clsx(
-              'flex items-center gap-1.5 px-3 py-2 rounded-btn border text-sm min-h-[44px]',
-              hasActiveFilters ? 'border-primary-yellow bg-yellow-50 text-primary-dark' : 'border-secondary-light-gray text-gray-600'
-            )}>
-            <FunnelIcon className="w-4 h-4" />
-            Filters
+      <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>
-          {hasActiveFilters && (
-            <button onClick={clearFilters} className="text-xs text-primary-yellow min-h-[44px] flex items-center">
-              Clear
-            </button>
-          )}
-          <span className="text-xs text-gray-500 ml-auto">{total} users</span>
-        </div>
+        )}
+        <span className="text-xs text-gray-500 ml-auto">{users.length} users</span>
       </div>
 
       {/* Desktop: Table */}
@@ -290,7 +176,6 @@ export default function AdminUsersPage() {
               <tr>
                 <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-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th>
-                <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">RUC</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-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Joined</th>
                 <th className="text-right px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
@@ -298,7 +183,7 @@ export default function AdminUsersPage() {
             </thead>
             <tbody className="divide-y divide-secondary-light-gray">
               {users.length === 0 ? (
-                <tr><td colSpan={6} className="px-4 py-12 text-center text-gray-500 text-sm">No users found</td></tr>
+                <tr><td colSpan={5} className="px-4 py-12 text-center text-gray-500 text-sm">No users found</td></tr>
               ) : (
                 users.map((user) => (
                   <tr key={user.id} className="hover:bg-gray-50">
@@ -314,7 +199,6 @@ export default function AdminUsersPage() {
                       </div>
                     </td>
                     <td className="px-4 py-3 text-sm text-gray-600">{user.phone || '-'}</td>
-                    <td className="px-4 py-3 text-sm text-gray-600">{formatRucDisplay(user.rucNumber) || '-'}</td>
                     <td className="px-4 py-3">
                       <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">
@@ -363,7 +247,6 @@ export default function AdminUsersPage() {
                       <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>}
-                      {user.rucNumber && <p className="text-[10px] text-gray-400">RUC: {formatRucDisplay(user.rucNumber)}</p>}
                     </div>
                     {getRoleBadge(user.role)}
                   </div>
@@ -386,67 +269,26 @@ export default function AdminUsersPage() {
       </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">{t('admin.users.role')}</label>
-            <select value={roleFilter} onChange={(e) => setRoleFilter(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 Roles</option>
-              <option value="admin">{t('admin.users.roles.admin')}</option>
-              <option value="organizer">{t('admin.users.roles.organizer')}</option>
-              <option value="staff">{t('admin.users.roles.staff')}</option>
-              <option value="marketing">{t('admin.users.roles.marketing')}</option>
-              <option value="user">{t('admin.users.roles.user')}</option>
-            </select>
-          </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="">All Statuses</option>
-              <option value="active">Active</option>
-              <option value="unclaimed">Unclaimed</option>
-              <option value="suspended">Suspended</option>
-            </select>
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Has Bookings</label>
-            <select value={hasBookingsFilter} onChange={(e) => setHasBookingsFilter(e.target.value as '' | 'yes' | 'no')}
-              className="w-full px-3 py-2.5 rounded-btn border border-secondary-light-gray text-sm min-h-[44px]">
-              <option value="">All</option>
-              <option value="yes">Yes</option>
-              <option value="no">No</option>
-            </select>
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Registered</label>
-            <select value={registeredRange} onChange={(e) => setRegisteredRange(e.target.value as RegisteredRange)}
-              className="w-full px-3 py-2.5 rounded-btn border border-secondary-light-gray text-sm min-h-[44px]">
-              <option value="">All Time</option>
-              <option value="7d">Last 7 days</option>
-              <option value="30d">Last 30 days</option>
-              <option value="90d">Last 90 days</option>
-            </select>
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Event</label>
-            <select value={eventFilter} onChange={(e) => setEventFilter(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 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>
+      <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>
 

frontend/src/app/error.tsx

@@ -1,54 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import Link from 'next/link';
-import Header from '@/components/layout/Header';
-import Footer from '@/components/layout/Footer';
-import Button from '@/components/ui/Button';
-
-export default function Error({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
-  useEffect(() => {
-    if (process.env.NODE_ENV === 'development') {
-      console.error(error);
-    }
-  }, [error]);
-
-  return (
-    <div className="min-h-screen flex flex-col">
-      <Header />
-      <main className="flex-1 flex items-center justify-center bg-secondary-gray px-4 py-16">
-        <div className="text-center max-w-md mx-auto">
-          <div className="text-6xl mb-4">😅</div>
-          <h1 className="text-3xl font-semibold text-primary-dark mb-2">
-            ¡Ups! Algo salió mal
-          </h1>
-          <p className="text-lg text-gray-700 mb-6">
-            Oops, something went wrong
-          </p>
-          <p className="text-gray-600 mb-8">
-            No fue tu culpa, fue un error de nuestro lado. Prueba de nuevo o vuelve al inicio mientras lo revisamos.
-            <br />
-            It was not your fault, something broke on our end. Try again or head back home while we take a look.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button onClick={reset} size="lg">
-              Intentar de nuevo · Try again
-            </Button>
-            <Link href="/">
-              <Button variant="outline" size="lg" className="w-full sm:w-auto">
-                Ir al inicio · Go home
-              </Button>
-            </Link>
-          </div>
-        </div>
-      </main>
-      <Footer />
-    </div>
-  );
-}

frontend/src/app/global-error.tsx

@@ -1,79 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { Poppins } from 'next/font/google';
-import './globals.css';
-
-const poppins = Poppins({
-  subsets: ['latin'],
-  display: 'swap',
-  variable: '--font-poppins',
-  weight: ['400', '500', '600', '700'],
-});
-
-export default function GlobalError({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
-  useEffect(() => {
-    if (process.env.NODE_ENV === 'development') {
-      console.error(error);
-    }
-  }, [error]);
-
-  return (
-    <html lang="en" className={poppins.variable}>
-      <body className={poppins.className}>
-        <div className="min-h-screen flex flex-col bg-secondary-gray">
-          <header className="bg-white shadow-sm">
-            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center">
-              <span className="text-xl font-semibold" style={{ color: '#002F44' }}>
-                Spanglish
-              </span>
-            </div>
-          </header>
-
-          <main className="flex-1 flex items-center justify-center px-4 py-16">
-            <div className="text-center max-w-md mx-auto bg-white rounded-card shadow-card p-8">
-              <div className="text-6xl mb-4">😵</div>
-              <h1 className="text-2xl font-semibold text-primary-dark mb-2">
-                ¡Ups! Algo salió mal
-              </h1>
-              <p className="text-lg text-gray-700 mb-4">
-                Oops, something went wrong
-              </p>
-              <p className="text-gray-600 mb-8">
-                Toda la página tuvo un problema al cargar. Prueba de nuevo o vuelve al inicio.
-                <br />
-                The whole page had trouble loading. Try again or head back home.
-              </p>
-              <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                <button
-                  onClick={reset}
-                  className="inline-flex items-center justify-center px-7 py-3 text-lg font-medium rounded-btn bg-primary-yellow text-primary-dark hover:bg-yellow-400 transition-colors"
-                >
-                  Intentar de nuevo · Try again
-                </button>
-                <a
-                  href="/"
-                  className="inline-flex items-center justify-center px-7 py-3 text-lg font-medium rounded-btn border-2 border-primary-dark text-primary-dark hover:bg-gray-50 transition-colors"
-                >
-                  Ir al inicio · Go home
-                </a>
-              </div>
-            </div>
-          </main>
-
-          <footer className="border-t border-secondary-light-gray py-6">
-            <p className="text-center text-sm" style={{ color: '#002F44' }}>
-              © {new Date().getFullYear()} Spanglish
-            </p>
-          </footer>
-        </div>
-      </body>
-    </html>
-  );
-}

frontend/src/app/layout.tsx

@@ -26,6 +26,20 @@ export const metadata: Metadata = {
     template: '%s – Spanglish',
   },
   description: 'Practice English and Spanish at relaxed social events in Asunción. Meet locals and internationals. Join the next Spanglish meetup.',
+  keywords: [
+    'language exchange',
+    'Spanglish',
+    'Spanglish social',
+    'English Spanish meetup',
+    'language exchange Asunción',
+    'practice English Asunción',
+    'intercambio de idiomas',
+    'intercambio de idiomas Asunción',
+    'English Spanish Paraguay',
+    'language events Paraguay',
+    'Asunción',
+    'Paraguay',
+  ],
   authors: [{ name: 'Spanglish' }],
   creator: 'Spanglish',
   publisher: 'Spanglish',
@@ -68,10 +82,12 @@ export const metadata: Metadata = {
       'max-snippet': -1,
     },
   },
-  // Each route overrides this with its own path so the canonical is
-  // self-referential. Resolved against metadataBase above.
   alternates: {
-    canonical: '/',
+    canonical: siteUrl,
+    languages: {
+      'en': siteUrl,
+      'es': `${siteUrl}/es`,
+    },
   },
   category: 'events',
   manifest: '/manifest.json',

frontend/src/app/linktree/page.tsx

@@ -73,22 +73,8 @@ export default function LinktreePage() {
           </h2>
           
           {loading ? (
-            <div
-              className="bg-white/10 backdrop-blur-sm rounded-2xl p-5 border border-white/10 animate-pulse"
-              role="status"
-              aria-busy="true"
-            >
-              <span className="sr-only">Loading…</span>
-              <div className="h-6 w-2/3 rounded-lg bg-white/15" />
-              <div className="mt-3 space-y-2">
-                <div className="h-4 w-3/4 rounded-lg bg-white/15" />
-                <div className="h-4 w-1/2 rounded-lg bg-white/15" />
-              </div>
-              <div className="mt-4 flex items-center justify-between">
-                <div className="h-5 w-20 rounded-lg bg-white/15" />
-                <div className="h-4 w-24 rounded-lg bg-white/15" />
-              </div>
-              <div className="mt-4 h-12 rounded-xl bg-white/15" />
+            <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 text-center">
+              <div className="animate-spin w-6 h-6 border-2 border-primary-yellow border-t-transparent rounded-full mx-auto" />
             </div>
           ) : nextEvent ? (
             <Link href={`/events/${nextEvent.slug}`} className="block group">

frontend/src/app/not-found.tsx

@@ -1,7 +1,5 @@
 import type { Metadata } from 'next';
-import Header from '@/components/layout/Header';
-import Footer from '@/components/layout/Footer';
-import { NotFoundMessage } from '@/components/NotFoundMessage';
+import Link from 'next/link';
 
 export const metadata: Metadata = {
   title: 'Page Not Found – Spanglish',
@@ -14,12 +12,30 @@ export const metadata: Metadata = {
 
 export default function NotFound() {
   return (
-    <div className="min-h-screen flex flex-col">
-      <Header />
-      <main className="flex-1 flex items-center justify-center bg-secondary-gray">
-        <NotFoundMessage />
-      </main>
-      <Footer />
+    <div className="min-h-screen flex items-center justify-center bg-secondary-gray">
+      <div className="text-center px-4">
+        <h1 className="text-6xl font-bold text-primary-dark mb-4">404</h1>
+        <h2 className="text-2xl font-semibold text-gray-700 mb-4">
+          Page Not Found
+        </h2>
+        <p className="text-gray-600 mb-8 max-w-md mx-auto">
+          The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.
+        </p>
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <Link
+            href="/"
+            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"
+          >
+            Go Home
+          </Link>
+          <Link
+            href="/events"
+            className="inline-flex items-center justify-center px-6 py-3 border-2 border-primary-dark text-primary-dark font-semibold rounded-btn hover:bg-primary-dark hover:text-white transition-colors"
+          >
+            View Events
+          </Link>
+        </div>
+      </div>
     </div>
   );
 }

frontend/src/components/NotFoundMessage.tsx

@@ -1,29 +0,0 @@
-import Link from 'next/link';
-
-export function NotFoundMessage() {
-  return (
-    <div className="text-center px-4 py-16">
-      <h1 className="text-6xl font-bold text-primary-dark mb-4">404</h1>
-      <h2 className="text-2xl font-semibold text-gray-700 mb-4">
-        Page Not Found
-      </h2>
-      <p className="text-gray-600 mb-8 max-w-md mx-auto">
-        The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.
-      </p>
-      <div className="flex flex-col sm:flex-row gap-4 justify-center">
-        <Link
-          href="/"
-          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"
-        >
-          Go Home
-        </Link>
-        <Link
-          href="/events"
-          className="inline-flex items-center justify-center px-6 py-3 border-2 border-primary-dark text-primary-dark font-semibold rounded-btn hover:bg-primary-dark hover:text-white transition-colors"
-        >
-          View Events
-        </Link>
-      </div>
-    </div>
-  );
-}

frontend/src/components/ui/Skeleton.tsx

@@ -1,227 +0,0 @@
-import clsx from 'clsx';
-
-// Skeleton loading previews. The base block uses Tailwind's animate-pulse and
-// the light-gray surface tokens so placeholders match real card/table styling.
-// Composites below mirror the layouts they stand in for (event cards, admin
-// tables, FAQ accordions, article bodies) to avoid layout shift when data lands.
-
-interface SkeletonProps {
-  className?: string;
-}
-
-export function Skeleton({ className }: SkeletonProps) {
-  return (
-    <div
-      aria-hidden="true"
-      className={clsx('animate-pulse rounded-lg bg-secondary-light-gray/70', className)}
-    />
-  );
-}
-
-// Screen-reader announcement wrapper for a group of skeleton blocks.
-export function SkeletonGroup({ className, children }: SkeletonProps & { children: React.ReactNode }) {
-  return (
-    <div role="status" aria-busy="true" className={className}>
-      <span className="sr-only">Loading…</span>
-      {children}
-    </div>
-  );
-}
-
-// Paragraph-style stack of text lines with a shorter last line.
-export function SkeletonText({ lines = 3, className }: SkeletonProps & { lines?: number }) {
-  return (
-    <div className={clsx('space-y-2.5', className)} aria-hidden="true">
-      {Array.from({ length: lines }).map((_, i) => (
-        <Skeleton key={i} className={clsx('h-4', i === lines - 1 ? 'w-2/3' : 'w-full')} />
-      ))}
-    </div>
-  );
-}
-
-// Mirrors the event card in EventsClient: banner, title, meta rows, price + button.
-export function EventCardSkeleton() {
-  return (
-    <div className="bg-white rounded-card overflow-hidden shadow-card h-full" aria-hidden="true">
-      <Skeleton className="h-40 w-full rounded-none" />
-      <div className="p-6">
-        <Skeleton className="h-6 w-3/4" />
-        <div className="mt-4 space-y-2">
-          <Skeleton className="h-4 w-2/3" />
-          <Skeleton className="h-4 w-1/2" />
-          <Skeleton className="h-4 w-2/5" />
-        </div>
-        <div className="mt-6 flex items-center justify-between">
-          <Skeleton className="h-7 w-24" />
-          <Skeleton className="h-9 w-24 rounded-btn" />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function EventGridSkeleton({ count = 6 }: { count?: number }) {
-  return (
-    <SkeletonGroup className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      {Array.from({ length: count }).map((_, i) => (
-        <EventCardSkeleton key={i} />
-      ))}
-    </SkeletonGroup>
-  );
-}
-
-// Mirrors the featured "next event" hero card on the homepage: side banner + info column.
-export function FeaturedEventSkeleton() {
-  return (
-    <SkeletonGroup>
-      <div className="bg-gray-50 border border-gray-200 rounded-2xl overflow-hidden shadow-lg">
-        <div className="flex flex-col md:flex-row">
-          <Skeleton className="w-full md:w-2/5 flex-shrink-0 h-48 md:h-auto md:min-h-[280px] rounded-none" />
-          <div className="flex-1 p-5 md:p-8">
-            <Skeleton className="h-7 w-2/3" />
-            <Skeleton className="mt-3 h-4 w-full" />
-            <Skeleton className="mt-2 h-4 w-5/6" />
-            <div className="mt-4 md:mt-5 space-y-2.5">
-              <Skeleton className="h-4 w-48" />
-              <Skeleton className="h-4 w-32" />
-              <Skeleton className="h-4 w-56" />
-            </div>
-            <div className="mt-5 md:mt-6 flex items-center justify-between gap-4">
-              <Skeleton className="h-9 w-28" />
-              <Skeleton className="h-10 w-28 rounded-xl" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </SkeletonGroup>
-  );
-}
-
-// Accordion-style rows for FAQ lists. `compact` matches the homepage variant
-// (rounded-btn, px-5); the default matches the /faq page cards (px-6, more spacing).
-export function FaqListSkeleton({ count = 5, compact = false }: { count?: number; compact?: boolean }) {
-  return (
-    <SkeletonGroup className={compact ? 'space-y-3' : 'space-y-4'}>
-      {Array.from({ length: count }).map((_, i) => (
-        <div
-          key={i}
-          className={clsx(
-            'bg-white border border-gray-200 flex items-center justify-between',
-            compact ? 'rounded-btn px-5 py-4' : 'rounded-card px-6 py-4 shadow-card border-0'
-          )}
-          aria-hidden="true"
-        >
-          <Skeleton className={clsx('h-5', i % 2 === 0 ? 'w-3/5' : 'w-2/5')} />
-          <Skeleton className="h-5 w-5 rounded-full flex-shrink-0" />
-        </div>
-      ))}
-    </SkeletonGroup>
-  );
-}
-
-// Long-form content: heading, meta line, then paragraph blocks.
-export function ArticleSkeleton({ withBanner = false }: { withBanner?: boolean }) {
-  return (
-    <SkeletonGroup>
-      {withBanner && <Skeleton className="h-56 md:h-80 w-full rounded-card mb-8" />}
-      <Skeleton className="h-9 w-3/4 md:w-1/2" />
-      <Skeleton className="mt-3 h-4 w-40" />
-      <div className="mt-8 space-y-6">
-        <SkeletonText lines={4} />
-        <SkeletonText lines={3} />
-        <Skeleton className="h-6 w-1/3" />
-        <SkeletonText lines={4} />
-      </div>
-    </SkeletonGroup>
-  );
-}
-
-// Stacked list of card rows (dashboard tickets/payments, contact lists).
-export function CardListSkeleton({ count = 3 }: { count?: number }) {
-  return (
-    <SkeletonGroup className="space-y-4">
-      {Array.from({ length: count }).map((_, i) => (
-        <div key={i} className="bg-white rounded-card shadow-card p-5" aria-hidden="true">
-          <div className="flex items-start justify-between gap-4">
-            <div className="flex-1">
-              <Skeleton className="h-5 w-1/3" />
-              <Skeleton className="mt-2.5 h-4 w-1/2" />
-              <Skeleton className="mt-2 h-4 w-2/5" />
-            </div>
-            <Skeleton className="h-6 w-20 rounded-full" />
-          </div>
-        </div>
-      ))}
-    </SkeletonGroup>
-  );
-}
-
-// Admin data tables: desktop table inside a Card, mobile stacked cards —
-// mirrors the two-breakpoint layout every admin list page renders.
-export function TableSkeleton({ rows = 6, cols = 5 }: { rows?: number; cols?: number }) {
-  return (
-    <SkeletonGroup>
-      {/* Desktop: table */}
-      <div className="bg-white rounded-card overflow-hidden shadow-card hidden md:block" aria-hidden="true">
-        <div className="bg-secondary-gray px-4 py-3 flex gap-4">
-          {Array.from({ length: cols }).map((_, i) => (
-            <Skeleton key={i} className="h-3.5 flex-1 bg-secondary-light-gray" />
-          ))}
-        </div>
-        <div className="divide-y divide-secondary-light-gray">
-          {Array.from({ length: rows }).map((_, r) => (
-            <div key={r} className="px-4 py-3.5 flex items-center gap-4">
-              <div className="flex items-center gap-3 flex-1">
-                <Skeleton className="w-10 h-10 rounded-lg flex-shrink-0" />
-                <Skeleton className="h-4 w-2/3" />
-              </div>
-              {Array.from({ length: cols - 1 }).map((_, c) => (
-                <Skeleton key={c} className={clsx('h-4 flex-1', c === cols - 2 && 'max-w-[80px]')} />
-              ))}
-            </div>
-          ))}
-        </div>
-      </div>
-      {/* Mobile: card list */}
-      <div className="md:hidden space-y-3" aria-hidden="true">
-        {Array.from({ length: Math.min(rows, 4) }).map((_, i) => (
-          <div key={i} className="bg-white rounded-card shadow-card p-4">
-            <div className="flex items-center gap-3">
-              <Skeleton className="w-12 h-12 rounded-lg flex-shrink-0" />
-              <div className="flex-1">
-                <Skeleton className="h-4 w-3/4" />
-                <Skeleton className="mt-2 h-3.5 w-1/2" />
-              </div>
-              <Skeleton className="h-6 w-16 rounded-full" />
-            </div>
-          </div>
-        ))}
-      </div>
-    </SkeletonGroup>
-  );
-}
-
-// Full admin page placeholder: title bar + table. Used by the `if (loading)`
-// gates that replace the entire page, so it includes the header row.
-export function AdminPageSkeleton({ rows = 6, cols = 5 }: { rows?: number; cols?: number }) {
-  return (
-    <div>
-      <div className="flex items-center justify-between mb-6">
-        <Skeleton className="h-8 w-48" />
-        <Skeleton className="h-10 w-36 rounded-btn hidden md:block" />
-      </div>
-      <TableSkeleton rows={rows} cols={cols} />
-    </div>
-  );
-}
-
-// Thumbnail grid (admin gallery/media pages).
-export function ImageGridSkeleton({ count = 12 }: { count?: number }) {
-  return (
-    <SkeletonGroup className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
-      {Array.from({ length: count }).map((_, i) => (
-        <Skeleton key={i} className="aspect-square w-full rounded-card" />
-      ))}
-    </SkeletonGroup>
-  );
-}

frontend/src/i18n/locales/en.json

@@ -134,7 +134,6 @@
         "bookingFailed": "Booking failed. Please try again.",
         "rucInvalidFormat": "Invalid format. Example: 12345678-9",
         "rucInvalidCheckDigit": "Invalid RUC. Please verify the number.",
-        "paymentMethodRequired": "Please select a payment method.",
         "termsRequired": "You must agree to the Terms of Service and Privacy Policy to continue."
       }
     },
@@ -165,14 +164,6 @@
       "backHome": "Back to Home"
     }
   },
-  "dashboard": {
-    "payment": {
-      "received": "Payment received",
-      "receivedConfirmShortly": "Payment received. We will confirm it shortly.",
-      "receivedConfirmSoon": "Payment received. We will confirm it shortly.",
-      "confirmForEvent": "We will confirm your {amount} payment for {event} shortly. Nothing else needed."
-    }
-  },
   "community": {
     "title": "Join Our Community",
     "subtitle": "Connect with us on social media and stay updated",

frontend/src/i18n/locales/es.json

@@ -134,7 +134,6 @@
         "bookingFailed": "La reserva falló. Por favor intenta de nuevo.",
         "rucInvalidFormat": "Formato inválido. Ej: 12345678-9",
         "rucInvalidCheckDigit": "RUC inválido. Verifique el número.",
-        "paymentMethodRequired": "Por favor selecciona un método de pago.",
         "termsRequired": "Debes aceptar los Términos de Servicio y la Política de Privacidad para continuar."
       }
     },
@@ -165,14 +164,6 @@
       "backHome": "Volver al Inicio"
     }
   },
-  "dashboard": {
-    "payment": {
-      "received": "Pago recibido",
-      "receivedConfirmShortly": "Pago recibido. Lo confirmaremos en breve.",
-      "receivedConfirmSoon": "Pago recibido. Lo confirmaremos pronto.",
-      "confirmForEvent": "Confirmaremos tu pago de {amount} para {event} en breve. No necesitas hacer nada más."
-    }
-  },
   "community": {
     "title": "Únete a Nuestra Comunidad",
     "subtitle": "Conéctate con nosotros en redes sociales",

frontend/src/lib/api/payments.ts

@@ -46,9 +46,4 @@ export const paymentsApi = {
 
   refund: (id: string) =>
     fetchApi<{ message: string }>(`/api/payments/${id}/refund`, { method: 'POST' }),
-
-  reactivate: (id: string) =>
-    fetchApi<{ payment: Payment; message: string }>(`/api/payments/${id}/reactivate`, {
-      method: 'POST',
-    }),
 };

frontend/src/lib/api/tickets.ts

@@ -6,7 +6,6 @@ import type {
   TicketValidationResult,
   TicketSearchResult,
   LiveSearchResult,
-  LightningInvoice,
 } from './types';
 
 export const ticketsApi = {
@@ -138,14 +137,6 @@ export const ticketsApi = {
       `/api/lnbits/status/${ticketId}`
     ),
 
-  // Get a Lightning invoice to pay/re-pay a ticket - reuses the stored invoice
-  // if it's still valid, otherwise generates a fresh one.
-  getLightningInvoice: (ticketId: string) =>
-    fetchApi<{ invoice?: LightningInvoice; reused?: boolean; alreadyPaid?: boolean }>(
-      `/api/lnbits/invoice/${ticketId}`,
-      { method: 'POST' }
-    ),
-
   // Get PDF download URL (returns the URL, not the PDF itself)
   getPdfUrl: (id: string) => `${API_BASE}/api/tickets/${id}/pdf`,
 };

frontend/src/lib/api/types.ts

@@ -25,15 +25,6 @@ export interface Event {
   updatedAt: string;
 }
 
-export interface LightningInvoice {
-  paymentHash: string;
-  paymentRequest: string; // BOLT11 invoice
-  amount: number; // Amount in satoshis
-  fiatAmount?: number; // Original fiat amount
-  fiatCurrency?: string; // Original fiat currency
-  expiresAt?: string;
-}
-
 export interface Ticket {
   id: string;
   bookingId?: string; // Groups multiple tickets from same booking
@@ -46,7 +37,7 @@ export interface Ticket {
   attendeePhone?: string;
   attendeeRuc?: string;
   preferredLanguage?: string;
-  status: 'pending' | 'confirmed' | 'cancelled' | 'checked_in' | 'on_hold';
+  status: 'pending' | 'confirmed' | 'cancelled' | 'checked_in';
   checkinAt?: string;
   checkedInByAdminId?: string;
   qrCode: string;
@@ -120,7 +111,7 @@ export interface Payment {
   provider: 'bancard' | 'lightning' | 'cash' | 'bank_transfer' | 'tpago';
   amount: number;
   currency: string;
-  status: 'pending' | 'pending_approval' | 'paid' | 'refunded' | 'failed' | 'on_hold';
+  status: 'pending' | 'pending_approval' | 'paid' | 'refunded' | 'failed';
   reference?: string;
   userMarkedPaidAt?: string;
   payerName?: string; // Name of payer if different from attendee
@@ -140,7 +131,6 @@ export interface PaymentWithDetails extends Payment {
     attendeeLastName?: string;
     attendeeEmail?: string;
     attendeePhone?: string;
-    attendeeRuc?: string;
     status: string;
   } | null;
   event: {
@@ -335,7 +325,6 @@ export interface ExportedPayment {
   attendeeFirstName: string;
   attendeeLastName?: string;
   attendeeEmail?: string;
-  attendeeRuc?: string;
   eventId: string;
   eventTitle: string;
   eventDate: string;

frontend/src/lib/api/users.ts

@@ -1,34 +1,10 @@
 import { fetchApi } from './client';
 import type { User } from './types';
 
-export interface UsersListParams {
-  role?: string;
-  search?: string;
-  accountStatus?: string;
-  hasBookings?: 'yes' | 'no';
-  registeredAfter?: string;
-  registeredBefore?: string;
-  eventId?: string;
-  page?: number;
-  pageSize?: number;
-}
-
 export const usersApi = {
-  getAll: (params?: UsersListParams | string) => {
-    // Back-compat: allow the old `getAll(role)` call shape.
-    const p: UsersListParams = typeof params === 'string' ? { role: params } : params || {};
-    const query = new URLSearchParams();
-    if (p.role) query.set('role', p.role);
-    if (p.search) query.set('search', p.search);
-    if (p.accountStatus) query.set('accountStatus', p.accountStatus);
-    if (p.hasBookings) query.set('hasBookings', p.hasBookings);
-    if (p.registeredAfter) query.set('registeredAfter', p.registeredAfter);
-    if (p.registeredBefore) query.set('registeredBefore', p.registeredBefore);
-    if (p.eventId) query.set('eventId', p.eventId);
-    if (p.page) query.set('page', String(p.page));
-    if (p.pageSize) query.set('pageSize', String(p.pageSize));
-    const qs = query.toString();
-    return fetchApi<{ users: User[]; total: number; page: number; pageSize: number }>(`/api/users${qs ? `?${qs}` : ''}`);
+  getAll: (role?: string) => {
+    const query = role ? `?role=${role}` : '';
+    return fetchApi<{ users: User[] }>(`/api/users${query}`);
   },
 
   getById: (id: string) => fetchApi<{ user: User }>(`/api/users/${id}`),

frontend/src/lib/utils.ts

@@ -166,18 +166,6 @@ export function formatCurrency(amount: number, currency: string = 'PYG'): string
   return formatPrice(amount, currency);
 }
 
-/**
- * Format a Paraguayan RUC for display as "base-checkdigit" (e.g. 1234567-9).
- * Legacy records stored digits only; insert the dash before the check digit.
- */
-export function formatRucDisplay(ruc: string | null | undefined): string {
-  if (!ruc) return '';
-  if (ruc.includes('-')) return ruc;
-  const digits = ruc.replace(/\D/g, '');
-  if (digits.length < 2) return ruc;
-  return `${digits.slice(0, -1)}-${digits.slice(-1)}`;
-}
-
 // ---------------------------------------------------------------------------
 // Payment helpers
 // ---------------------------------------------------------------------------

package.json

@@ -25,8 +25,5 @@
   ],
   "devDependencies": {
     "concurrently": "^8.2.2"
-  },
-  "dependencies": {
-    "next": "^16.2.10"
   }
 }