Build an Attendance App in Lovable

Build an attendance tracking app with QR check-in, geo-fence validation, and admin reporting. Stack assumptions: React + Vite + TypeScript + Tailwind + shadcn/ui already scaffolded by Lovable, React Router for routes, Supabase JS client against Lovable Cloud.

## Database schema (create one migration)

Create three tables in the public schema:

1. `events` — id (uuid pk default gen_random_uuid()), name (text not null), location_lat (numeric(9,6)), location_lng (numeric(9,6)), radius_m (int not null default 100), qr_token (text unique), qr_token_expires_at (timestamptz), scheduled_start (timestamptz), scheduled_end (timestamptz), status (text not null default 'scheduled' check (status in ('scheduled','active','closed'))), created_at (timestamptz default now()).

2. `profiles` — id (uuid pk references auth.users(id) on delete cascade), full_name (text not null), employee_code (text unique), default_role (text not null default 'attendee' check (default_role in ('attendee','supervisor','admin'))), timezone (text not null default 'UTC'), created_at (timestamptz default now()).

3. `attendance` — id (uuid pk default gen_random_uuid()), user_id (uuid not null references auth.users(id)), event_id (uuid references events(id)), check_in_at (timestamptz not null default now()), check_out_at (timestamptz), method (text not null check (method in ('manual','qr','geo','admin'))), check_in_lat (numeric(9,6)), check_in_lng (numeric(9,6)), check_in_accuracy_m (int), notes (text), created_at (timestamptz default now()), CONSTRAINT attendance_user_event_day_key UNIQUE (user_id, event_id, (date_trunc('day', check_in_at))).

## RLS policies

Enable RLS on all three tables.
- attendance: SELECT for authenticated where user_id = auth.uid() (per-user own history); also SELECT for admin via `has_role('admin')`. INSERT only via check_in RPC (no direct INSERT policy for users). UPDATE only for admin.
- events: SELECT for any authenticated user; INSERT/UPDATE/DELETE for admin only.
- profiles: SELECT for user's own row and admin; UPDATE for user's own row.

Create SECURITY DEFINER plpgsql functions:
- `has_role(p_role text)` returns boolean: RETURN (auth.jwt() ->> 'app_metadata')::jsonb ->> 'role' = p_role;
- `check_in(p_event_id uuid, p_token text, p_lat numeric, p_lng numeric, p_accuracy_m int)` returns uuid (the new attendance row id). The function must:
  1. Look up the event: `SELECT * FROM events WHERE id = p_event_id FOR SHARE` (shared lock, not exclusive — we don't need row exclusivity for attendance).
  2. Validate status = 'active' — raise 'Event is not accepting check-ins' if not.
  3. Validate qr_token = p_token AND now() < qr_token_expires_at — raise 'QR code has expired or is invalid'.
  4. Validate haversine: if location_lat IS NOT NULL, compute haversine distance between (location_lat, location_lng) and (p_lat, p_lng). If (distance_m - p_accuracy_m) > radius_m, raise 'You appear to be outside the venue (Xm away, Ym accuracy). Check in from on-site.' (format actual distances in the message).
  5. INSERT into attendance (user_id=auth.uid(), event_id, check_in_at=now(), method='qr', check_in_lat, check_in_lng, check_in_accuracy_m) — if the UNIQUE constraint fires (duplicate), catch the exception and raise 'You are already checked in for this event today. Go to /me to check out.'.
  6. Return the new attendance.id.
- `record_check_out(p_attendance_id uuid)` returns void — UPDATE attendance SET check_out_at = now() WHERE id = p_attendance_id AND user_id = auth.uid() AND check_out_at IS NULL.

Add a haversine SQL helper function:
`CREATE OR REPLACE FUNCTION haversine_m(lat1 numeric, lng1 numeric, lat2 numeric, lng2 numeric) RETURNS numeric AS $$ SELECT 2 * 6371000 * asin(sqrt(sin(radians((lat2-lat1)/2))^2 + cos(radians(lat1)) * cos(radians(lat2)) * sin(radians((lng2-lng1)/2))^2)) $$ LANGUAGE sql IMMUTABLE;`

Grant EXECUTE on check_in and record_check_out to authenticated.

## Layout

Two layouts:
1. `src/layouts/AppLayout.tsx` — mobile-first single column for attendees: top bar with logo, user avatar, hamburger menu. No sidebar (check-in is used on phones).
2. `src/layouts/AdminLayout.tsx` — desktop sidebar (Dashboard, Events, Attendance Log, Reports, Settings) + scrollable main area.

## Pages and routes

Create these routes in src/App.tsx:
- /check-in (CheckIn.tsx) — reads ?token= and ?event_id= from the URL query params (the QR code encodes these). Shows event name and location. Large 'Check In' button = CheckInButton component. After clicking: request browser geolocation, call check_in RPC, show success or error.
- /me (Me.tsx) — auth-gated. Shows the user's attendance history sorted by check_in_at DESC. Each active session (check_out_at IS NULL) shows a green 'Active — Check Out' button that calls record_check_out.
- /admin (Dashboard.tsx) — admin-gated (has_role('admin')). 3 KPI cards: Today's check-ins (count), Currently checked in (active sessions), Events today (events with status='active').
- /admin/events (Events.tsx) — events CRUD table. Row click opens a Sheet with name, lat/lng, radius_m, scheduled_start/end, status controls. 'Generate QR' button on each active event opens a Dialog with a QRCodeDisplay component.
- /admin/log (Log.tsx) — filterable attendance log with: date range picker, event selector, user search by name/employee_code, status filter (checked in / checked out / all). AttendanceTable component. CSV export button.
- /login (Login.tsx) — email+password form.

## Key components

Create: CheckInButton (handles navigator.geolocation.getCurrentPosition() with a clear permission-denied error message, calls check_in RPC, shows success with event name + check-in time or error from RPC), QRCodeDisplay (uses the qrcode.react library to render a QR code for the URL `https://your-app.lovable.app/check-in?event_id={id}&token={token}` — update the base URL to the real domain after deploying), AttendanceTable (shadcn Table with date range filter, user filter, event filter, check-in/out times, duration in hours if both times present, status chip), CheckedInBadge (green pulse dot + 'Currently checked in').

## generate-qr-token Edge Function

Create supabase/functions/generate-qr-token/index.ts. The function accepts {event_id} in the body, verifies the caller has role='admin', generates a cryptographically random 32-byte token, updates events SET qr_token = hex_token, qr_token_expires_at = now() + interval '15 minutes' WHERE id = event_id, and returns {token, expires_at}. The QRCodeDisplay component polls this endpoint every 14 minutes to rotate the token.

## Styling

Light mode default (legibility for indoor use). Primary color teal-600. /check-in page uses very large tap targets (min-h-16 buttons, text-xl labels) — this is used on phones by people in motion. Admin pages use standard desktop density. No clever animations — clarity over polish.