Refactor event fetching and display: Change event retrieval order to descending by date, enhance event data structure to include registration counts, and update UI components to reflect these changes for better user experience.

app/api/admin/events/route.ts

@@ -13,11 +13,39 @@ export async function GET() {
 
     const events = await prisma.event.findMany({
       orderBy: {
-        date: "asc",
+        date: "desc",
+      },
+      select: {
+        id: true,
+        date: true,
+        name: true,
+        description: true,
+        type: true,
+        status: true,
+        createdAt: true,
+        updatedAt: true,
+        _count: {
+          select: {
+            registrations: true,
+          },
+        },
       },
     });
 
-    return NextResponse.json(events);
+    // Transformer les données pour inclure le nombre d'inscriptions
+    const eventsWithCount = events.map((event) => ({
+      id: event.id,
+      date: event.date,
+      name: event.name,
+      description: event.description,
+      type: event.type,
+      status: event.status,
+      createdAt: event.createdAt.toISOString(),
+      updatedAt: event.updatedAt.toISOString(),
+      registrationsCount: event._count.registrations,
+    }));
+
+    return NextResponse.json(eventsWithCount);
   } catch (error) {
     console.error("Error fetching events:", error);
     return NextResponse.json(

app/events/page.tsx

@@ -6,7 +6,7 @@ import { getBackgroundImage } from "@/lib/preferences";
 export default async function EventsPage() {
   const events = await prisma.event.findMany({
     orderBy: {
-      date: "asc",
+      date: "desc",
     },
   });
 

components/EventManagement.tsx

@@ -11,6 +11,7 @@ interface Event {
   status: "UPCOMING" | "LIVE" | "PAST";
   createdAt: string;
   updatedAt: string;
+  registrationsCount?: number;
 }
 
 interface EventFormData {
@@ -351,9 +352,15 @@ export default function EventManagement() {
                   <p className="text-gray-400 text-sm mb-2">
                     {event.description}
                   </p>
+                  <div className="flex items-center gap-4 mt-2">
                     <p className="text-gray-500 text-xs">
                       Date: {new Date(event.date).toLocaleDateString("fr-FR")}
                     </p>
+                    <span className="px-2 py-1 bg-blue-900/30 border border-blue-500/50 text-blue-400 text-xs rounded">
+                      {event.registrationsCount || 0} inscrit
+                      {event.registrationsCount !== 1 ? "s" : ""}
+                    </span>
+                  </div>
                 </div>
                 {!isCreating && !editingEvent && (
                   <div className="flex gap-2 ml-4">

components/EventsPageSection.tsx

@@ -84,11 +84,19 @@ export default function EventsPageSection({
   const [error, setError] = useState<string>("");
   const [currentMonth, setCurrentMonth] = useState(new Date());
 
-  // Séparer les événements
-  const upcomingEvents = events.filter(
-    (e) => e.status === "UPCOMING" || e.status === "LIVE"
-  );
-  const pastEvents = events.filter((e) => e.status === "PAST");
+  // Séparer et trier les événements (du plus récent au plus ancien)
+  const upcomingEvents = events
+    .filter((e) => e.status === "UPCOMING" || e.status === "LIVE")
+    .sort((a, b) => {
+      // Trier par date décroissante (du plus récent au plus ancien)
+      return b.date.localeCompare(a.date);
+    });
+  const pastEvents = events
+    .filter((e) => e.status === "PAST")
+    .sort((a, b) => {
+      // Trier par date décroissante (du plus récent au plus ancien)
+      return b.date.localeCompare(a.date);
+    });
 
   // Créer un map des événements par date pour le calendrier
   const eventsByDate: Record<string, Event[]> = {};