feat: add payment management improvements and reminder emails

- Add option to approve/reject payments without sending notification emails
  (checkbox in review popup, default enabled)
- Add payment reminder email template and send functionality
- Track when reminder emails are sent (reminderSentAt field)
- Display reminder sent timestamp in payment review popup
- Make payment review popup scrollable for better UX
- Add payment-reminder template to email system (available in admin emails)

backend/src/lib/email.ts

@@ -980,6 +980,106 @@ export const emailService = {
     });
   },
 
+  /**
+   * Send payment reminder email
+   * This email is sent when admin wants to remind attendee about pending payment
+   */
+  async sendPaymentReminder(paymentId: string): Promise<{ success: boolean; error?: string }> {
+    // Get payment
+    const payment = await dbGet<any>(
+      (db as any)
+        .select()
+        .from(payments)
+        .where(eq((payments as any).id, paymentId))
+    );
+
+    if (!payment) {
+      return { success: false, error: 'Payment not found' };
+    }
+
+    // Only send for pending/pending_approval payments
+    if (!['pending', 'pending_approval'].includes(payment.status)) {
+      return { success: false, error: 'Payment reminder can only be sent for pending payments' };
+    }
+
+    // Get ticket
+    const ticket = await dbGet<any>(
+      (db as any)
+        .select()
+        .from(tickets)
+        .where(eq((tickets as any).id, payment.ticketId))
+    );
+
+    if (!ticket) {
+      return { success: false, error: 'Ticket not found' };
+    }
+
+    // Get event
+    const event = await dbGet<any>(
+      (db as any)
+        .select()
+        .from(events)
+        .where(eq((events as any).id, ticket.eventId))
+    );
+
+    if (!event) {
+      return { success: false, error: 'Event not found' };
+    }
+
+    const locale = ticket.preferredLanguage || 'en';
+    const eventTitle = locale === 'es' && event.titleEs ? event.titleEs : event.title;
+    const attendeeFullName = `${ticket.attendeeFirstName} ${ticket.attendeeLastName || ''}`.trim();
+
+    // Calculate total price for multi-ticket bookings
+    let totalPrice = event.price;
+    let ticketCount = 1;
+    
+    if (ticket.bookingId) {
+      const bookingTickets = await dbAll<any>(
+        (db as any)
+          .select()
+          .from(tickets)
+          .where(eq((tickets as any).bookingId, ticket.bookingId))
+      );
+      ticketCount = bookingTickets.length;
+      totalPrice = event.price * ticketCount;
+    }
+
+    // Generate the booking URL for returning to payment page
+    const frontendUrl = process.env.FRONTEND_URL || 'https://spanglish.com';
+    const bookingUrl = `${frontendUrl}/booking/${ticket.id}?step=payment`;
+
+    // Format amount with ticket count info for multi-ticket bookings
+    const amountDisplay = ticketCount > 1 
+      ? `${this.formatCurrency(totalPrice, event.currency)} (${ticketCount} tickets)`
+      : this.formatCurrency(totalPrice, event.currency);
+
+    // Get site timezone for proper date/time formatting
+    const timezone = await this.getSiteTimezone();
+
+    console.log(`[Email] Sending payment reminder email to ${ticket.attendeeEmail}`);
+
+    return this.sendTemplateEmail({
+      templateSlug: 'payment-reminder',
+      to: ticket.attendeeEmail,
+      toName: attendeeFullName,
+      locale,
+      eventId: event.id,
+      variables: {
+        attendeeName: attendeeFullName,
+        attendeeEmail: ticket.attendeeEmail,
+        ticketId: ticket.bookingId || ticket.id,
+        eventTitle,
+        eventDate: this.formatDate(event.startDatetime, locale, timezone),
+        eventTime: this.formatTime(event.startDatetime, locale, timezone),
+        eventLocation: event.location,
+        eventLocationUrl: event.locationUrl || '',
+        paymentAmount: amountDisplay,
+        bookingUrl,
+      },
+    });
+  },
+
   /**
    * Send custom email to event attendees
    */