Unify admin ticket creation into one modal with first-class payment status.

- Replace the three Attendees-tab modals (Manual Ticket / Add at Door /
  Invite Guest) with a single Add Ticket modal: Paid/Unpaid/Guest segmented
  control, shared fields, "Check in now" for all types, and a live
  "what happens" preview, backed by one POST /api/tickets/admin/add.
- Add tickets.payment_status (paid | unpaid | comp) with a backfill
  migration; keep it in sync on every payment-settlement path (mark-paid,
  admin approval, Lightning, free bookings, hold recovery).
- Show Paid/Unpaid/Comp badges in the attendee list, count only paid
  tickets toward revenue, let unpaid tickets be resolved via Mark Paid,
  and flag unpaid tickets with their balance due in the door scanner.
- Replace the per-page useStatsPrivacy hook with an admin-wide
  PrivacyContext + SensitiveValue mask, toggled from the admin layout.
- Add server-side pagination with page-size options to the users page.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

backend/src/db/migrate.ts

@@ -199,7 +199,19 @@ async function migrate() {
     try {
       await (db as any).run(sql`ALTER TABLE tickets ADD COLUMN is_guest INTEGER NOT NULL DEFAULT 0`);
     } catch (e) { /* column may already exist */ }
-    
+
+    // Migration: Add payment_status column to tickets (paid | unpaid | comp),
+    // backfilled from is_guest and the payments table on first run
+    try {
+      await (db as any).run(sql`ALTER TABLE tickets ADD COLUMN payment_status TEXT NOT NULL DEFAULT 'unpaid'`);
+      await (db as any).run(sql`UPDATE tickets SET payment_status = 'comp' WHERE is_guest = 1`);
+      await (db as any).run(sql`
+        UPDATE tickets SET payment_status = 'paid'
+        WHERE is_guest = 0
+          AND id IN (SELECT ticket_id FROM payments WHERE status = 'paid')
+      `);
+    } catch (e) { /* column may already exist */ }
+
     // Make attendee_email and attendee_phone nullable (recreate table if needed or just allow nulls for new entries)
     // SQLite doesn't support altering column constraints, so we'll just ensure new entries work
 
@@ -702,6 +714,18 @@ async function migrate() {
       await (db as any).execute(sql`ALTER TABLE tickets ADD COLUMN is_guest INTEGER NOT NULL DEFAULT 0`);
     } catch (e) { /* column may already exist */ }
 
+    // Migration: Add payment_status column to tickets (paid | unpaid | comp),
+    // backfilled from is_guest and the payments table on first run
+    try {
+      await (db as any).execute(sql`ALTER TABLE tickets ADD COLUMN payment_status VARCHAR(10) NOT NULL DEFAULT 'unpaid'`);
+      await (db as any).execute(sql`UPDATE tickets SET payment_status = 'comp' WHERE is_guest = 1`);
+      await (db as any).execute(sql`
+        UPDATE tickets SET payment_status = 'paid'
+        WHERE is_guest = 0
+          AND id IN (SELECT ticket_id FROM payments WHERE status = 'paid')
+      `);
+    } catch (e) { /* column may already exist */ }
+
     await (db as any).execute(sql`
       CREATE TABLE IF NOT EXISTS payments (
         id UUID PRIMARY KEY,

backend/src/db/schema.ts

@@ -110,6 +110,8 @@ export const sqliteTickets = sqliteTable('tickets', {
   qrCode: text('qr_code'),
   adminNote: text('admin_note'),
   isGuest: integer('is_guest', { mode: 'boolean' }).notNull().default(false),
+  // Paid: revenue counted; Unpaid: balance due (collect at door); Comp: free guest, no revenue
+  paymentStatus: text('payment_status', { enum: ['paid', 'unpaid', 'comp'] }).notNull().default('unpaid'),
   createdAt: text('created_at').notNull(),
 });
 
@@ -468,6 +470,8 @@ export const pgTickets = pgTable('tickets', {
   qrCode: varchar('qr_code', { length: 255 }),
   adminNote: pgText('admin_note'),
   isGuest: pgInteger('is_guest').notNull().default(0),
+  // Paid: revenue counted; Unpaid: balance due (collect at door); Comp: free guest, no revenue
+  paymentStatus: varchar('payment_status', { length: 10 }).notNull().default('unpaid'),
   createdAt: timestamp('created_at').notNull(),
 });
 

backend/src/lib/holdRecovery.ts

@@ -75,6 +75,12 @@ export async function reserveOnHoldBooking(
     if (options.paidByAdminId) paymentUpdate.paidByAdminId = options.paidByAdminId;
   }
 
+  // Keep the ticket-level payment flag in sync when the payment settles
+  const ticketUpdate: Record<string, any> = { status: targetTicketStatus };
+  if (targetPaymentStatus === 'paid') {
+    ticketUpdate.paymentStatus = 'paid';
+  }
+
   // `needed` is how many of these tickets don't currently hold a seat and so must
   // be found new capacity; tickets already in a seat-holding state cost nothing.
   const assertCapacity = (reserved: number, needed: number) => {
@@ -97,7 +103,7 @@ export async function reserveOnHoldBooking(
       }
 
       tx.update(tickets)
-        .set({ status: targetTicketStatus })
+        .set(ticketUpdate)
         .where(and(
           inArray((tickets as any).id, ticketIds),
           inArray((tickets as any).status, fromTicketStatuses)
@@ -118,7 +124,7 @@ export async function reserveOnHoldBooking(
       }
 
       await tx.update(tickets)
-        .set({ status: targetTicketStatus })
+        .set(ticketUpdate)
         .where(and(
           inArray((tickets as any).id, ticketIds),
           inArray((tickets as any).status, fromTicketStatuses)

backend/src/routes/lnbits.ts

@@ -288,7 +288,7 @@ async function handlePaymentComplete(ticketId: string, paymentHash: string) {
   for (const ticket of ticketsToConfirm) {
     const result: any = await (db as any)
       .update(tickets)
-      .set({ status: 'confirmed' })
+      .set({ status: 'confirmed', paymentStatus: 'paid' })
       .where(and(eq((tickets as any).id, ticket.id), eq((tickets as any).status, 'pending')));
     transitioned += result?.changes ?? result?.rowCount ?? 0;
 

backend/src/routes/payments.ts

@@ -288,7 +288,7 @@ paymentsRouter.put('/:id', requireAuth(['admin', 'organizer']), zValidator('json
       
       await (db as any)
         .update(tickets)
-        .set({ status: 'confirmed' })
+        .set({ status: 'confirmed', paymentStatus: 'paid' })
         .where(eq((tickets as any).id, (t as any).id));
     }
     

backend/src/routes/tickets.ts

@@ -361,7 +361,7 @@ ticketsRouter.post('/', zValidator('json', createTicketSchema), async (c) => {
     for (const t of createdTickets) {
       await (db as any)
         .update(tickets)
-        .set({ status: 'confirmed' })
+        .set({ status: 'confirmed', paymentStatus: 'paid' })
         .where(and(eq((tickets as any).id, t.id), eq((tickets as any).status, 'pending')));
       await (db as any)
         .update(payments)
@@ -1002,6 +1002,9 @@ ticketsRouter.post('/validate', requireAuth(['admin', 'organizer', 'staff']), as
       attendeeEmail: ticket.attendeeEmail,
       attendeePhone: ticket.attendeePhone,
       status: ticket.status,
+      paymentStatus: ticket.paymentStatus,
+      // Balance to collect at the door for unpaid tickets
+      amountDue: ticket.paymentStatus === 'unpaid' && event ? event.price : 0,
       checkinAt: ticket.checkinAt,
       checkedInBy,
     },
@@ -1082,10 +1085,12 @@ ticketsRouter.post('/:id/mark-paid', requireAuth(['admin', 'organizer', 'staff']
     return c.json({ error: 'Ticket not found' }, 404);
   }
   
-  if (ticket.status === 'confirmed') {
+  // Confirmed/checked-in tickets can still be marked paid when they carry an
+  // unpaid balance (admin-added unpaid tickets collected at the door)
+  if (['confirmed', 'checked_in'].includes(ticket.status) && ticket.paymentStatus !== 'unpaid') {
     return c.json({ error: 'Ticket already confirmed' }, 400);
   }
-  
+
   if (ticket.status === 'cancelled') {
     return c.json({ error: 'Cannot confirm cancelled ticket' }, 400);
   }
@@ -1125,12 +1130,12 @@ ticketsRouter.post('/:id/mark-paid', requireAuth(['admin', 'organizer', 'staff']
       throw err;
     }
   } else {
-    // Confirm all tickets in the booking
+    // Confirm all tickets in the booking (checked-in tickets keep their status)
     for (const t of ticketsToConfirm) {
       // Update ticket status
       await (db as any)
         .update(tickets)
-        .set({ status: 'confirmed' })
+        .set({ status: t.status === 'checked_in' ? 'checked_in' : 'confirmed', paymentStatus: 'paid' })
         .where(eq((tickets as any).id, t.id));
 
       // Update payment status
@@ -1471,6 +1476,7 @@ ticketsRouter.post('/admin/create', requireAuth(['admin', 'organizer', 'staff'])
     attendeePhone: data.phone && data.phone.trim() ? data.phone.trim() : null,
     preferredLanguage: data.preferredLanguage || null,
     status: ticketStatus,
+    paymentStatus: 'paid',
     qrCode,
     checkinAt: data.autoCheckin ? now : null,
     adminNote: data.adminNote || null,
@@ -1514,148 +1520,26 @@ ticketsRouter.post('/admin/create', requireAuth(['admin', 'organizer', 'staff'])
   }, 201);
 });
 
-// Admin create manual ticket (sends confirmation email + ticket to attendee)
-ticketsRouter.post('/admin/manual', requireAuth(['admin', 'organizer', 'staff']), zValidator('json', z.object({
-  eventId: z.string(),
-  firstName: z.string().min(2),
-  lastName: z.string().optional().or(z.literal('')),
-  email: z.string().email('Valid email is required for manual tickets'),
-  phone: z.string().optional().or(z.literal('')),
-  preferredLanguage: z.enum(['en', 'es']).optional(),
-  adminNote: z.string().max(1000).optional(),
-})), async (c) => {
-  const data = c.req.valid('json');
-  
-  // Get event
-  const event = await dbGet<any>(
-    (db as any).select().from(events).where(eq((events as any).id, data.eventId))
-  );
-  if (!event) {
-    return c.json({ error: 'Event not found' }, 404);
-  }
-
-  // Admin manual ticket: bypass capacity check (allow over-capacity for admin-created tickets)
-
-  const now = getNow();
-  const attendeeEmail = data.email.trim();
-  
-  // Find or create user
-  let user = await dbGet<any>(
-    (db as any).select().from(users).where(eq((users as any).email, attendeeEmail))
-  );
-  
-  const fullName = data.lastName && data.lastName.trim()
-    ? `${data.firstName} ${data.lastName}`.trim()
-    : data.firstName;
-  
-  if (!user) {
-    const userId = generateId();
-    user = {
-      id: userId,
-      email: attendeeEmail,
-      password: '',
-      name: fullName,
-      phone: data.phone || null,
-      role: 'user',
-      languagePreference: null,
-      createdAt: now,
-      updatedAt: now,
-    };
-    await (db as any).insert(users).values(user);
-  }
-  
-  // Check for existing active ticket for this user and event
-  const existingTicket = await dbGet<any>(
-    (db as any)
-      .select()
-      .from(tickets)
-      .where(
-        and(
-          eq((tickets as any).userId, user.id),
-          eq((tickets as any).eventId, data.eventId)
-        )
-      )
-  );
-  
-  if (existingTicket && existingTicket.status !== 'cancelled') {
-    return c.json({ error: 'This person already has a ticket for this event' }, 400);
-  }
-  
-  // Create ticket as confirmed
-  const ticketId = generateId();
-  const qrCode = generateTicketCode();
-  
-  const newTicket = {
-    id: ticketId,
-    userId: user.id,
-    eventId: data.eventId,
-    attendeeFirstName: data.firstName,
-    attendeeLastName: data.lastName && data.lastName.trim() ? data.lastName.trim() : null,
-    attendeeEmail: attendeeEmail,
-    attendeePhone: data.phone && data.phone.trim() ? data.phone.trim() : null,
-    preferredLanguage: data.preferredLanguage || null,
-    status: 'confirmed',
-    qrCode,
-    checkinAt: null,
-    adminNote: data.adminNote || null,
-    createdAt: now,
-  };
-  
-  await (db as any).insert(tickets).values(newTicket);
-  
-  // Create payment record (marked as paid - manual entry)
-  const paymentId = generateId();
-  const adminUser = (c as any).get('user');
-  const newPayment = {
-    id: paymentId,
-    ticketId,
-    provider: 'cash',
-    amount: event.price,
-    currency: event.currency,
-    status: 'paid',
-    reference: 'Manual ticket',
-    paidAt: now,
-    paidByAdminId: adminUser?.id || null,
-    createdAt: now,
-    updatedAt: now,
-  };
-  
-  await (db as any).insert(payments).values(newPayment);
-  
-  // Send booking confirmation email + ticket (asynchronously)
-  emailService.sendBookingConfirmation(ticketId).then(result => {
-    if (result.success) {
-      console.log(`[Email] Booking confirmation sent for manual ticket ${ticketId}`);
-    } else {
-      console.error(`[Email] Failed to send booking confirmation for manual ticket ${ticketId}:`, result.error);
-    }
-  }).catch(err => {
-    console.error('[Email] Exception sending booking confirmation for manual ticket:', err);
-  });
-  
-  return c.json({
-    ticket: {
-      ...newTicket,
-      event: {
-        title: event.title,
-        startDatetime: event.startDatetime,
-        location: event.location,
-      },
-    },
-    payment: newPayment,
-    message: 'Manual ticket created and confirmation email sent',
-  }, 201);
-});
-
-// Admin invite guest ticket (free, confirmed, not counted in revenue)
-ticketsRouter.post('/admin/guest', requireAuth(['admin', 'organizer', 'staff']), zValidator('json', z.object({
+// Unified admin add-attendee endpoint backing the single Add Ticket modal.
+// type drives payment handling:
+//   paid   — email required; paid cash payment; confirmation email + QR sent
+//   unpaid — QR issued with balance due (collect at door); pending tpago payment;
+//            pay-link (Bancard/TPago) email sent when an email is provided
+//   guest  — free comp ticket, not counted in revenue; confirmation email only
+//            when an email is provided
+ticketsRouter.post('/admin/add', requireAuth(['admin', 'organizer', 'staff']), zValidator('json', z.object({
   eventId: z.string(),
+  type: z.enum(['paid', 'unpaid', 'guest']),
   firstName: z.string().min(1),
   lastName: z.string().optional().or(z.literal('')),
   email: z.string().email().optional().or(z.literal('')),
   phone: z.string().optional().or(z.literal('')),
   preferredLanguage: z.enum(['en', 'es']).optional(),
+  checkinNow: z.boolean().optional().default(false),
   adminNote: z.string().max(1000).optional(),
+}).refine((d) => d.type !== 'paid' || !!(d.email && d.email.trim()), {
+  message: 'Email is required for paid tickets',
+  path: ['email'],
 })), async (c) => {
   const data = c.req.valid('json');
 
@@ -1666,18 +1550,20 @@ ticketsRouter.post('/admin/guest', requireAuth(['admin', 'organizer', 'staff']),
     return c.json({ error: 'Event not found' }, 404);
   }
 
+  // Admin-added tickets bypass the capacity check (intentional over-capacity)
+
   const now = getNow();
   const adminUser = (c as any).get('user');
-
-  // Find or create user (use placeholder email if none provided)
-  const attendeeEmail = data.email && data.email.trim()
-    ? data.email.trim()
-    : `guest-${generateId()}@guestinvite.local`;
+  const hasEmail = !!(data.email && data.email.trim());
+  const attendeeEmail = hasEmail
+    ? data.email!.trim()
+    : `${data.type === 'guest' ? 'guest' : 'door'}-${generateId()}@${data.type === 'guest' ? 'guestinvite' : 'doorentry'}.local`;
 
   const fullName = data.lastName && data.lastName.trim()
     ? `${data.firstName} ${data.lastName}`.trim()
     : data.firstName;
 
+  // Find or create user
   let user = await dbGet<any>(
     (db as any).select().from(users).where(eq((users as any).email, attendeeEmail))
   );
@@ -1698,8 +1584,8 @@ ticketsRouter.post('/admin/guest', requireAuth(['admin', 'organizer', 'staff']),
     await (db as any).insert(users).values(user);
   }
 
-  // Check for existing active ticket (only for real emails, not placeholder)
-  if (data.email && data.email.trim()) {
+  // Check for existing active ticket (only when a real email was provided)
+  if (hasEmail) {
     const existingTicket = await dbGet<any>(
       (db as any)
         .select()
@@ -1718,6 +1604,7 @@ ticketsRouter.post('/admin/guest', requireAuth(['admin', 'organizer', 'staff']),
 
   const ticketId = generateId();
   const qrCode = generateTicketCode();
+  const paymentStatus = data.type === 'guest' ? 'comp' : data.type === 'paid' ? 'paid' : 'unpaid';
 
   const newTicket = {
     id: ticketId,
@@ -1725,50 +1612,85 @@ ticketsRouter.post('/admin/guest', requireAuth(['admin', 'organizer', 'staff']),
     eventId: data.eventId,
     attendeeFirstName: data.firstName,
     attendeeLastName: data.lastName && data.lastName.trim() ? data.lastName.trim() : null,
-    attendeeEmail: data.email && data.email.trim() ? data.email.trim() : null,
+    attendeeEmail: hasEmail ? data.email!.trim() : null,
     attendeePhone: data.phone && data.phone.trim() ? data.phone.trim() : null,
     preferredLanguage: data.preferredLanguage || null,
-    status: 'confirmed',
-    isGuest: 1,
+    status: data.checkinNow ? 'checked_in' : 'confirmed',
+    isGuest: data.type === 'guest' ? 1 : 0,
+    paymentStatus,
     qrCode,
-    checkinAt: null,
+    checkinAt: data.checkinNow ? now : null,
+    checkedInByAdminId: data.checkinNow ? adminUser?.id || null : null,
     adminNote: data.adminNote || null,
     createdAt: now,
   };
 
   await (db as any).insert(tickets).values(newTicket);
 
-  // Create a $0 payment record to track the invite
+  // Payment record: paid cash for paid/guest ($0 for guest), pending tpago for unpaid
   const paymentId = generateId();
-  const newPayment = {
-    id: paymentId,
-    ticketId,
-    provider: 'cash',
-    amount: 0,
-    currency: event.currency,
-    status: 'paid',
-    reference: 'Guest invite',
-    paidAt: now,
-    paidByAdminId: adminUser?.id || null,
-    createdAt: now,
-    updatedAt: now,
-  };
+  const newPayment = data.type === 'unpaid'
+    ? {
+        id: paymentId,
+        ticketId,
+        provider: 'tpago',
+        amount: event.price,
+        currency: event.currency,
+        status: 'pending',
+        reference: 'Unpaid ticket — collect at door',
+        paidAt: null,
+        paidByAdminId: null,
+        createdAt: now,
+        updatedAt: now,
+      }
+    : {
+        id: paymentId,
+        ticketId,
+        provider: 'cash',
+        amount: data.type === 'guest' ? 0 : event.price,
+        currency: event.currency,
+        status: 'paid',
+        reference: data.type === 'guest' ? 'Guest invite' : 'Manual ticket',
+        paidAt: now,
+        paidByAdminId: adminUser?.id || null,
+        createdAt: now,
+        updatedAt: now,
+      };
 
   await (db as any).insert(payments).values(newPayment);
 
-  // Send booking confirmation email if a real email was provided
-  if (data.email && data.email.trim()) {
+  // Emails (asynchronous): paid always confirms; guest confirms when an email
+  // exists; unpaid sends the TPago (Bancard) pay-link instructions instead
+  if (data.type === 'unpaid') {
+    if (hasEmail) {
+      emailService.sendPaymentInstructions(ticketId).then(result => {
+        if (!result.success) {
+          console.error(`[Email] Failed to send pay link for unpaid ticket ${ticketId}:`, result.error);
+        }
+      }).catch(err => {
+        console.error('[Email] Exception sending pay link for unpaid ticket:', err);
+      });
+    }
+  } else if (data.type === 'paid' || hasEmail) {
     emailService.sendBookingConfirmation(ticketId).then(result => {
-      if (result.success) {
-        console.log(`[Email] Booking confirmation sent for guest ticket ${ticketId}`);
-      } else {
-        console.error(`[Email] Failed to send booking confirmation for guest ticket ${ticketId}:`, result.error);
+      if (!result.success) {
+        console.error(`[Email] Failed to send booking confirmation for ${data.type} ticket ${ticketId}:`, result.error);
       }
     }).catch(err => {
-      console.error('[Email] Exception sending booking confirmation for guest ticket:', err);
+      console.error(`[Email] Exception sending booking confirmation for ${data.type} ticket:`, err);
     });
   }
 
+  const messages: Record<string, string> = {
+    paid: 'Ticket created — confirmation email sent',
+    unpaid: hasEmail
+      ? 'Unpaid ticket created — payment link sent'
+      : 'Unpaid ticket created — collect payment at the door',
+    guest: hasEmail
+      ? 'Guest invited — confirmation email sent'
+      : 'Guest invited',
+  };
+
   return c.json({
     ticket: {
       ...newTicket,
@@ -1779,7 +1701,7 @@ ticketsRouter.post('/admin/guest', requireAuth(['admin', 'organizer', 'staff']),
       },
     },
     payment: newPayment,
-    message: 'Guest ticket created successfully',
+    message: data.checkinNow ? `${messages[data.type]} · checked in` : messages[data.type],
   }, 201);
 });
 

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

@@ -18,3 +18,23 @@ export function StatusBadge({ status, compact = false }: { status: string; compa
     </span>
   );
 }
+
+// Ticket payment status: Paid (revenue), Unpaid (balance due at door), Comp (free guest).
+// Tickets created before the payment_status column default to unpaid via backfill.
+export function PaymentBadge({ paymentStatus, compact = false }: { paymentStatus?: string; compact?: boolean }) {
+  if (!paymentStatus) return null;
+  const styles: Record<string, string> = {
+    paid: 'bg-emerald-100 text-emerald-700',
+    unpaid: 'bg-orange-100 text-orange-700',
+    comp: 'bg-amber-100 text-amber-700',
+  };
+  return (
+    <span className={clsx(
+      'inline-flex items-center rounded-full font-medium',
+      compact ? 'px-1.5 py-0.5 text-[10px]' : 'px-2 py-0.5 text-xs',
+      styles[paymentStatus] || 'bg-gray-100 text-gray-800'
+    )}>
+      {paymentStatus === 'comp' ? 'Comp' : paymentStatus === 'unpaid' ? 'Unpaid' : 'Paid'}
+    </span>
+  );
+}

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

@@ -0,0 +1,209 @@
+import type { Dispatch, FormEvent, SetStateAction } from 'react';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import clsx from 'clsx';
+import {
+  BanknotesIcon,
+  CheckCircleIcon,
+  EnvelopeIcon,
+  LinkIcon,
+  StarIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/outline';
+import type { AddTicketType, AddTicketFormState } from '../_types';
+
+interface AddTicketModalProps {
+  open: boolean;
+  onClose: () => void;
+  form: AddTicketFormState;
+  setForm: Dispatch<SetStateAction<AddTicketFormState>>;
+  onSubmit: (e: FormEvent) => void;
+  submitting: boolean;
+  eventPriceLabel: string;
+}
+
+const TYPE_OPTIONS: { value: AddTicketType; label: string }[] = [
+  { value: 'paid', label: 'Paid' },
+  { value: 'unpaid', label: 'Unpaid' },
+  { value: 'guest', label: 'Guest' },
+];
+
+const SUBMIT_LABELS: Record<AddTicketType, string> = {
+  paid: 'Create & send ticket',
+  unpaid: 'Create & send pay link',
+  guest: 'Invite guest',
+};
+
+const SUBMIT_ICONS: Record<AddTicketType, typeof EnvelopeIcon> = {
+  paid: EnvelopeIcon,
+  unpaid: LinkIcon,
+  guest: StarIcon,
+};
+
+// Live "what happens" preview lines for the selected type / email / check-in combo
+function previewLines(form: AddTicketFormState, eventPriceLabel: string): string[] {
+  const hasEmail = !!form.email.trim();
+  const lines: string[] = [];
+  if (form.type === 'paid') {
+    lines.push(`Payment of ${eventPriceLabel} recorded as paid — counts toward revenue`);
+    lines.push('Confirmation email with QR ticket sent');
+  } else if (form.type === 'unpaid') {
+    lines.push(`Ticket marked unpaid — balance of ${eventPriceLabel} to collect at the door`);
+    lines.push('QR code issued, flagged "unpaid" for door staff');
+    lines.push(hasEmail
+      ? 'Bancard (TPago) payment link emailed to the attendee'
+      : 'No email — no pay link sent, payment collected at the door');
+  } else {
+    lines.push('Free guest ticket (comp) — not counted in revenue');
+    lines.push('Auto-confirmed with QR code');
+    lines.push(hasEmail ? 'Confirmation email sent' : 'No email — nothing is sent');
+  }
+  if (form.checkinNow) {
+    lines.push('Checked in immediately');
+  }
+  return lines;
+}
+
+const PREVIEW_STYLES: Record<AddTicketType, { box: string; icon: string; text: string }> = {
+  paid: { box: 'bg-blue-50 border-blue-200', icon: 'text-blue-500', text: 'text-blue-800' },
+  unpaid: { box: 'bg-orange-50 border-orange-200', icon: 'text-orange-500', text: 'text-orange-800' },
+  guest: { box: 'bg-amber-50 border-amber-200', icon: 'text-amber-500', text: 'text-amber-800' },
+};
+
+const PREVIEW_ICONS: Record<AddTicketType, typeof EnvelopeIcon> = {
+  paid: CheckCircleIcon,
+  unpaid: BanknotesIcon,
+  guest: StarIcon,
+};
+
+export function AddTicketModal({
+  open,
+  onClose,
+  form,
+  setForm,
+  onSubmit,
+  submitting,
+  eventPriceLabel,
+}: AddTicketModalProps) {
+  if (!open) return null;
+
+  const emailRequired = form.type === 'paid';
+  const style = PREVIEW_STYLES[form.type];
+  const PreviewIcon = PREVIEW_ICONS[form.type];
+  const SubmitIcon = SUBMIT_ICONS[form.type];
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4"
+      onClick={onClose}
+      role="presentation"
+    >
+      <Card
+        className="w-full md:max-w-md max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray flex-shrink-0">
+          <h2 className="text-base font-bold">Add Ticket</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={onSubmit} className="p-4 space-y-3 overflow-y-auto flex-1 min-h-0">
+          {/* Segmented ticket-type control */}
+          <div className="flex rounded-btn bg-gray-100 p-1">
+            {TYPE_OPTIONS.map((option) => (
+              <button
+                key={option.value}
+                type="button"
+                onClick={() => setForm((f) => ({ ...f, type: option.value }))}
+                className={clsx(
+                  'flex-1 px-3 py-2 text-sm font-medium rounded-btn min-h-[36px] transition-colors',
+                  form.type === option.value
+                    ? 'bg-white shadow-sm text-primary-dark'
+                    : 'text-gray-500 hover:text-gray-700'
+                )}
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs font-medium mb-1">First Name *</label>
+              <input type="text" required value={form.firstName}
+                onChange={(e) => setForm((f) => ({ ...f, firstName: e.target.value }))}
+                className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                placeholder="First name" />
+            </div>
+            <div>
+              <label className="block text-xs font-medium mb-1">Last Name</label>
+              <input type="text" value={form.lastName}
+                onChange={(e) => setForm((f) => ({ ...f, lastName: e.target.value }))}
+                className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                placeholder="Last name" />
+            </div>
+          </div>
+          <div>
+            <label className="block text-xs font-medium mb-1">Email {emailRequired && '*'}</label>
+            <input type="email" required={emailRequired} value={form.email}
+              onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
+              className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+              placeholder={emailRequired ? 'email@example.com' : 'email@example.com (optional)'} />
+            <p className="text-[10px] text-gray-500 mt-1">
+              {form.type === 'paid' && 'Ticket will be sent to this email'}
+              {form.type === 'unpaid' && 'If provided, the payment link is sent here'}
+              {form.type === 'guest' && 'If provided, a confirmation email will be sent'}
+            </p>
+          </div>
+          <div>
+            <label className="block text-xs font-medium mb-1">Phone</label>
+            <input type="tel" value={form.phone}
+              onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))}
+              className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+              placeholder="+595 981 123456" />
+          </div>
+          <div>
+            <label className="block text-xs font-medium mb-1">Admin Note</label>
+            <textarea value={form.adminNote}
+              onChange={(e) => setForm((f) => ({ ...f, adminNote: e.target.value }))}
+              className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+              rows={2} placeholder="Internal note..." />
+          </div>
+          <div className="flex items-center gap-3">
+            <input type="checkbox" id="checkinNow" checked={form.checkinNow}
+              onChange={(e) => setForm((f) => ({ ...f, checkinNow: e.target.checked }))}
+              className="w-4 h-4 rounded border-secondary-light-gray text-primary-yellow focus:ring-primary-yellow" />
+            <label htmlFor="checkinNow" className="text-sm font-medium">Check in now</label>
+          </div>
+
+          {/* Live preview of what this submission does */}
+          <div className={clsx('border rounded-lg p-3', style.box)}>
+            <div className="flex items-start gap-2">
+              <PreviewIcon className={clsx('w-4 h-4 mt-0.5 flex-shrink-0', style.icon)} />
+              <div className={clsx('text-xs', style.text)}>
+                <p className="font-medium">What happens:</p>
+                <ul className="list-disc ml-4 mt-0.5 space-y-0.5">
+                  {previewLines(form, eventPriceLabel).map((line) => (
+                    <li key={line}>{line}</li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex gap-3 pt-2">
+            <Button type="button" variant="outline" onClick={onClose} className="flex-1 min-h-[44px]">Cancel</Button>
+            <Button type="submit" isLoading={submitting} className="flex-1 min-h-[44px]">
+              <SubmitIcon className="w-4 h-4 mr-1.5" />
+              {SUBMIT_LABELS[form.type]}
+            </Button>
+          </div>
+        </form>
+      </Card>
+    </div>
+  );
+}

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

@@ -1,17 +1,16 @@
-import type { Dispatch, FormEvent, SetStateAction } from 'react';
 import { Ticket } from '@/lib/api';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import { BottomSheet } from '@/components/admin/MobileComponents';
 import clsx from 'clsx';
 import {
+  BanknotesIcon,
   CheckCircleIcon,
   EnvelopeIcon,
-  PlusIcon,
   StarIcon,
   XMarkIcon,
 } from '@heroicons/react/24/outline';
-import type { AttendeeStatusFilter, AttendeeFormState, AddAtDoorFormState } from '../_types';
+import type { AttendeeStatusFilter, AddTicketType } from '../_types';
 
 interface EventModalsProps {
   // counts + filter
@@ -29,6 +28,7 @@ interface EventModalsProps {
   // add ticket sheet
   showAddTicketSheet: boolean;
   setShowAddTicketSheet: (value: boolean) => void;
+  openAddTicket: (type: AddTicketType) => void;
   // export sheets
   showExportSheet: boolean;
   setShowExportSheet: (value: boolean) => void;
@@ -36,24 +36,6 @@ interface EventModalsProps {
   showTicketExportSheet: boolean;
   setShowTicketExportSheet: (value: boolean) => void;
   handleExportTickets: (status: 'confirmed' | 'checked_in' | 'all') => void;
-  // add at door
-  showAddAtDoorModal: boolean;
-  setShowAddAtDoorModal: (value: boolean) => void;
-  addAtDoorForm: AddAtDoorFormState;
-  setAddAtDoorForm: Dispatch<SetStateAction<AddAtDoorFormState>>;
-  handleAddAtDoor: (e: FormEvent) => void;
-  // manual ticket
-  showManualTicketModal: boolean;
-  setShowManualTicketModal: (value: boolean) => void;
-  manualTicketForm: AttendeeFormState;
-  setManualTicketForm: Dispatch<SetStateAction<AttendeeFormState>>;
-  handleManualTicket: (e: FormEvent) => void;
-  // invite guest
-  showInviteGuestModal: boolean;
-  setShowInviteGuestModal: (value: boolean) => void;
-  inviteGuestForm: AttendeeFormState;
-  setInviteGuestForm: Dispatch<SetStateAction<AttendeeFormState>>;
-  handleInviteGuest: (e: FormEvent) => void;
   // shared submit flag
   submitting: boolean;
   // note modal
@@ -83,27 +65,13 @@ export function EventModals(props: EventModalsProps) {
     setMobileFilterOpen,
     showAddTicketSheet,
     setShowAddTicketSheet,
+    openAddTicket,
     showExportSheet,
     setShowExportSheet,
     handleExportAttendees,
     showTicketExportSheet,
     setShowTicketExportSheet,
     handleExportTickets,
-    showAddAtDoorModal,
-    setShowAddAtDoorModal,
-    addAtDoorForm,
-    setAddAtDoorForm,
-    handleAddAtDoor,
-    showManualTicketModal,
-    setShowManualTicketModal,
-    manualTicketForm,
-    setManualTicketForm,
-    handleManualTicket,
-    showInviteGuestModal,
-    setShowInviteGuestModal,
-    inviteGuestForm,
-    setInviteGuestForm,
-    handleInviteGuest,
     submitting,
     showNoteModal,
     setShowNoteModal,
@@ -156,27 +124,27 @@ export function EventModals(props: EventModalsProps) {
       >
         <div className="space-y-1">
           <button
-            onClick={() => { setShowManualTicketModal(true); setShowAddTicketSheet(false); }}
+            onClick={() => { openAddTicket('paid'); setShowAddTicketSheet(false); }}
             className="w-full text-left px-4 py-3 rounded-btn text-sm hover:bg-gray-50 min-h-[44px] flex items-center gap-3"
           >
             <EnvelopeIcon className="w-5 h-5 text-gray-500" />
             <div>
-              <p className="font-medium">Manual Ticket</p>
-              <p className="text-xs text-gray-500">Send confirmation email with ticket</p>
+              <p className="font-medium">Paid Ticket</p>
+              <p className="text-xs text-gray-500">Send confirmation email with QR ticket</p>
             </div>
           </button>
           <button
-            onClick={() => { setShowAddAtDoorModal(true); setShowAddTicketSheet(false); }}
+            onClick={() => { openAddTicket('unpaid'); setShowAddTicketSheet(false); }}
             className="w-full text-left px-4 py-3 rounded-btn text-sm hover:bg-gray-50 min-h-[44px] flex items-center gap-3"
           >
-            <PlusIcon className="w-5 h-5 text-gray-500" />
+            <BanknotesIcon className="w-5 h-5 text-gray-500" />
             <div>
-              <p className="font-medium">Add at Door</p>
-              <p className="text-xs text-gray-500">Quick add with optional auto check-in</p>
+              <p className="font-medium">Unpaid Ticket</p>
+              <p className="text-xs text-gray-500">Pay link now or collect at the door</p>
             </div>
           </button>
           <button
-            onClick={() => { setShowInviteGuestModal(true); setShowAddTicketSheet(false); }}
+            onClick={() => { openAddTicket('guest'); setShowAddTicketSheet(false); }}
             className="w-full text-left px-4 py-3 rounded-btn text-sm hover:bg-gray-50 min-h-[44px] flex items-center gap-3"
           >
             <StarIcon className="w-5 h-5 text-gray-500" />
@@ -237,243 +205,6 @@ export function EventModals(props: EventModalsProps) {
         </div>
       </BottomSheet>
 
-      {/* Add at Door Modal */}
-      {showAddAtDoorModal && (
-        <div
-          className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4"
-          onClick={() => setShowAddAtDoorModal(false)}
-          role="presentation"
-        >
-          <Card
-            className="w-full md:max-w-md max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray flex-shrink-0">
-              <h2 className="text-base font-bold">Add Attendee at Door</h2>
-              <button
-                onClick={() => setShowAddAtDoorModal(false)}
-                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center"
-              >
-                <XMarkIcon className="w-5 h-5" />
-              </button>
-            </div>
-            <form onSubmit={handleAddAtDoor} className="p-4 space-y-3 overflow-y-auto flex-1 min-h-0">
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <label className="block text-xs font-medium mb-1">First Name *</label>
-                  <input type="text" required value={addAtDoorForm.firstName}
-                    onChange={(e) => setAddAtDoorForm({ ...addAtDoorForm, firstName: e.target.value })}
-                    className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                    placeholder="First name" />
-                </div>
-                <div>
-                  <label className="block text-xs font-medium mb-1">Last Name</label>
-                  <input type="text" value={addAtDoorForm.lastName}
-                    onChange={(e) => setAddAtDoorForm({ ...addAtDoorForm, lastName: e.target.value })}
-                    className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                    placeholder="Last name" />
-                </div>
-              </div>
-              <div>
-                <label className="block text-xs font-medium mb-1">Email</label>
-                <input type="email" value={addAtDoorForm.email}
-                  onChange={(e) => setAddAtDoorForm({ ...addAtDoorForm, email: e.target.value })}
-                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                  placeholder="email@example.com" />
-              </div>
-              <div>
-                <label className="block text-xs font-medium mb-1">Phone</label>
-                <input type="tel" value={addAtDoorForm.phone}
-                  onChange={(e) => setAddAtDoorForm({ ...addAtDoorForm, phone: e.target.value })}
-                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                  placeholder="+595 981 123456" />
-              </div>
-              <div>
-                <label className="block text-xs font-medium mb-1">Admin Note</label>
-                <textarea value={addAtDoorForm.adminNote}
-                  onChange={(e) => setAddAtDoorForm({ ...addAtDoorForm, adminNote: e.target.value })}
-                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                  rows={2} placeholder="Internal note..." />
-              </div>
-              <div className="flex items-center gap-3">
-                <input type="checkbox" id="autoCheckin" checked={addAtDoorForm.autoCheckin}
-                  onChange={(e) => setAddAtDoorForm({ ...addAtDoorForm, autoCheckin: e.target.checked })}
-                  className="w-4 h-4 rounded border-secondary-light-gray text-primary-yellow focus:ring-primary-yellow" />
-                <label htmlFor="autoCheckin" className="text-sm font-medium">Auto check-in immediately</label>
-              </div>
-              <div className="flex gap-3 pt-2">
-                <Button type="button" variant="outline" onClick={() => setShowAddAtDoorModal(false)} className="flex-1 min-h-[44px]">Cancel</Button>
-                <Button type="submit" isLoading={submitting} className="flex-1 min-h-[44px]">Add Attendee</Button>
-              </div>
-            </form>
-          </Card>
-        </div>
-      )}
-
-      {/* Manual Ticket Modal */}
-      {showManualTicketModal && (
-        <div
-          className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4"
-          onClick={() => setShowManualTicketModal(false)}
-          role="presentation"
-        >
-          <Card
-            className="w-full md:max-w-md max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray flex-shrink-0">
-              <div>
-                <h2 className="text-base font-bold">Create Manual Ticket</h2>
-                <p className="text-xs text-gray-500">Confirmation email will be sent</p>
-              </div>
-              <button onClick={() => setShowManualTicketModal(false)}
-                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
-                <XMarkIcon className="w-5 h-5" />
-              </button>
-            </div>
-            <form onSubmit={handleManualTicket} className="p-4 space-y-3 overflow-y-auto flex-1 min-h-0">
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <label className="block text-xs font-medium mb-1">First Name *</label>
-                  <input type="text" required value={manualTicketForm.firstName}
-                    onChange={(e) => setManualTicketForm({ ...manualTicketForm, firstName: e.target.value })}
-                    className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                    placeholder="First name" />
-                </div>
-                <div>
-                  <label className="block text-xs font-medium mb-1">Last Name</label>
-                  <input type="text" value={manualTicketForm.lastName}
-                    onChange={(e) => setManualTicketForm({ ...manualTicketForm, lastName: e.target.value })}
-                    className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                    placeholder="Last name" />
-                </div>
-              </div>
-              <div>
-                <label className="block text-xs font-medium mb-1">Email *</label>
-                <input type="email" required value={manualTicketForm.email}
-                  onChange={(e) => setManualTicketForm({ ...manualTicketForm, email: e.target.value })}
-                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                  placeholder="email@example.com" />
-                <p className="text-[10px] text-gray-500 mt-1">Ticket will be sent to this email</p>
-              </div>
-              <div>
-                <label className="block text-xs font-medium mb-1">Phone</label>
-                <input type="tel" value={manualTicketForm.phone}
-                  onChange={(e) => setManualTicketForm({ ...manualTicketForm, phone: e.target.value })}
-                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                  placeholder="+595 981 123456" />
-              </div>
-              <div>
-                <label className="block text-xs font-medium mb-1">Admin Note</label>
-                <textarea value={manualTicketForm.adminNote}
-                  onChange={(e) => setManualTicketForm({ ...manualTicketForm, adminNote: e.target.value })}
-                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                  rows={2} placeholder="Internal note..." />
-              </div>
-              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
-                <div className="flex items-start gap-2">
-                  <EnvelopeIcon className="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" />
-                  <div className="text-xs text-blue-800">
-                    <p className="font-medium">This will send:</p>
-                    <ul className="list-disc ml-4 mt-0.5 space-y-0.5">
-                      <li>Booking confirmation email</li>
-                      <li>Ticket with QR code</li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-              <div className="flex gap-3 pt-2">
-                <Button type="button" variant="outline" onClick={() => setShowManualTicketModal(false)} className="flex-1 min-h-[44px]">Cancel</Button>
-                <Button type="submit" isLoading={submitting} className="flex-1 min-h-[44px]">
-                  <EnvelopeIcon className="w-4 h-4 mr-1.5" />
-                  Create & Send
-                </Button>
-              </div>
-            </form>
-          </Card>
-        </div>
-      )}
-
-      {/* Invite Guest Modal */}
-      {showInviteGuestModal && (
-        <div
-          className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4"
-          onClick={() => setShowInviteGuestModal(false)}
-          role="presentation"
-        >
-          <Card
-            className="w-full md:max-w-md max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray flex-shrink-0">
-              <div>
-                <h2 className="text-base font-bold">Invite Guest</h2>
-                <p className="text-xs text-gray-500">Free ticket — not counted in revenue</p>
-              </div>
-              <button onClick={() => setShowInviteGuestModal(false)}
-                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
-                <XMarkIcon className="w-5 h-5" />
-              </button>
-            </div>
-            <form onSubmit={handleInviteGuest} className="p-4 space-y-3 overflow-y-auto flex-1 min-h-0">
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <label className="block text-xs font-medium mb-1">First Name *</label>
-                  <input type="text" required value={inviteGuestForm.firstName}
-                    onChange={(e) => setInviteGuestForm({ ...inviteGuestForm, firstName: e.target.value })}
-                    className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                    placeholder="First name" />
-                </div>
-                <div>
-                  <label className="block text-xs font-medium mb-1">Last Name</label>
-                  <input type="text" value={inviteGuestForm.lastName}
-                    onChange={(e) => setInviteGuestForm({ ...inviteGuestForm, lastName: e.target.value })}
-                    className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                    placeholder="Last name" />
-                </div>
-              </div>
-              <div>
-                <label className="block text-xs font-medium mb-1">Email</label>
-                <input type="email" value={inviteGuestForm.email}
-                  onChange={(e) => setInviteGuestForm({ ...inviteGuestForm, email: e.target.value })}
-                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                  placeholder="email@example.com (optional)" />
-                <p className="text-[10px] text-gray-500 mt-1">If provided, a confirmation email will be sent</p>
-              </div>
-              <div>
-                <label className="block text-xs font-medium mb-1">Phone</label>
-                <input type="tel" value={inviteGuestForm.phone}
-                  onChange={(e) => setInviteGuestForm({ ...inviteGuestForm, phone: e.target.value })}
-                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                  placeholder="+595 981 123456" />
-              </div>
-              <div>
-                <label className="block text-xs font-medium mb-1">Admin Note</label>
-                <textarea value={inviteGuestForm.adminNote}
-                  onChange={(e) => setInviteGuestForm({ ...inviteGuestForm, adminNote: e.target.value })}
-                  className="w-full px-3 py-2.5 text-sm rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
-                  rows={2} placeholder="Internal note..." />
-              </div>
-              <div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
-                <div className="flex items-start gap-2">
-                  <StarIcon className="w-4 h-4 text-amber-500 mt-0.5 flex-shrink-0" />
-                  <p className="text-xs text-amber-800">
-                    Guest tickets are <strong>free</strong> and are automatically confirmed. They are not counted toward revenue or paid ticket totals.
-                  </p>
-                </div>
-              </div>
-              <div className="flex gap-3 pt-2">
-                <Button type="button" variant="outline" onClick={() => setShowInviteGuestModal(false)} className="flex-1 min-h-[44px]">Cancel</Button>
-                <Button type="submit" isLoading={submitting} className="flex-1 min-h-[44px]">
-                  <StarIcon className="w-4 h-4 mr-1.5" />
-                  Invite Guest
-                </Button>
-              </div>
-            </form>
-          </Card>
-        </div>
-      )}
-
       {/* Note Modal */}
       {showNoteModal && selectedTicket && (
         <div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">

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

@@ -14,9 +14,11 @@ import {
   FunnelIcon,
   ChatBubbleLeftIcon,
   ArrowPathIcon,
+  BanknotesIcon,
+  CheckCircleIcon,
 } from '@heroicons/react/24/outline';
-import { StatusBadge } from '../_components/StatusBadge';
-import type { AttendeeStatusFilter, PrimaryAction } from '../_types';
+import { StatusBadge, PaymentBadge } from '../_components/StatusBadge';
+import type { AttendeeStatusFilter, AddTicketType, PrimaryAction } from '../_types';
 
 interface AttendeesTabProps {
   locale: string;
@@ -37,15 +39,15 @@ interface AttendeesTabProps {
   showAddTicketDropdown: boolean;
   setShowAddTicketDropdown: (value: boolean) => void;
   handleExportAttendees: (status: 'confirmed' | 'checked_in' | 'confirmed_pending' | 'all') => void;
-  setShowManualTicketModal: (value: boolean) => void;
-  setShowAddAtDoorModal: (value: boolean) => void;
-  setShowInviteGuestModal: (value: boolean) => void;
+  openAddTicket: (type: AddTicketType) => void;
   setMobileFilterOpen: (value: boolean) => void;
   setShowExportSheet: (value: boolean) => void;
   setShowAddTicketSheet: (value: boolean) => void;
   getPrimaryAction: (ticket: Ticket) => PrimaryAction | null;
   handleOpenNoteModal: (ticket: Ticket) => void;
   handleReactivate: (ticket: Ticket) => void;
+  handleMarkPaid: (ticketId: string) => void;
+  handleCheckin: (ticketId: string) => void;
 }
 
 export function AttendeesTab({
@@ -67,15 +69,15 @@ export function AttendeesTab({
   showAddTicketDropdown,
   setShowAddTicketDropdown,
   handleExportAttendees,
-  setShowManualTicketModal,
-  setShowAddAtDoorModal,
-  setShowInviteGuestModal,
+  openAddTicket,
   setMobileFilterOpen,
   setShowExportSheet,
   setShowAddTicketSheet,
   getPrimaryAction,
   handleOpenNoteModal,
   handleReactivate,
+  handleMarkPaid,
+  handleCheckin,
 }: AttendeesTabProps) {
   return (
     <div className="space-y-3">
@@ -143,13 +145,13 @@ export function AttendeesTab({
               </Button>
             }
           >
-            <DropdownItem onClick={() => { setShowManualTicketModal(true); setShowAddTicketDropdown(false); }}>
-              <EnvelopeIcon className="w-4 h-4 mr-2" /> Manual Ticket
+            <DropdownItem onClick={() => { openAddTicket('paid'); setShowAddTicketDropdown(false); }}>
+              <EnvelopeIcon className="w-4 h-4 mr-2" /> Paid Ticket
             </DropdownItem>
-            <DropdownItem onClick={() => { setShowAddAtDoorModal(true); setShowAddTicketDropdown(false); }}>
-              <PlusIcon className="w-4 h-4 mr-2" /> Add at Door
+            <DropdownItem onClick={() => { openAddTicket('unpaid'); setShowAddTicketDropdown(false); }}>
+              <BanknotesIcon className="w-4 h-4 mr-2" /> Unpaid Ticket
             </DropdownItem>
-            <DropdownItem onClick={() => { setShowInviteGuestModal(true); setShowAddTicketDropdown(false); }}>
+            <DropdownItem onClick={() => { openAddTicket('guest'); setShowAddTicketDropdown(false); }}>
               <StarIcon className="w-4 h-4 mr-2" /> Invite Guest
             </DropdownItem>
           </Dropdown>
@@ -252,9 +254,7 @@ export function AttendeesTab({
                       <td className="px-4 py-2.5">
                         <div className="flex items-center gap-1 flex-wrap">
                           <StatusBadge status={ticket.status} compact />
-                          {!!ticket.isGuest && (
-                            <span className="px-1.5 py-0.5 text-[10px] rounded-full bg-amber-100 text-amber-700 font-medium">Guest</span>
-                          )}
+                          <PaymentBadge paymentStatus={ticket.paymentStatus} compact />
                         </div>
                         {ticket.checkinAt && (
                           <p className="text-[10px] text-gray-400 mt-0.5">
@@ -279,6 +279,16 @@ export function AttendeesTab({
                                 <ArrowPathIcon className="w-4 h-4 mr-2" /> Reactivate
                               </DropdownItem>
                             )}
+                            {ticket.paymentStatus === 'unpaid' && ticket.status === 'checked_in' && (
+                              <DropdownItem onClick={() => handleMarkPaid(ticket.id)}>
+                                <BanknotesIcon className="w-4 h-4 mr-2" /> Mark as Paid
+                              </DropdownItem>
+                            )}
+                            {ticket.paymentStatus === 'unpaid' && ticket.status === 'confirmed' && (
+                              <DropdownItem onClick={() => handleCheckin(ticket.id)}>
+                                <CheckCircleIcon className="w-4 h-4 mr-2" /> Check In (unpaid)
+                              </DropdownItem>
+                            )}
                             <DropdownItem onClick={() => handleOpenNoteModal(ticket)}>
                               <ChatBubbleLeftIcon className="w-4 h-4 mr-2" />
                               {ticket.adminNote ? 'Edit Note' : 'Add Note'}
@@ -323,9 +333,7 @@ export function AttendeesTab({
                   </div>
                   <div className="flex items-center gap-1.5 flex-shrink-0 flex-wrap justify-end">
                     <StatusBadge status={ticket.status} compact />
-                    {!!ticket.isGuest && (
-                      <span className="px-1.5 py-0.5 text-[10px] rounded-full bg-amber-100 text-amber-700 font-medium">Guest</span>
-                    )}
+                    <PaymentBadge paymentStatus={ticket.paymentStatus} compact />
                   </div>
                 </div>
                 <div className="flex items-center justify-between mt-2 pt-2 border-t border-gray-100">
@@ -346,6 +354,16 @@ export function AttendeesTab({
                           <ArrowPathIcon className="w-4 h-4 mr-2" /> Reactivate
                         </DropdownItem>
                       )}
+                      {ticket.paymentStatus === 'unpaid' && ticket.status === 'checked_in' && (
+                        <DropdownItem onClick={() => handleMarkPaid(ticket.id)}>
+                          <BanknotesIcon className="w-4 h-4 mr-2" /> Mark as Paid
+                        </DropdownItem>
+                      )}
+                      {ticket.paymentStatus === 'unpaid' && ticket.status === 'confirmed' && (
+                        <DropdownItem onClick={() => handleCheckin(ticket.id)}>
+                          <CheckCircleIcon className="w-4 h-4 mr-2" /> Check In (unpaid)
+                        </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]/_tabs/OverviewTab.tsx

@@ -1,5 +1,6 @@
 import { Event } from '@/lib/api';
 import Card from '@/components/ui/Card';
+import SensitiveValue from '@/components/admin/SensitiveValue';
 import { CalendarIcon, MapPinIcon, CurrencyDollarIcon, UsersIcon } from '@heroicons/react/24/outline';
 
 interface OverviewTabProps {
@@ -48,8 +49,8 @@ export function OverviewTab({ event, formatDate, fmtTime, formatCurrency, confir
             <UsersIcon className="w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0" />
             <div>
               <p className="font-medium text-sm">Capacity</p>
-              <p className="text-sm text-gray-600">{confirmedCount + checkedInCount} / {event.capacity} spots filled</p>
-              <p className="text-xs text-gray-500">{Math.max(0, event.capacity - confirmedCount - checkedInCount)} spots remaining</p>
+              <p className="text-sm text-gray-600"><SensitiveValue>{confirmedCount + checkedInCount} / {event.capacity}</SensitiveValue> spots filled</p>
+              <p className="text-xs text-gray-500"><SensitiveValue>{Math.max(0, event.capacity - confirmedCount - checkedInCount)}</SensitiveValue> spots remaining</p>
             </div>
           </div>
         </div>

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

@@ -13,14 +13,18 @@ export interface PrimaryAction {
   icon?: ComponentType<{ className?: string }>;
 }
 
-export interface AttendeeFormState {
+// Ticket type in the unified Add Ticket modal:
+// paid = confirmation + QR emailed, counts toward revenue
+// unpaid = QR flagged unpaid, balance collected at door, pay link emailed if possible
+// guest = free comp ticket, auto-confirmed, no revenue
+export type AddTicketType = 'paid' | 'unpaid' | 'guest';
+
+export interface AddTicketFormState {
+  type: AddTicketType;
   firstName: string;
   lastName: string;
   email: string;
   phone: string;
   adminNote: string;
-}
-
-export interface AddAtDoorFormState extends AttendeeFormState {
-  autoCheckin: boolean;
+  checkinNow: boolean;
 }

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

@@ -21,7 +21,6 @@ import {
   EnvelopeIcon,
   PencilIcon,
   EyeIcon,
-  EyeSlashIcon,
   UserGroupIcon,
   CreditCardIcon,
   ChevronDownIcon,
@@ -30,14 +29,14 @@ import {
 } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
 import clsx from 'clsx';
-import { useStatsPrivacy } from '@/hooks/useStatsPrivacy';
+import { usePrivacy } from '@/context/PrivacyContext';
 import type {
   TabType,
   AttendeeStatusFilter,
   TicketStatusFilter,
   RecipientFilter,
-  AttendeeFormState,
-  AddAtDoorFormState,
+  AddTicketType,
+  AddTicketFormState,
   PrimaryAction,
 } from './_types';
 import { formatCurrency, downloadBlob } from './_utils/format';
@@ -49,8 +48,19 @@ import { TicketsTab } from './_tabs/TicketsTab';
 import { EmailTab } from './_tabs/EmailTab';
 import { PaymentsTab } from './_tabs/PaymentsTab';
 import { EventModals } from './_modals/EventModals';
+import { AddTicketModal } from './_modals/AddTicketModal';
 import EventFormModal from '../_components/EventFormModal';
 
+const EMPTY_ADD_TICKET_FORM: AddTicketFormState = {
+  type: 'paid',
+  firstName: '',
+  lastName: '',
+  email: '',
+  phone: '',
+  adminNote: '',
+  checkinNow: false,
+};
+
 export default function AdminEventDetailPage() {
   const params = useParams();
   const eventId = params.id as string;
@@ -69,37 +79,21 @@ export default function AdminEventDetailPage() {
   // Attendees tab state
   const [searchQuery, setSearchQuery] = useState('');
   const [statusFilter, setStatusFilter] = useState<AttendeeStatusFilter>('all');
-  const [showAddAtDoorModal, setShowAddAtDoorModal] = useState(false);
-  const [showManualTicketModal, setShowManualTicketModal] = useState(false);
-  const [showStats, , toggleStats] = useStatsPrivacy();
+  const { privacyMode } = usePrivacy();
+  const showStats = !privacyMode;
   const [showNoteModal, setShowNoteModal] = useState(false);
   const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null);
   const [noteText, setNoteText] = useState('');
-  const [addAtDoorForm, setAddAtDoorForm] = useState<AddAtDoorFormState>({
-    firstName: '',
-    lastName: '',
-    email: '',
-    phone: '',
-    autoCheckin: true,
-    adminNote: '',
-  });
-  const [manualTicketForm, setManualTicketForm] = useState<AttendeeFormState>({
-    firstName: '',
-    lastName: '',
-    email: '',
-    phone: '',
-    adminNote: '',
-  });
-  const [showInviteGuestModal, setShowInviteGuestModal] = useState(false);
-  const [inviteGuestForm, setInviteGuestForm] = useState<AttendeeFormState>({
-    firstName: '',
-    lastName: '',
-    email: '',
-    phone: '',
-    adminNote: '',
-  });
+  // Unified Add Ticket modal (paid / unpaid / guest via segmented control)
+  const [showAddTicketModal, setShowAddTicketModal] = useState(false);
+  const [addTicketForm, setAddTicketForm] = useState<AddTicketFormState>(EMPTY_ADD_TICKET_FORM);
   const [submitting, setSubmitting] = useState(false);
 
+  const openAddTicket = (type: AddTicketType) => {
+    setAddTicketForm({ ...EMPTY_ADD_TICKET_FORM, type });
+    setShowAddTicketModal(true);
+  };
+
   // Export state — separate desktop (Dropdown portal) vs mobile (BottomSheet)
   const [showExportDropdown, setShowExportDropdown] = useState(false);        // desktop dropdown
   const [showExportSheet, setShowExportSheet] = useState(false);              // mobile bottom sheet
@@ -220,74 +214,27 @@ export default function AdminEventDetailPage() {
     }
   };
 
-  const handleAddAtDoor = async (e: React.FormEvent) => {
+  const handleAddTicket = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!event) return;
     setSubmitting(true);
     try {
-      await ticketsApi.adminCreate({
+      const res = await ticketsApi.adminAdd({
         eventId: event.id,
-        firstName: addAtDoorForm.firstName,
-        lastName: addAtDoorForm.lastName || undefined,
-        email: addAtDoorForm.email,
-        phone: addAtDoorForm.phone,
-        autoCheckin: addAtDoorForm.autoCheckin,
-        adminNote: addAtDoorForm.adminNote || undefined,
+        type: addTicketForm.type,
+        firstName: addTicketForm.firstName,
+        lastName: addTicketForm.lastName || undefined,
+        email: addTicketForm.email || undefined,
+        phone: addTicketForm.phone || undefined,
+        checkinNow: addTicketForm.checkinNow,
+        adminNote: addTicketForm.adminNote || undefined,
       });
-      toast.success(addAtDoorForm.autoCheckin ? 'Attendee added and checked in' : 'Attendee added');
-      setShowAddAtDoorModal(false);
-      setAddAtDoorForm({ firstName: '', lastName: '', email: '', phone: '', autoCheckin: true, adminNote: '' });
+      toast.success(res.message || 'Ticket created');
+      setShowAddTicketModal(false);
+      setAddTicketForm(EMPTY_ADD_TICKET_FORM);
       loadEventData();
     } catch (error: any) {
-      toast.error(error.message || 'Failed to add attendee');
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleManualTicket = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!event) return;
-    setSubmitting(true);
-    try {
-      await ticketsApi.manualCreate({
-        eventId: event.id,
-        firstName: manualTicketForm.firstName,
-        lastName: manualTicketForm.lastName || undefined,
-        email: manualTicketForm.email,
-        phone: manualTicketForm.phone || undefined,
-        adminNote: manualTicketForm.adminNote || undefined,
-      });
-      toast.success('Manual ticket created — confirmation email sent');
-      setShowManualTicketModal(false);
-      setManualTicketForm({ firstName: '', lastName: '', email: '', phone: '', adminNote: '' });
-      loadEventData();
-    } catch (error: any) {
-      toast.error(error.message || 'Failed to create manual ticket');
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleInviteGuest = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!event) return;
-    setSubmitting(true);
-    try {
-      await ticketsApi.guestCreate({
-        eventId: event.id,
-        firstName: inviteGuestForm.firstName,
-        lastName: inviteGuestForm.lastName || undefined,
-        email: inviteGuestForm.email || undefined,
-        phone: inviteGuestForm.phone || undefined,
-        adminNote: inviteGuestForm.adminNote || undefined,
-      });
-      toast.success('Guest invited successfully');
-      setShowInviteGuestModal(false);
-      setInviteGuestForm({ firstName: '', lastName: '', email: '', phone: '', adminNote: '' });
-      loadEventData();
-    } catch (error: any) {
-      toast.error(error.message || 'Failed to invite guest');
+      toast.error(error.message || 'Failed to add ticket');
     } finally {
       setSubmitting(false);
     }
@@ -449,8 +396,11 @@ export default function AdminEventDetailPage() {
   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;
+  // Revenue counts only settled tickets: unpaid (balance due) and comp (guest)
+  // tickets are excluded; legacy rows without paymentStatus fall back to !isGuest
+  const isRevenueTicket = (t: Ticket) => (t.paymentStatus ? t.paymentStatus === 'paid' : !t.isGuest);
+  const paidConfirmedCount = getTicketsByStatus('confirmed').filter(isRevenueTicket).length;
+  const paidCheckedInCount = getTicketsByStatus('checked_in').filter(isRevenueTicket).length;
   const revenue = (paidConfirmedCount + paidCheckedInCount) * event.price;
 
   const tabs: { key: TabType; label: string; icon: typeof CalendarIcon; count?: number }[] = [
@@ -467,6 +417,10 @@ export default function AdminEventDetailPage() {
       return { label: 'Mark Paid', onClick: () => handleMarkPaid(ticket.id), variant: 'outline' };
     }
     if (ticket.status === 'confirmed') {
+      // Unpaid tickets resolve their balance first; check-in stays available via scanner
+      if (ticket.paymentStatus === 'unpaid') {
+        return { label: 'Mark Paid', onClick: () => handleMarkPaid(ticket.id), variant: 'outline' };
+      }
       return { label: 'Check In', onClick: () => handleCheckin(ticket.id), variant: 'primary' };
     }
     if (ticket.status === 'checked_in') {
@@ -490,10 +444,6 @@ export default function AdminEventDetailPage() {
         </div>
         {/* Desktop header actions */}
         <div className="hidden md:flex items-center gap-2 flex-shrink-0">
-          <Button variant="outline" size="sm" onClick={toggleStats} title={showStats ? 'Hide stats' : 'Show stats'}>
-            {showStats ? <EyeSlashIcon className="w-4 h-4 mr-1.5" /> : <EyeIcon className="w-4 h-4 mr-1.5" />}
-            {showStats ? 'Hide Stats' : 'Show Stats'}
-          </Button>
           <Link href={`/events/${event.slug}`} target="_blank">
             <Button variant="outline" size="sm">
               <EyeIcon className="w-4 h-4 mr-1.5" />
@@ -522,10 +472,6 @@ export default function AdminEventDetailPage() {
             <DropdownItem onClick={() => { setShowEditForm(true); setMobileHeaderMenuOpen(false); }}>
               <PencilIcon className="w-4 h-4 mr-2" /> Edit Event
             </DropdownItem>
-            <DropdownItem onClick={() => { toggleStats(); setMobileHeaderMenuOpen(false); }}>
-              {showStats ? <EyeSlashIcon className="w-4 h-4 mr-2" /> : <EyeIcon className="w-4 h-4 mr-2" />}
-              {showStats ? 'Hide Stats' : 'Show Stats'}
-            </DropdownItem>
           </Dropdown>
         </div>
       </div>
@@ -704,15 +650,15 @@ export default function AdminEventDetailPage() {
             showAddTicketDropdown={showAddTicketDropdown}
             setShowAddTicketDropdown={setShowAddTicketDropdown}
             handleExportAttendees={handleExportAttendees}
-            setShowManualTicketModal={setShowManualTicketModal}
-            setShowAddAtDoorModal={setShowAddAtDoorModal}
-            setShowInviteGuestModal={setShowInviteGuestModal}
+            openAddTicket={openAddTicket}
             setMobileFilterOpen={setMobileFilterOpen}
             setShowExportSheet={setShowExportSheet}
             setShowAddTicketSheet={setShowAddTicketSheet}
             getPrimaryAction={getPrimaryAction}
             handleOpenNoteModal={handleOpenNoteModal}
             handleReactivate={handleReactivate}
+            handleMarkPaid={handleMarkPaid}
+            handleCheckin={handleCheckin}
           />
         )}
 
@@ -777,27 +723,13 @@ export default function AdminEventDetailPage() {
         setMobileFilterOpen={setMobileFilterOpen}
         showAddTicketSheet={showAddTicketSheet}
         setShowAddTicketSheet={setShowAddTicketSheet}
+        openAddTicket={openAddTicket}
         showExportSheet={showExportSheet}
         setShowExportSheet={setShowExportSheet}
         handleExportAttendees={handleExportAttendees}
         showTicketExportSheet={showTicketExportSheet}
         setShowTicketExportSheet={setShowTicketExportSheet}
         handleExportTickets={handleExportTickets}
-        showAddAtDoorModal={showAddAtDoorModal}
-        setShowAddAtDoorModal={setShowAddAtDoorModal}
-        addAtDoorForm={addAtDoorForm}
-        setAddAtDoorForm={setAddAtDoorForm}
-        handleAddAtDoor={handleAddAtDoor}
-        showManualTicketModal={showManualTicketModal}
-        setShowManualTicketModal={setShowManualTicketModal}
-        manualTicketForm={manualTicketForm}
-        setManualTicketForm={setManualTicketForm}
-        handleManualTicket={handleManualTicket}
-        showInviteGuestModal={showInviteGuestModal}
-        setShowInviteGuestModal={setShowInviteGuestModal}
-        inviteGuestForm={inviteGuestForm}
-        setInviteGuestForm={setInviteGuestForm}
-        handleInviteGuest={handleInviteGuest}
         submitting={submitting}
         showNoteModal={showNoteModal}
         setShowNoteModal={setShowNoteModal}
@@ -810,6 +742,16 @@ export default function AdminEventDetailPage() {
         setPreviewHtml={setPreviewHtml}
       />
 
+      <AddTicketModal
+        open={showAddTicketModal}
+        onClose={() => setShowAddTicketModal(false)}
+        form={addTicketForm}
+        setForm={setAddTicketForm}
+        onSubmit={handleAddTicket}
+        submitting={submitting}
+        eventPriceLabel={event.price === 0 ? 'Free' : formatCurrency(event.price, event.currency)}
+      />
+
       <EventFormModal
         open={showEditForm}
         event={event}

frontend/src/app/admin/layout.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useLanguage } from '@/context/LanguageContext';
 import { useAuth } from '@/context/AuthContext';
+import { PrivacyProvider, usePrivacy } from '@/context/PrivacyContext';
 import LanguageToggle from '@/components/LanguageToggle';
 import Button from '@/components/ui/Button';
 import {
@@ -26,6 +27,8 @@ import {
   QrCodeIcon,
   DocumentTextIcon,
   QuestionMarkCircleIcon,
+  EyeIcon,
+  EyeSlashIcon,
 } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { useState } from 'react';
@@ -34,11 +37,24 @@ export default function AdminLayout({
   children,
 }: {
   children: React.ReactNode;
+}) {
+  return (
+    <PrivacyProvider>
+      <AdminLayoutInner>{children}</AdminLayoutInner>
+    </PrivacyProvider>
+  );
+}
+
+function AdminLayoutInner({
+  children,
+}: {
+  children: React.ReactNode;
 }) {
   const router = useRouter();
   const pathname = usePathname();
   const { t, locale } = useLanguage();
   const { user, hasAdminAccess, isLoading, logout } = useAuth();
+  const { privacyMode, togglePrivacyMode } = usePrivacy();
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   type Role = 'admin' | 'organizer' | 'staff' | 'marketing';
@@ -220,6 +236,21 @@ export default function AdminLayout({
             </button>
             
             <div className="flex items-center gap-4 ml-auto">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={togglePrivacyMode}
+                title={privacyMode ? t('admin.privacy.show') : t('admin.privacy.hide')}
+              >
+                {privacyMode ? (
+                  <EyeIcon className="w-4 h-4 sm:mr-1.5" />
+                ) : (
+                  <EyeSlashIcon className="w-4 h-4 sm:mr-1.5" />
+                )}
+                <span className="hidden sm:inline">
+                  {privacyMode ? t('admin.privacy.show') : t('admin.privacy.hide')}
+                </span>
+              </Button>
               <LanguageToggle />
               <Link href="/">
                 <Button variant="outline" size="sm">

frontend/src/app/admin/page.tsx

@@ -4,8 +4,10 @@ import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { useLanguage } from '@/context/LanguageContext';
 import { useAuth } from '@/context/AuthContext';
+import { usePrivacy } from '@/context/PrivacyContext';
 import { adminApi, DashboardData } from '@/lib/api';
 import Card from '@/components/ui/Card';
+import SensitiveValue from '@/components/admin/SensitiveValue';
 import {
   UsersIcon,
   CalendarIcon,
@@ -20,6 +22,7 @@ import { parseDate, eventSpotsLeft, isEventSoldOut } from '@/lib/utils';
 export default function AdminDashboardPage() {
   const { t, locale } = useLanguage();
   const { user } = useAuth();
+  const { privacyMode } = usePrivacy();
   const [data, setData] = useState<DashboardData | null>(null);
   const [loading, setLoading] = useState(true);
 
@@ -89,6 +92,7 @@ export default function AdminDashboardPage() {
       </div>
 
       {/* Stats Grid */}
+      {!privacyMode && (
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
         {statCards.map((stat) => (
           <Link key={stat.label} href={stat.href}>
@@ -106,6 +110,7 @@ export default function AdminDashboardPage() {
           </Link>
         ))}
       </div>
+      )}
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* Alerts */}
@@ -131,7 +136,7 @@ export default function AdminDashboardPage() {
                       <ExclamationTriangleIcon className="w-5 h-5 text-orange-600" />
                       <div>
                         <span className="text-sm font-medium">{event.title}</span>
-                        <p className="text-xs text-gray-500">Only {spotsLeft} spots left ({percentFull}% full)</p>
+                        <p className="text-xs text-gray-500"><SensitiveValue>Only {spotsLeft} spots left ({percentFull}% full)</SensitiveValue></p>
                       </div>
                     </div>
                     <span className="badge badge-warning">Low capacity</span>
@@ -169,7 +174,7 @@ export default function AdminDashboardPage() {
                   <CurrencyDollarIcon className="w-5 h-5 text-yellow-600" />
                   <span className="text-sm">Payments awaiting verification</span>
                 </div>
-                <span className="badge badge-warning">{data.stats.awaitingApprovalPayments}</span>
+                <span className="badge badge-warning"><SensitiveValue>{data.stats.awaitingApprovalPayments}</SensitiveValue></span>
               </Link>
             )}
             {/* Informational: opened checkouts that never paid — hold no seats */}
@@ -182,7 +187,7 @@ export default function AdminDashboardPage() {
                   <CurrencyDollarIcon className="w-5 h-5 text-gray-400" />
                   <span className="text-sm text-gray-500">Unpaid started bookings</span>
                 </div>
-                <span className="badge badge-info">{data.stats.pendingPayments}</span>
+                <span className="badge badge-info"><SensitiveValue>{data.stats.pendingPayments}</SensitiveValue></span>
               </Link>
             )}
             {data && data.stats.newContacts > 0 && (
@@ -231,14 +236,16 @@ export default function AdminDashboardPage() {
                     <p className="font-medium text-sm">{event.title}</p>
                     <p className="text-xs text-gray-500">{formatDate(event.startDatetime)}</p>
                   </div>
-                  <span className="text-sm text-gray-600">
-                    {(event.bookedCount || 0) + (event.claimedCount || 0)}/{event.capacity}
-                    {(event.claimedCount || 0) > 0 && (
-                      <span className="text-xs text-yellow-600 block text-right">
-                        {event.claimedCount} pending approval
-                      </span>
-                    )}
-                  </span>
+                  {!privacyMode && (
+                    <span className="text-sm text-gray-600">
+                      {(event.bookedCount || 0) + (event.claimedCount || 0)}/{event.capacity}
+                      {(event.claimedCount || 0) > 0 && (
+                        <span className="text-xs text-yellow-600 block text-right">
+                          {event.claimedCount} pending approval
+                        </span>
+                      )}
+                    </span>
+                  )}
                 </Link>
               ))}
             </div>
@@ -246,6 +253,7 @@ export default function AdminDashboardPage() {
         </Card>
 
         {/* Quick Stats */}
+        {!privacyMode && (
         <Card className="p-6">
           <h2 className="font-semibold text-lg mb-4">Quick Stats</h2>
           <div className="grid grid-cols-2 gap-4">
@@ -261,6 +269,7 @@ export default function AdminDashboardPage() {
             </div>
           </div>
         </Card>
+        )}
       </div>
     </div>
   );

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

@@ -18,7 +18,7 @@ import {
   VideoCameraIcon,
 } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
-import { parseDate, EVENT_TIMEZONE } from '@/lib/utils';
+import { parseDate, formatCurrency, EVENT_TIMEZONE } from '@/lib/utils';
 import clsx from 'clsx';
 
 // ─── Types ───────────────────────────────────────────────────
@@ -273,6 +273,17 @@ function ValidTicketScreen({
         {validation.ticket?.attendeeEmail && (
           <p className="text-emerald-100 text-lg mb-4">{validation.ticket.attendeeEmail}</p>
         )}
+        {/* Unpaid tickets are valid for entry but the balance is collected at the door */}
+        {validation.ticket?.paymentStatus === 'unpaid' && (
+          <div className="bg-orange-500 rounded-2xl px-6 py-3 w-full max-w-sm text-center mb-3">
+            <p className="font-bold text-lg">UNPAID — collect payment</p>
+            {!!validation.ticket.amountDue && (
+              <p className="text-orange-100 text-sm">
+                Balance due: {formatCurrency(validation.ticket.amountDue)}
+              </p>
+            )}
+          </div>
+        )}
         <div className="bg-white/15 rounded-2xl px-6 py-4 w-full max-w-sm space-y-2 text-center">
           {validation.event && (
             <p className="font-semibold text-lg">{validation.event.title}</p>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useLanguage } from '@/context/LanguageContext';
 import { usersApi, eventsApi, User, Event } from '@/lib/api';
 import { parseDate, formatRucDisplay } from '@/lib/utils';
@@ -9,12 +9,26 @@ 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, MagnifyingGlassIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
 import clsx from 'clsx';
 
 type RegisteredRange = '' | '7d' | '30d' | '90d';
 
+const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+
+function getPageNumbers(current: number, totalPages: number): (number | '...')[] {
+  if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
+  const pages: (number | '...')[] = [1];
+  const start = Math.max(2, current - 1);
+  const end = Math.min(totalPages - 1, current + 1);
+  if (start > 2) pages.push('...');
+  for (let i = start; i <= end; i++) pages.push(i);
+  if (end < totalPages - 1) pages.push('...');
+  pages.push(totalPages);
+  return pages;
+}
+
 function registeredAfterFromRange(range: RegisteredRange): string | undefined {
   if (!range) return undefined;
   const days = range === '7d' ? 7 : range === '30d' ? 30 : 90;
@@ -35,6 +49,8 @@ export default function AdminUsersPage() {
   const [eventFilter, setEventFilter] = useState<string>('');
   const [searchQuery, setSearchQuery] = useState('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
   const [editingUser, setEditingUser] = useState<User | null>(null);
   const [editForm, setEditForm] = useState({
     name: '',
@@ -57,9 +73,20 @@ export default function AdminUsersPage() {
     eventsApi.getAll().then((res) => setEvents(res.events)).catch(() => {});
   }, []);
 
+  // When a filter changes, jump back to page 1 before fetching (skipping the
+  // fetch for the stale page); otherwise fetch for the current page/pageSize.
+  const filterKey = JSON.stringify([roleFilter, statusFilter, hasBookingsFilter, registeredRange, eventFilter, debouncedSearch]);
+  const prevFilterKey = useRef(filterKey);
   useEffect(() => {
+    if (prevFilterKey.current !== filterKey) {
+      prevFilterKey.current = filterKey;
+      if (page !== 1) {
+        setPage(1);
+        return;
+      }
+    }
     loadUsers();
-  }, [roleFilter, statusFilter, hasBookingsFilter, registeredRange, eventFilter, debouncedSearch]);
+  }, [filterKey, page, pageSize]);
 
   const hasActiveFilters =
     roleFilter || statusFilter || hasBookingsFilter || registeredRange || eventFilter || searchQuery;
@@ -82,10 +109,16 @@ export default function AdminUsersPage() {
         registeredAfter: registeredAfterFromRange(registeredRange),
         eventId: eventFilter || undefined,
         search: debouncedSearch.trim() || undefined,
-        pageSize: 200,
+        page,
+        pageSize,
       });
       setUsers(users);
       setTotal(total);
+      // If the current page emptied out (e.g. after deleting the last user on
+      // it), fall back to the new last page.
+      if (users.length === 0 && total > 0 && page > 1) {
+        setPage(Math.max(1, Math.ceil(total / pageSize)));
+      }
     } catch (error) {
       toast.error('Failed to load users');
     } finally {
@@ -385,6 +418,65 @@ export default function AdminUsersPage() {
         )}
       </div>
 
+      {/* Pagination */}
+      {total > 0 && (
+        <div className="mt-4 flex flex-col sm:flex-row items-center justify-between gap-3">
+          <div className="flex items-center gap-2 text-sm text-gray-600">
+            <label htmlFor="users-page-size" className="whitespace-nowrap">Per page</label>
+            <select
+              id="users-page-size"
+              value={pageSize}
+              onChange={(e) => { setPageSize(Number(e.target.value)); setPage(1); }}
+              className="px-2 py-1.5 rounded-btn border border-secondary-light-gray text-sm"
+            >
+              {PAGE_SIZE_OPTIONS.map((size) => (
+                <option key={size} value={size}>{size}</option>
+              ))}
+            </select>
+            <span className="text-xs text-gray-500 whitespace-nowrap">
+              {(page - 1) * pageSize + 1}&ndash;{Math.min(page * pageSize, total)} of {total}
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            <button
+              onClick={() => setPage(page - 1)}
+              disabled={page <= 1}
+              className="p-2 rounded-btn border border-secondary-light-gray text-gray-600 hover:bg-gray-50 disabled:opacity-40 disabled:pointer-events-none min-h-[36px] min-w-[36px] flex items-center justify-center"
+              aria-label="Previous page"
+            >
+              <ChevronLeftIcon className="w-4 h-4" />
+            </button>
+            {getPageNumbers(page, Math.max(1, Math.ceil(total / pageSize))).map((p, i) =>
+              p === '...' ? (
+                <span key={`ellipsis-${i}`} className="px-1.5 text-sm text-gray-400">&hellip;</span>
+              ) : (
+                <button
+                  key={p}
+                  onClick={() => setPage(p)}
+                  className={clsx(
+                    'min-h-[36px] min-w-[36px] px-2 rounded-btn text-sm',
+                    p === page
+                      ? 'bg-primary-yellow text-primary-dark font-semibold'
+                      : 'border border-secondary-light-gray text-gray-600 hover:bg-gray-50'
+                  )}
+                  aria-current={p === page ? 'page' : undefined}
+                >
+                  {p}
+                </button>
+              )
+            )}
+            <button
+              onClick={() => setPage(page + 1)}
+              disabled={page >= Math.ceil(total / pageSize)}
+              className="p-2 rounded-btn border border-secondary-light-gray text-gray-600 hover:bg-gray-50 disabled:opacity-40 disabled:pointer-events-none min-h-[36px] min-w-[36px] flex items-center justify-center"
+              aria-label="Next page"
+            >
+              <ChevronRightIcon className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      )}
+
       {/* Mobile Filter BottomSheet */}
       <BottomSheet open={mobileFilterOpen} onClose={() => setMobileFilterOpen(false)} title="Filters">
         <div className="space-y-4">

frontend/src/components/admin/SensitiveValue.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { usePrivacy } from '@/context/PrivacyContext';
+
+export const PRIVACY_MASK = '••••';
+
+/**
+ * Renders its children normally, but shows a mask while privacy mode is on.
+ * Use for inline sensitive numbers that can't be hidden without breaking
+ * the surrounding row/badge.
+ */
+export default function SensitiveValue({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  const { privacyMode } = usePrivacy();
+  return <span className={className}>{privacyMode ? PRIVACY_MASK : children}</span>;
+}

frontend/src/context/PrivacyContext.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
+
+interface PrivacyContextType {
+  /** true = stats and sensitive data are hidden */
+  privacyMode: boolean;
+  setPrivacyMode: (value: boolean) => void;
+  togglePrivacyMode: () => void;
+}
+
+const PrivacyContext = createContext<PrivacyContextType | undefined>(undefined);
+
+// Same key the old per-page useStatsPrivacy hook used ('true' = hidden), so
+// existing operators keep their saved preference.
+const STORAGE_KEY = 'spanglish-admin-stats-hidden';
+
+export function PrivacyProvider({ children }: { children: ReactNode }) {
+  const [privacyMode, setPrivacyModeState] = useState(false);
+
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored !== null) {
+        setPrivacyModeState(stored === 'true');
+      }
+    } catch {
+      // localStorage unavailable (private mode etc.) - keep default
+    }
+  }, []);
+
+  const setPrivacyMode = useCallback((value: boolean) => {
+    setPrivacyModeState(value);
+    try {
+      localStorage.setItem(STORAGE_KEY, String(value));
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  const togglePrivacyMode = useCallback(() => {
+    setPrivacyModeState((prev) => {
+      const next = !prev;
+      try {
+        localStorage.setItem(STORAGE_KEY, String(next));
+      } catch {
+        // ignore
+      }
+      return next;
+    });
+  }, []);
+
+  return (
+    <PrivacyContext.Provider value={{ privacyMode, setPrivacyMode, togglePrivacyMode }}>
+      {children}
+    </PrivacyContext.Provider>
+  );
+}
+
+export function usePrivacy() {
+  const context = useContext(PrivacyContext);
+  if (context === undefined) {
+    throw new Error('usePrivacy must be used within a PrivacyProvider');
+  }
+  return context;
+}

frontend/src/hooks/useStatsPrivacy.ts

@@ -1,41 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-
-const STORAGE_KEY = 'spanglish-admin-stats-hidden';
-
-export function useStatsPrivacy() {
-  const [showStats, setShowStatsState] = useState(true);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    try {
-      const stored = localStorage.getItem(STORAGE_KEY);
-      if (stored !== null) {
-        setShowStatsState(stored !== 'true');
-      }
-    } catch {
-      // ignore
-    }
-  }, []);
-
-  const setShowStats = useCallback((value: boolean | ((prev: boolean) => boolean)) => {
-    setShowStatsState((prev) => {
-      const next = typeof value === 'function' ? value(prev) : value;
-      try {
-        if (typeof window !== 'undefined') {
-          localStorage.setItem(STORAGE_KEY, String(!next));
-        }
-      } catch {
-        // ignore
-      }
-      return next;
-    });
-  }, []);
-
-  const toggleStats = useCallback(() => {
-    setShowStats((prev) => !prev);
-  }, [setShowStats]);
-
-  return [showStats, setShowStats, toggleStats] as const;
-}

frontend/src/i18n/locales/en.json

@@ -255,6 +255,10 @@
     }
   },
   "admin": {
+    "privacy": {
+      "hide": "Hide Stats",
+      "show": "Show Stats"
+    },
     "dashboard": {
       "title": "Dashboard",
       "welcome": "Welcome back",

frontend/src/i18n/locales/es.json

@@ -255,6 +255,10 @@
     }
   },
   "admin": {
+    "privacy": {
+      "hide": "Ocultar Datos",
+      "show": "Mostrar Datos"
+    },
     "dashboard": {
       "title": "Panel de Control",
       "welcome": "Bienvenido de nuevo",

frontend/src/lib/api/tickets.ts

@@ -105,30 +105,20 @@ export const ticketsApi = {
       body: JSON.stringify(data),
     }),
 
-  manualCreate: (data: {
-    eventId: string;
-    firstName: string;
-    lastName?: string;
-    email: string;
-    phone?: string;
-    preferredLanguage?: 'en' | 'es';
-    adminNote?: string;
-  }) =>
-    fetchApi<{ ticket: Ticket; payment: Payment; message: string }>('/api/tickets/admin/manual', {
-      method: 'POST',
-      body: JSON.stringify(data),
-    }),
-
-  guestCreate: (data: {
+  // Unified add-attendee endpoint behind the single Add Ticket modal
+  // (paid = confirmation + QR, unpaid = pay link + door collection, guest = free comp)
+  adminAdd: (data: {
     eventId: string;
+    type: 'paid' | 'unpaid' | 'guest';
     firstName: string;
     lastName?: string;
     email?: string;
     phone?: string;
     preferredLanguage?: 'en' | 'es';
+    checkinNow?: boolean;
     adminNote?: string;
   }) =>
-    fetchApi<{ ticket: Ticket; payment: Payment; message: string }>('/api/tickets/admin/guest', {
+    fetchApi<{ ticket: Ticket; payment: Payment; message: string }>('/api/tickets/admin/add', {
       method: 'POST',
       body: JSON.stringify(data),
     }),

frontend/src/lib/api/types.ts

@@ -53,6 +53,7 @@ export interface Ticket {
   qrCode: string;
   adminNote?: string;
   isGuest?: boolean;
+  paymentStatus?: 'paid' | 'unpaid' | 'comp';
   createdAt: string;
   event?: Event;
   payment?: Payment;
@@ -70,6 +71,8 @@ export interface TicketValidationResult {
     attendeeEmail?: string;
     attendeePhone?: string;
     status: string;
+    paymentStatus?: 'paid' | 'unpaid' | 'comp';
+    amountDue?: number;
     checkinAt?: string;
     checkedInBy?: string;
   };