feat: Implement ticket grouping in MyTickets for improved organization

- Enhance useUserTickets composable to group tickets by event, providing counts for paid, pending, and registered tickets.
- Update MyTickets.vue to display tickets in organized groups, improving user experience with clear event headers and ticket summaries.
- Refactor ticket display logic to accommodate grouped ticket views, ensuring a cohesive layout across different ticket statuses.

src/composables/useUserTickets.ts

@@ -4,6 +4,14 @@ import type { Ticket } from '@/lib/types/event'
 import { fetchUserTickets } from '@/lib/api/events'
 import { useAuth } from './useAuth'
 
+interface GroupedTickets {
+  eventId: string
+  tickets: Ticket[]
+  paidCount: number
+  pendingCount: number
+  registeredCount: number
+}
+
 export function useUserTickets() {
   const { isAuthenticated, currentUser } = useAuth()
   
@@ -54,6 +62,43 @@ export function useUserTickets() {
     return sortedTickets.value.filter(ticket => ticket.paid && !ticket.registered)
   })
 
+  // Group tickets by event
+  const groupedTickets = computed(() => {
+    const groups = new Map<string, GroupedTickets>()
+    
+    sortedTickets.value.forEach(ticket => {
+      if (!groups.has(ticket.event)) {
+        groups.set(ticket.event, {
+          eventId: ticket.event,
+          tickets: [],
+          paidCount: 0,
+          pendingCount: 0,
+          registeredCount: 0
+        })
+      }
+      
+      const group = groups.get(ticket.event)!
+      group.tickets.push(ticket)
+      
+      if (ticket.paid) {
+        group.paidCount++
+      } else {
+        group.pendingCount++
+      }
+      
+      if (ticket.registered) {
+        group.registeredCount++
+      }
+    })
+    
+    // Convert to array and sort by most recent ticket in each group
+    return Array.from(groups.values()).sort((a, b) => {
+      const aLatest = Math.max(...a.tickets.map(t => new Date(t.time).getTime()))
+      const bLatest = Math.max(...b.tickets.map(t => new Date(t.time).getTime()))
+      return bLatest - aLatest
+    })
+  })
+
   // Load tickets when authenticated
   const loadTickets = async () => {
     if (isAuthenticated.value && currentUser.value) {
@@ -68,6 +113,7 @@ export function useUserTickets() {
     pendingTickets,
     registeredTickets,
     unregisteredTickets,
+    groupedTickets,
     isLoading,
     error,