diff --git a/frontend/src/app/dashboard/user/page.tsx b/frontend/src/app/dashboard/user/page.tsx
index a531647..2e4bd99 100644
--- a/frontend/src/app/dashboard/user/page.tsx
+++ b/frontend/src/app/dashboard/user/page.tsx
@@ -4,6 +4,7 @@ import { useAuth } from "@/hooks/useAuth";
import { apiFetch, createFullPaymentCheckout } from "@/lib/api";
import { useRouter } from "next/navigation";
import { formatDate } from "@/lib/date";
+import { printTicketCards } from "@/lib/ticketPrint";
import { formatPaymentMethod } from "@/lib/paymentMethod";
import { QrImage } from "@/components/shared/QrImage";
import { ApiImage } from "@/components/shared/ApiImage";
@@ -345,83 +346,7 @@ export default function UserDashboardPage() {
}
};
- // Print helpers
- const buildTicketHtmlCard = (t: TicketRecord, buyerName?: string) => {
- const eventTitle = t.event?.title || t.eventId || "Event";
- const eventDate = t.event?.startDate ? new Date(t.event.startDate) : null;
- const optionName = t.registrationOption?.eventOption?.name || "Ticket";
- const variantName = t.registrationOption?.variant?.name;
- const type = variantName ? `${optionName} — ${variantName}` : optionName;
- const qty = t.quantity || 1;
- const qrSrc = `https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=${encodeURIComponent(t.qrCode || t.id)}`;
- const dateStr = eventDate ? formatDate(eventDate) : '';
- return `
-
-
-
${eventTitle}
- ${dateStr ? `
${dateStr}
` : ''}
-
-
${type}
- ${t.attendee?.name ? `
Name: ${t.attendee.name}
` : `
Qty: ${qty}
`}
-
-
Ticket ID: ${t.id}
- ${buyerName ? `
Purchased by: ${buyerName}
` : ''}
-
- `;
- };
-
- const openPrintWindow = (title: string, cardsHtml: string) => {
- const w = window.open("", "_blank");
- if (!w) return;
- w.document.write(`
${title}
-
-
-
${title}
-
${cardsHtml}
-
- `);
- w.document.close();
- w.focus();
- };
-
- const printTickets = (ticketList: TicketRecord[]) => {
- if (!ticketList || ticketList.length === 0) return;
- const cards = ticketList.map(t => buildTicketHtmlCard(t, user?.name)).join("");
- openPrintWindow(`Tickets (${ticketList.length})`, cards);
- };
+ const printTickets = (ticketList: TicketRecord[]) => printTicketCards(ticketList, () => user?.name);
// Upcoming events derived from registrations
const upcomingEvents = useMemo(() => {
diff --git a/frontend/src/lib/ticketPrint.ts b/frontend/src/lib/ticketPrint.ts
new file mode 100644
index 0000000..a7f31f1
--- /dev/null
+++ b/frontend/src/lib/ticketPrint.ts
@@ -0,0 +1,90 @@
+import type { Ticket as TicketRecord } from "@/types";
+import { formatDate } from "@/lib/date";
+
+// One ticket design for every printed ticket (user dashboard, staff event tickets, at the
+// door). The emailed/WhatsApp PDF in backend/src/controllers/ticketController.js mirrors it.
+
+function esc(s: string): string {
+ return s.replace(/[&<>"']/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c]!));
+}
+
+export function ticketTypeLabel(t: TicketRecord): string {
+ const opt = t.registrationOption?.eventOption?.name || "Ticket";
+ const variant = t.registrationOption?.variant?.name;
+ return variant ? `${opt} — ${variant}` : opt;
+}
+
+/** A ticket card. `buyerName` adds a "Purchased by" line. */
+export function ticketCardHtml(t: TicketRecord, buyerName?: string | null): string {
+ const eventTitle = t.event?.title || t.eventId || "Event";
+ const dateStr = t.event?.startDate ? formatDate(t.event.startDate) : "";
+ const qrSrc = `https://api.qrserver.com/v1/create-qr-code/?size=320x320&data=${encodeURIComponent(t.qrCode || t.id)}`;
+ return `
+
+
+
${esc(eventTitle)}
+ ${dateStr ? `
${esc(dateStr)}
` : ""}
+
+
${esc(ticketTypeLabel(t))}
+ ${t.attendee?.name ? `
Name: ${esc(t.attendee.name)}
` : `
Qty: ${t.quantity || 1}
`}
+
+
Ticket ID: ${esc(t.id)}
+ ${buyerName ? `
Purchased by: ${esc(buyerName)}
` : ""}
+
+ `;
+}
+
+/** Opens a print window with the given cards and prints once the QR images have loaded. */
+export function openTicketPrintWindow(title: string, cardsHtml: string) {
+ const w = window.open("", "_blank");
+ if (!w) return;
+ w.document.write(`
${esc(title)}
+
+
+
${esc(title)}
+
${cardsHtml}
+
+ `);
+ w.document.close();
+ w.focus();
+}
+
+/** Prints tickets in the shared design. */
+export function printTicketCards(tickets: TicketRecord[], buyerName?: (t: TicketRecord) => string | null | undefined) {
+ if (!tickets || tickets.length === 0) return;
+ const cards = tickets.map((t) => ticketCardHtml(t, buyerName?.(t))).join("");
+ openTicketPrintWindow(tickets.length === 1 ? "Ticket" : `Tickets (${tickets.length})`, cards);
+}