How to Build Online test booking with V0

1// Paste this prompt into V0's AI chat:
2// Build an online test booking system. Create a Supabase schema:
3// 1. test_types: id (uuid PK), name (text), description (text), duration_minutes (int), price_cents (int), stripe_price_id (text)
4// 2. locations: id (uuid PK), name (text), address (text), capacity (int)
5// 3. test_slots: id (uuid PK), test_type_id (uuid FK to test_types), location_id (uuid FK to locations), start_time (timestamptz), end_time (timestamptz), capacity (int), booked_count (int DEFAULT 0)
6// 4. bookings: id (uuid PK), user_id (uuid FK to auth.users), slot_id (uuid FK to test_slots), status (text DEFAULT 'pending' CHECK IN 'pending','confirmed','cancelled','completed'), stripe_payment_id (text), confirmation_code (text UNIQUE), booked_at (timestamptz)
7// 5. candidates: user_id (uuid PK FK to auth.users), full_name (text), phone (text), id_document_type (text), id_document_number (text)
8// Add RLS policies. Create an RPC function book_slot(slot_uuid, user_uuid) that atomically checks booked_count < capacity, increments booked_count, and inserts the booking with FOR UPDATE row lock.
9// Generate SQL and types.

1// Paste this prompt into V0's AI chat:
2// Create booking flow pages:
3// 1. app/book/page.tsx — test type selection with Card grid: name, description, duration Badge, price. Location Select dropdown. 'View Available Slots' Button.
4// 2. app/book/[testTypeId]/page.tsx — slot browsing: shadcn/ui Calendar for date selection. Below the calendar, show available time slots as a Card grid with start time, remaining seats Badge (green=available, yellow=few-left, red=full), and 'Book This Slot' Button. Disable full slots.
5// Use Server Components for the pages. Fetch slots where booked_count < capacity for the selected date.

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3import { createClient } from '@supabase/supabase-js'
4
5const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
6const supabase = createClient(
7  process.env.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function POST(req: NextRequest) {
12  const rawBody = await req.text()
13  const sig = req.headers.get('stripe-signature')!
14
15  let event: Stripe.Event
16  try {
17    event = stripe.webhooks.constructEvent(
18      rawBody, sig, process.env.STRIPE_WEBHOOK_SECRET!
19    )
20  } catch {
21    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
22  }
23
24  if (event.type === 'checkout.session.completed') {
25    const session = event.data.object as Stripe.Checkout.Session
26    const { user_id, slot_id } = session.metadata || {}
27
28    if (user_id && slot_id) {
29      const { data, error } = await supabase.rpc('book_slot', {
30        slot_uuid: slot_id,
31        user_uuid: user_id,
32      })
33
34      if (error) {
35        console.error('Booking failed:', error.message)
36        return NextResponse.json({ error: 'Slot full' }, { status: 409 })
37      }
38
39      await supabase
40        .from('bookings')
41        .update({
42          status: 'confirmed',
43          stripe_payment_id: session.payment_intent as string,
44        })
45        .eq('id', data)
46    }
47  }
48
49  return NextResponse.json({ received: true })
50}

1// Paste this prompt into V0's AI chat:
2// Create booking management:
3// 1. app/my-bookings/page.tsx — two sections: Upcoming Bookings and Past Bookings.
4//    - Each booking Card shows: test type name, location, date/time, confirmation code Badge, status Badge (confirmed=green, cancelled=red, completed=blue).
5//    - 'Cancel Booking' Button with AlertDialog confirmation. Cancellation Server Action: refunds via Stripe, updates booking status to 'cancelled', decrements slot booked_count.
6// 2. app/book/confirm/page.tsx — booking summary Card: test type, location, date, time, price. Candidate info form (name, phone, ID). 'Proceed to Payment' Button creates Stripe Checkout session with slot_id and user_id in metadata.
7// Use shadcn/ui Card, Badge, AlertDialog, Button, Input, Separator.
8// Use revalidatePath in the webhook handler to update slot availability.