[BUG] Fetch Dynamic Booking Count in Event Detail

[Aayuiiitmg]

🔴 Problem
On the dynamic event details page (/events/[slug]), the component displays the number of attendees who have registered for the event. However, this count is currently hardcoded to 10. It should instead display the real-time registration count queried from the MongoDB database.

NOTE

The database backend and a helper server action already exist for fetching this! The contributor just needs to connect them together.

🔍 Technical Context
In
EventDetails.tsx:L71
, you will find:

typescript

const bookings = 10;
✅ Requirements & Expected Behavior
Open
EventDetails.tsx
.
Import getBookingsCountByEventId from
booking.actions.ts
.
Call getBookingsCountByEventId(event._id) asynchronously inside the EventDetails server component.
Replace const bookings = 10; with the fetched count (fall back to 0 if undefined or if the call fails).
Ensure the text renders correctly:
"Join X people who have already booked their spot!" (if count > 0)
"Be the first to book your spot!" (if count is 0)
🛠️ Suggested Steps for Contributors
Inside
EventDetails.tsx
, import getBookingsCountByEventId:
typescript

import { getBookingsCountByEventId } from "@/lib/actions/booking.actions";
Await the response in the component body:
typescript

const { count: bookingsCount } = await getBookingsCountByEventId(event._id);
const bookings = bookingsCount || 0;
Test locally by booking an event and verifying the count increments dynamically.

[imadajerry]

Hello, I would love to work on this issue. Please assign it to me for SSoC'26.