How to Build Booking platform with V0

1// Paste this prompt into V0's AI chat:
2// Build a booking platform with Supabase. Create these tables:
3// 1. providers: id (uuid PK), user_id (uuid FK to auth.users), name (text), bio (text), avatar_url (text), timezone (text default 'UTC')
4// 2. services: id (uuid PK), provider_id (uuid FK), name (text), duration_minutes (int), price (numeric), description (text), is_active (boolean default true)
5// 3. availability: id (uuid PK), provider_id (uuid FK), day_of_week (int 0-6), start_time (time), end_time (time)
6// 4. bookings: id (uuid PK), service_id (uuid FK), provider_id (uuid FK), customer_id (uuid FK), starts_at (timestamptz), ends_at (timestamptz), status (text CHECK in 'pending','confirmed','cancelled','completed'), notes (text), stripe_payment_intent_id (text), created_at (timestamptz)
7// Add exclusion constraint on bookings: EXCLUDE USING gist (provider_id WITH =, tstzrange(starts_at, ends_at) WITH &&) WHERE (status != 'cancelled')
8// Add RLS so customers see only their own bookings, providers see their own.

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3
4const supabase = createClient(
5  process.env.SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7)
8
9export async function GET(req: NextRequest) {
10  const { searchParams } = new URL(req.url)
11  const providerId = searchParams.get('provider_id')!
12  const serviceId = searchParams.get('service_id')!
13  const date = searchParams.get('date')!
14
15  const dayOfWeek = new Date(date).getDay()
16
17  const { data: availability } = await supabase
18    .from('availability')
19    .select('start_time, end_time')
20    .eq('provider_id', providerId)
21    .eq('day_of_week', dayOfWeek)
22
23  const { data: service } = await supabase
24    .from('services')
25    .select('duration_minutes')
26    .eq('id', serviceId)
27    .single()
28
29  if (!availability?.length || !service) {
30    return NextResponse.json({ slots: [] })
31  }
32
33  const { data: existingBookings } = await supabase
34    .from('bookings')
35    .select('starts_at, ends_at')
36    .eq('provider_id', providerId)
37    .neq('status', 'cancelled')
38    .gte('starts_at', `${date}T00:00:00`)
39    .lte('starts_at', `${date}T23:59:59`)
40
41  const slots: string[] = []
42  for (const block of availability) {
43    let current = new Date(`${date}T${block.start_time}`)
44    const end = new Date(`${date}T${block.end_time}`)
45
46    while (current.getTime() + service.duration_minutes * 60000 <= end.getTime()) {
47      const slotEnd = new Date(current.getTime() + service.duration_minutes * 60000)
48      const conflicts = existingBookings?.some((b) => {
49        const bStart = new Date(b.starts_at).getTime()
50        const bEnd = new Date(b.ends_at).getTime()
51        return current.getTime() < bEnd && slotEnd.getTime() > bStart
52      })
53      if (!conflicts) slots.push(current.toISOString())
54      current = new Date(current.getTime() + 30 * 60000)
55    }
56  }
57
58  return NextResponse.json({ slots })
59}

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3
4const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
5
6export async function POST(req: NextRequest) {
7  const { serviceId, providerId, customerId, startsAt, endsAt, serviceName, price } = await req.json()
8
9  const session = await stripe.checkout.sessions.create({
10    mode: 'payment',
11    payment_method_types: ['card'],
12    line_items: [{
13      price_data: {
14        currency: 'usd',
15        product_data: { name: serviceName },
16        unit_amount: Math.round(price * 100),
17      },
18      quantity: 1,
19    }],
20    success_url: `${req.nextUrl.origin}/bookings?success=true`,
21    cancel_url: `${req.nextUrl.origin}/book/${providerId}`,
22    metadata: {
23      service_id: serviceId,
24      provider_id: providerId,
25      customer_id: customerId,
26      starts_at: startsAt,
27      ends_at: endsAt,
28    },
29  })
30
31  return NextResponse.json({ url: session.url })
32}

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3import { createClient } from '@supabase/supabase-js'
4import { Resend } from 'resend'
5
6const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
7const supabase = createClient(process.env.SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!)
8const resend = new Resend(process.env.RESEND_API_KEY)
9
10export async function POST(req: NextRequest) {
11  const body = await req.text()
12  const sig = req.headers.get('stripe-signature')!
13
14  let event: Stripe.Event
15  try {
16    event = stripe.webhooks.constructEvent(body, sig, process.env.STRIPE_WEBHOOK_SECRET!)
17  } catch {
18    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
19  }
20
21  if (event.type === 'checkout.session.completed') {
22    const session = event.data.object as Stripe.Checkout.Session
23    const meta = session.metadata!
24
25    const { data: booking, error } = await supabase.from('bookings').insert({
26      service_id: meta.service_id,
27      provider_id: meta.provider_id,
28      customer_id: meta.customer_id,
29      starts_at: meta.starts_at,
30      ends_at: meta.ends_at,
31      status: 'confirmed',
32      stripe_payment_intent_id: session.payment_intent as string,
33    }).select().single()
34
35    if (!error && session.customer_details?.email) {
36      await resend.emails.send({
37        from: 'bookings@yourdomain.com',
38        to: session.customer_details.email,
39        subject: 'Booking Confirmed',
40        text: `Your booking is confirmed for ${new Date(meta.starts_at).toLocaleString()}.`,
41      })
42    }
43  }
44
45  return NextResponse.json({ received: true })
46}

1// Paste this prompt into V0's AI chat:
2// Build a provider dashboard at app/dashboard/bookings/page.tsx.
3// Requirements:
4// - Calendar view showing upcoming bookings as colored blocks
5// - Table view with columns: Date, Time, Customer, Service, Status Badge, Actions
6// - Tabs to switch between Calendar and Table views
7// - Availability management page with day-of-week Select, start/end time pickers for each day
8// - Server Actions for updating booking status (confirm, complete, cancel)
9// - Cancel action should show AlertDialog with confirmation
10// - Badge colors: pending=yellow, confirmed=green, cancelled=red, completed=blue
11// - Use Server Components for initial data fetch from Supabase