Backend and frontend updates: auth, email, payments, events, tickets; carrousel images; mobile event detail layout; i18n

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

@@ -18,6 +18,7 @@ import {
 import toast from 'react-hot-toast';
 
 interface TicketWithDetails extends Omit<Ticket, 'payment'> {
+  bookingId?: string;
   event?: Event;
   payment?: {
     id: string;
@@ -194,6 +195,23 @@ export default function AdminBookingsPage() {
     pendingPayment: tickets.filter(t => t.payment?.status === 'pending').length,
   };
 
+  // Helper to get booking info for a ticket (ticket count and total)
+  const getBookingInfo = (ticket: TicketWithDetails) => {
+    if (!ticket.bookingId) {
+      return { ticketCount: 1, bookingTotal: Number(ticket.payment?.amount || 0) };
+    }
+    
+    // Count all tickets with the same bookingId
+    const bookingTickets = tickets.filter(
+      t => t.bookingId === ticket.bookingId
+    );
+    
+    return {
+      ticketCount: bookingTickets.length,
+      bookingTotal: bookingTickets.reduce((sum, t) => sum + Number(t.payment?.amount || 0), 0),
+    };
+  };
+
   if (loading) {
     return (
       <div className="flex items-center justify-center py-12">
@@ -309,7 +327,9 @@ export default function AdminBookingsPage() {
                   </td>
                 </tr>
               ) : (
-                sortedTickets.map((ticket) => (
+                sortedTickets.map((ticket) => {
+                  const bookingInfo = getBookingInfo(ticket);
+                  return (
                   <tr key={ticket.id} className="hover:bg-gray-50">
                     <td className="px-6 py-4">
                       <div className="space-y-1">
@@ -341,9 +361,16 @@ export default function AdminBookingsPage() {
                           {getPaymentMethodLabel(ticket.payment?.provider || 'cash')}
                         </p>
                         {ticket.payment && (
-                          <p className="text-sm font-medium">
-                            {ticket.payment.amount?.toLocaleString()} {ticket.payment.currency}
-                          </p>
+                          <div>
+                            <p className="text-sm font-medium">
+                              {bookingInfo.bookingTotal.toLocaleString()} {ticket.payment.currency}
+                            </p>
+                            {bookingInfo.ticketCount > 1 && (
+                              <p className="text-xs text-purple-600 mt-1">
+                                📦 {bookingInfo.ticketCount} × {Number(ticket.payment.amount).toLocaleString()} {ticket.payment.currency}
+                              </p>
+                            )}
+                          </div>
                         )}
                       </div>
                     </td>
@@ -354,6 +381,11 @@ export default function AdminBookingsPage() {
                       {ticket.qrCode && (
                         <p className="text-xs text-gray-400 mt-1 font-mono">{ticket.qrCode}</p>
                       )}
+                      {ticket.bookingId && (
+                        <p className="text-xs text-purple-600 mt-1" title="Part of multi-ticket booking">
+                          📦 Group Booking
+                        </p>
+                      )}
                     </td>
                     <td className="px-6 py-4 text-sm text-gray-600">
                       {formatDate(ticket.createdAt)}
@@ -415,7 +447,8 @@ export default function AdminBookingsPage() {
                       </div>
                     </td>
                   </tr>
-                ))
+                  );
+                })
               )}
             </tbody>
           </table>