📤 Prompt for Vercel Developer

Hello, I need help fixing a rendering issue in my Workstation Booking System (Next.js app hosted on Vercel).

✅ Problem Summary

The 5th and 4th floor seat maps are currently rendered using data fetched from MongoDB (/api/seats?floor=X). However, when the seats collection in MongoDB is empty, nothing renders — the seat map appears as a large black card with only the row numbers visible. This breaks the UI and user experience.

✅ My Original Intended Logic

• The layout/structure of the seat map (rows, seat positions, PC labels like PC2–PC37) should NOT rely on database contents.
• Only the booking and reservation status (e.g. booked, reserved, by whom, etc.) should be fetched from MongoDB.
• Seat map should render independently of whether MongoDB contains the seats.

✅ Required Fix

Please refactor the SeatMap component so that:

1. The seat layout is generated in the frontend using static logic based on floor:
   • 5th Floor: 6 rows × 6 seats (PC2 to PC37)
   • 4th Floor: 3 PCs (PC1, PC2, PC3)
   • Reserved seats:
     • 5th Floor, Row 6, Left 3 PCs → "Other Departments"
     • 5th Floor, Row 6, Right 3 PCs → "SCAAI"
2. MongoDB (via /api/bookings) should be queried separately to retrieve active bookings, and only this data should be merged with the static layout to mark seats as:
   • isBooked: true if matching booking exists
   • booking: { userName, phone, duration } as needed
3. Ensure all seat buttons render consistently regardless of booking DB content.

⚙️ Backend APIs (already built)

• GET /api/bookings – returns active bookings
• Seat ID used in bookings: seatId (e.g. "PC2", "PC3", etc.)

✅ What You Should Do

• Update the SeatMap component to use a generateStaticSeatLayout(floor) function to define the base layout.
• On component mount:
  • Generate the static layout
  • Fetch bookings from MongoDB
  • Merge bookings with static seat list
  • Set final seats to render
• Keep seat color and dialog logic the same
• Make sure 5th floor renders 6 rows and 36 buttons (PC2–PC37) always
• Fix the layout responsiveness (e.g., prevent text from overflowing the floor selector)

Let me know if you need the current SeatMap code or MongoDB schema structure. I can provide those too.

Thanks!

.

Absolutely. Here's a clear and complete prompt you can give to Vercel (or your teammate/developer) to handle the 404 error and implement the booking functionality properly:

---

📤 Vercel Task Prompt: Fix Missing /api/book Endpoint

Hi team,
I'm getting the following error when attempting to book a seat:

POST /api/book → 404 Not Found  

This confirms that the backend does not currently have a route to handle booking requests.

---

✅ Expected Behavior

When a user selects a seat and confirms booking, the app should send a POST request to:

/api/book  

The request body contains:

{  
  "seatId": "PC12",  
  "userId": "abc123",  
  "startTime": "2025-04-24T08:00:00.000Z",  
  "endTime": "2025-04-24T12:00:00.000Z"  
}  

The endpoint should store this booking in the MongoDB bookings collection with status "pending" by default.

---

🛠 Required Task for Vercel

Please create a new route at:

/app/api/book/route.ts  

with the following logic:

1. Accept a POST request
2. Parse the JSON body
3. Insert a new booking document into the MongoDB bookings collection
4. Fields: seatId, userId, startTime, endTime, status, createdAt
5. Return a JSON response with { success: true, id: insertedId }
6. If error, return { error: "Failed to book seat" } with status 500

Here’s a sample implementation to use:

import { NextResponse } from "next/server"  
import { getCollection } from "@/lib/db/mongodb"  
  
export async function POST(request: Request) {  
  try {  
    const body = await request.json()  
    const { seatId, userId, startTime, endTime } = body  
  
    if (!seatId || !userId || !startTime || !endTime) {  
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })  
    }  
  
    const bookings = await getCollection("bookings")  
  
    const result = await bookings.insertOne({  
      seatId,  
      userId,  
      startTime: new Date(startTime),  
      endTime: new Date(endTime),  
      status: "pending",  
      createdAt: new Date(),  
    })  
  
    return NextResponse.json({ success: true, id: result.insertedId })  
  } catch (error) {  
    console.error("Booking failed:", error)  
    return NextResponse.json({ error: "Failed to book seat" }, { status: 500 })  
  }  
}  

✅ Note:

• MongoDB is already connected using getCollection() utility
• The frontend will handle this route using fetch(/api/book, { method: "POST", ... })

---

Let me know once this is created — or if you need me to test with a payload. Thanks!

Here's a clear and actionable prompt you can give to Vercel (or your dev) to fix the cancellation error and ensure all booking-related functionality works smoothly:

---

📤 Vercel Task Prompt: Fix Booking Cancellation Error + Ensure All Booking Features Work

Hi team,

I'm facing a backend crash when trying to cancel a booking. Here's the error:

Error canceling booking: BSONError: input must be a 24 character hex string, 12 byte Uint8Array, or an integer  
Route: /api/bookings/cancel  
Status: 500  
Reason: bookingId is undefined or not a valid ObjectId  

---

🛠 What Needs to Be Fixed

1. In the cancellation route (/api/bookings/cancel), the backend tries to convert bookingId into an ObjectId:

new ObjectId(bookingId)  

But if bookingId is undefined (or invalid), MongoDB throws a BSONError.

---

✅ Fix Requirements

Please do the following in the cancellation route (likely /app/api/bookings/cancel/route.ts):

1. Properly extract the booking ID from the request:

const { searchParams } = new URL(request.url)  
const bookingId = searchParams.get("id")  
  
if (!bookingId) {  
  return NextResponse.json({ error: "Missing booking ID" }, { status: 400 })  
}  

2. Validate that it’s a valid ObjectId before trying to convert:

if (!ObjectId.isValid(bookingId)) {  
  return NextResponse.json({ error: "Invalid booking ID format" }, { status: 400 })  
}  

3. Then safely convert:

const booking = await bookingsCollection.findOne({ _id: new ObjectId(bookingId) })  

4. Continue with deletion or cancellation logic only if the booking exists.

---

📌 Additional Request

Please also confirm that all booking-related APIs are functioning:

• ✅ POST /api/book – should work with or without existing seats in DB
• ✅ GET /api/bookings – should list all active bookings (with filtering if needed)
• ✅ DELETE /api/bookings/cancel – should cancel or delete bookings safely
• ✅ SeatMap UI should update after canceling
• ✅ Email sending on booking confirmation works without crashing the server if it fails

Let me know if you need the full cancellation route code — I can provide a clean version. Thanks!