Build a Scheduling App in Lovable

Build a Calendly-style scheduling app. Stack: React + Vite + TypeScript + Tailwind + shadcn/ui (already scaffolded), React Router v6, Supabase JS client against Lovable Cloud.

## Database schema (migration: supabase/migrations/0001_scheduling_schema.sql)

First enable the btree_gist extension: CREATE EXTENSION IF NOT EXISTS btree_gist;

Create four tables:

1. `profiles` — id (uuid references auth.users.id on delete cascade, primary key), slug (text not null unique), full_name (text not null), timezone (text not null default 'UTC'), google_refresh_token (text), created_at (timestamptz default now()).
   RLS: enable. Public SELECT on slug + full_name only: FOR SELECT USING (true) — but create a view or column-level: use a VIEW `public_profiles` that selects only id, slug, full_name for anon; the actual profiles table SELECT is per-user: FOR SELECT TO authenticated USING (id = auth.uid()).
   Simpler: FOR SELECT TO anon, authenticated USING (true) but only expose slug + full_name columns via the API by using column-level security (REVOKE SELECT ON profiles FROM anon; GRANT SELECT (id, slug, full_name) ON profiles TO anon;).

2. `event_types` — id (uuid pk default gen_random_uuid()), owner_id (uuid references auth.users.id not null), slug (text not null), name (text not null), duration_min (int not null check (duration_min in (15,30,45,60,90))), buffer_min (int default 0), description (text), active (bool default true), created_at (timestamptz default now()), UNIQUE (owner_id, slug).
   RLS: enable. FOR SELECT TO anon, authenticated USING (active = true). For owner write: FOR INSERT TO authenticated WITH CHECK (owner_id = auth.uid()); FOR UPDATE TO authenticated USING (owner_id = auth.uid()); FOR DELETE TO authenticated USING (owner_id = auth.uid()).

3. `availability_rules` — id (uuid pk default gen_random_uuid()), owner_id (uuid references auth.users.id not null), weekday (int not null check (weekday between 0 and 6)), start_time (time not null), end_time (time not null), check (end_time > start_time), created_at (timestamptz default now()).
   RLS: enable. FOR SELECT TO authenticated USING (owner_id = auth.uid()). FOR INSERT/UPDATE/DELETE TO authenticated WITH CHECK/USING (owner_id = auth.uid()). Anon cannot read availability_rules directly — they get free slots via the get-slots edge function.

4. `meetings` — id (uuid pk default gen_random_uuid()), owner_id (uuid references auth.users.id not null), event_type_id (uuid references event_types.id not null), guest_email (text not null), guest_name (text not null), starts_at (timestamptz not null), ends_at (timestamptz not null), status (text not null default 'confirmed' check (status in ('confirmed','cancelled'))), google_event_id (text), created_at (timestamptz default now()).
   Exclusion constraint: CONSTRAINT meetings_no_overlap EXCLUDE USING gist (owner_id WITH =, tstzrange(starts_at, ends_at, '[)') WITH &&).
   RLS: enable. FOR SELECT TO authenticated USING (owner_id = auth.uid()). FOR INSERT TO authenticated — blocked (use edge function only; no client INSERT). FOR UPDATE TO authenticated USING (owner_id = auth.uid()).

## Layouts

`src/layouts/AppLayout.tsx` — authenticated host layout. Sidebar (240px): logo, nav links (Dashboard / Event Types / Availability / Integrations / View My Page). Bottom: user avatar + name + sign out. Main area scrollable. Wrap with `<HostGuard>` that checks supabase.auth.getSession(); if not signed in, redirect to /signin.

`src/layouts/PublicLayout.tsx` — minimal layout for /[user-slug] and /[user-slug]/[event-slug] booking pages. Just a centered container, no sidebar.

## Pages (add to src/App.tsx)

- `/dashboard` — Dashboard.tsx: table of upcoming confirmed meetings. Columns: guest name, event type, starts_at (formatted in owner's timezone), status. Actions: Cancel meeting button.
- `/event-types` — EventTypes.tsx: card grid of event types (name, duration, active toggle). Add Event Type button opens EventTypeDialog (form: name, slug, duration_min Select, buffer_min, description, active toggle).
- `/event-types/new` — redirect to /event-types with dialog open.
- `/availability` — Availability.tsx: AvailabilityGrid component. 7-column grid (Mon–Sun). Each column has a toggle (Available / Unavailable) and a time-range input (start_time, end_time). Save button writes to availability_rules table.
- `/integrations` — Integrations.tsx: placeholder card for 'Google Calendar' with 'Connect' button (wired in follow-up).
- `/[user-slug]` — booking/HostProfile.tsx: shows host's name, list of active event types as cards with duration and description. Click an event type → /[user-slug]/[event-slug].
- `/[user-slug]/[event-slug]` — booking/SlotPicker.tsx: date picker (shadcn Calendar), then on date select, fetch free slots from get-slots edge function (GET /functions/v1/get-slots?owner_slug=X&event_type_slug=Y&date=YYYY-MM-DD). Show slots as buttons. On slot click, show confirm form: guest_name and guest_email inputs. Submit calls create-meeting edge function.

## Key components

`src/components/SlotPicker.tsx` — date + time slot picker. On date change, GET /functions/v1/get-slots with the owner's slug, event type slug, and selected date. Show each available slot as a button. Disabled state when loading.

`src/components/AvailabilityGrid.tsx` — 7-column weekday grid with time range inputs per day. Read from availability_rules on mount, write on Save.

`src/components/HostGuard.tsx` — checks session, redirects to /signin if not authenticated.

## Edge functions

`supabase/functions/get-slots/index.ts` — GET with query params owner_slug, event_type_slug, date (YYYY-MM-DD). Steps:
1. Look up the host's id from profiles.slug.
2. Fetch the event_type for that owner_id + slug to get duration_min and buffer_min.
3. Fetch availability_rules for that owner and the weekday matching the requested date.
4. Generate all possible slot start times within the availability window at duration_min intervals.
5. Fetch existing confirmed meetings on that date where status='confirmed'.
6. Remove any slots that overlap with existing meetings (slot_start < meeting.ends_at AND slot_end > meeting.starts_at).
7. Return { slots: ['HH:MM', ...], host_timezone: 'America/New_York', date: 'YYYY-MM-DD' }.

`supabase/functions/create-meeting/index.ts` — POST JSON { owner_slug, event_type_slug, guest_email, guest_name, starts_at (ISO 8601) }. Steps:
1. CORS preflight: if req.method === 'OPTIONS' return new Response('ok', { headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'authorization,content-type' } }).
2. Use service-role Supabase client.
3. Look up owner's id from profiles.slug.
4. Look up event_type for owner_id + event_type_slug to get duration_min.
5. Compute ends_at = starts_at + duration_min minutes.
6. INSERT INTO meetings (owner_id, event_type_id, guest_email, guest_name, starts_at, ends_at, status) VALUES (...) — the btree_gist exclusion constraint will raise error 23P01 on overlap.
7. On success, send confirmation email via Resend to guest_email (RESEND_API_KEY from Deno.env.get).
8. Return 200 { ok: true, meeting_id }.
9. On exclusion constraint error (Postgres error code 23P01), return 409 { ok: false, reason: 'slot_taken' }.

## Styling

Clean indigo + slate, lots of whitespace. Public booking page: single-column, mobile-first, max-width 480px centered. Host dashboard: desktop-first, sidebar+main. Use shadcn Calendar, Select, Card, Sheet, Dialog, Skeleton, Toast.

Install date-fns and date-fns-tz as dependencies.

Generate migration first, then layouts, then pages in order listed, then edge functions.