💈 ClipBook Build — Day 5A: Pick Service, Date & Time

Yesterday's profile page ended with a "Book now" button pointing at a placeholder. Today the placeholder becomes real: the multi-step booking widget — pick services, pick a slot. This is the moment ClipBook stops being a directory and starts being a business.

Paste this into your Claude Code / Cursor agent:

Build the first half of the booking flow for ClipBook (Next.js 14 App Router, TypeScript, Tailwind CSS, Supabase): a multi-step BookingWidget on the /book/[id] route. Yesterday's "Book now" button points here.

1. Widget shell (components/BookingWidget.tsx):

- 3-step progress indicator at the top: 1 Services → 2 Date & Time → 3 Confirm. Completed steps show a checkmark; the current step is highlighted.

- State lives in the widget (selected services, date, time slot); "Back" returns to the previous step without losing selections.

2. Step 1 — Services:

- List the barber's services (from the Supabase services table) as selectable cards: name, price, duration.

- Multi-select allowed; show a live running total (price + total minutes) as services are toggled.

3. Step 2 — Date & Time:

- Horizontal date strip: next 14 days (skip days the barber is closed, from a working_hours field or table).

- Time slots generated from the barber's working hours in 30-minute increments, MINUS already-booked slots (query bookings for that barber + date where status != 'cancelled').

- Booked slots render struck-through and disabled; past times on today's date are disabled too.

- Selecting a slot highlights it; "Continue to Confirm" advances to Step 3 (built tonight in 5B — a placeholder panel is fine for now).

4. Data model:

- Add a bookings table if it doesn't exist: id, barber_id, customer_id, service_ids (array), date, time_slot, total_price, total_duration_min, status ('pending' | 'confirmed' | 'cancelled'), created_at.

Responsive: full-width single column at 375px; the date strip and slot grid tap cleanly on mobile.

Acceptance criteria:

- Step 1 multi-select updates the live total correctly; deselecting removes it.

- Step 2 shows only real availability: booked slots from Supabase are struck through and unclickable.

- The Back button preserves all selections across steps.

- The progress indicator reflects the current step.

- `npm run build` passes with no TypeScript errors.

What you'll get when it works 👇

3 comments

💈 ClipBook Build — Day 5A: Pick Service, Date & Time