Sort completed/cancelled events by most recent first

- Upcoming events: ascending order (next event first)
- Completed/Cancelled events: descending order (most recent first)

src/pages/EventsPage.tsx

@@ -75,7 +75,7 @@ export function EventsPage() {
       filtered = filtered.filter(event => new Date(event.scheduledDate) <= endDate);
     }
 
-    // Sort: upcoming events first (by date), then completed/cancelled at bottom (by date)
+    // Sort: upcoming events first (ascending), then completed/cancelled (descending - most recent first)
     filtered.sort((a, b) => {
       // Priority order: upcoming > completed > cancelled
       const statusPriority = { upcoming: 0, completed: 1, cancelled: 2 };
@@ -89,7 +89,10 @@ export function EventsPage() {
       // Within same status, sort by date
       const dateA = new Date(a.scheduledDate).getTime();
       const dateB = new Date(b.scheduledDate).getTime();
-      return dateA - dateB;
+      
+      // Upcoming: ascending (next event first)
+      // Completed/Cancelled: descending (most recent first)
+      return a.status === 'upcoming' ? dateA - dateB : dateB - dateA;
     });
 
     setFilteredEvents(filtered);