Screens
Last updated on 2026-08-26
The Booking Kit includes 39 screens across 8 sections. Every screen uses seed data from data/seed.ts and can be wired to your own backend API.
Public Booking Flow (8 screens)
The public booking flow is the client-facing experience. Attendees use these screens to discover services, pick a time slot, enter their details, pay, and manage their booking.
| Route | Page | Description |
|---|---|---|
/book |
Service Landing | Event type cards with duration, price, and description. Attendee selects a service to book |
/book/slots |
Calendar & Slot Picker | Month calendar with availability density indicators, day slot picker grouped by morning/afternoon/evening, timezone selector |
/book/details |
Attendee Details | Name, email, phone, custom questions, guest invite fields, and notes textarea |
/book/payment |
Payment | Booking summary card, card input fields, coupon code entry, deposit vs full payment toggle |
/book/confirmation |
Confirmation | Booking confirmed with event details, add-to-calendar buttons (Google, Outlook, iCal), and booking reference |
/book/reschedule |
Reschedule | Calendar picker to select a new date and time for an existing booking |
/book/cancel |
Cancel | Cancellation form with reason selection and optional feedback textarea |
/book/unavailable |
Unavailable | Fallback screen when no availability exists, with alternative suggestions |
Dashboard & Bookings (5 screens)
The admin bookings hub provides a dashboard overview and management tools for all bookings.
| Route | Page | Description |
|---|---|---|
/bookings |
Bookings Dashboard | KPI stat cards (total bookings, contacts, revenue, growth), today's schedule timeline, upcoming bookings, sortable/filterable bookings table with search, status filter pills, create booking dialog, cancel booking alert |
/bookings/[id] |
Booking Detail | Full booking detail with attendee info, event type, date/time, location, payment status, notes, and activity timeline |
/bookings/calendar |
Calendar Week View | Weekly calendar grid with color-coded event type blocks, clickable booking cards, week navigation |
/bookings/recurring |
Recurring Bookings | List of recurring booking series with pattern (daily/weekly/bi-weekly/monthly), progress tracking, pause/resume controls |
/bookings/links |
Booking Links | Shareable booking links with short URLs, UTM tracking, usage counts, expiration dates, and create/edit dialogs |
Event Types (2 screens)
Event type management for creating and configuring the services that can be booked.
| Route | Page | Description |
|---|---|---|
/event-types |
Event Types List | Card grid of event types with name, duration, price, status badge, booking count, and create/edit dialog with category selection (one-on-one, group, round-robin, collective) |
/event-types/[id] |
Event Type Detail | Tabbed detail view with settings, availability, locations, notifications, and embed code for the event type |
Availability (2 screens)
Availability configuration for setting when bookings can be made.
| Route | Page | Description |
|---|---|---|
/availability |
Weekly Hours | Per-day toggles with draggable time range controls, add/remove time ranges, copy schedule to other days |
/availability/policies |
Booking Policies | Cancellation window, reschedule limits, no-show auto-cancel, late cancellation fees, minimum booking notice |
People (4 screens)
Contact management and team coordination screens.
| Route | Page | Description |
|---|---|---|
/contacts |
Contacts List | Searchable directory of attendees with name, email, company, booking count, total spent, tags, and import button |
/contacts/[id] |
Contact Detail | Contact profile with booking history, notes, feedback responses, and edit capabilities |
/team |
Team Members | Team directory with role badges (admin/manager/member), availability status indicators, invite dialog, and connected calendars |
/team/availability |
Team Availability | Side-by-side calendar comparison of team members, round-robin rotation settings, and collective availability overlay |
Workflows (2 screens)
Workflow automation for booking lifecycle events.
| Route | Page | Description |
|---|---|---|
/workflows |
Workflows List | List of automation workflows with trigger type, action count, active/inactive toggle, run count, and last run timestamp |
/workflows/[id] |
Workflow Detail | Visual workflow builder with trigger selection, action chain (email, SMS, webhook, wait, tag), condition branching, and template editor |
Analytics (3 screens)
Data visualization and reporting for booking performance.
| Route | Page | Description |
|---|---|---|
/analytics |
Bookings Analytics | Bookings over time area chart, popular time slot heatmap, conversion funnel (page view to confirmed), status breakdown pie chart |
/analytics/revenue |
Revenue Analytics | Revenue trend line chart, revenue by event type bar chart, average booking value, refund tracking |
/analytics/team |
Team Performance | Team member comparison table with bookings count, utilization percentage, average rating, response time |
Settings (7 screens)
Application configuration and account management.
| Route | Page | Description |
|---|---|---|
/settings/integrations |
Integrations | Calendar sync (Google, Outlook, iCloud), video conferencing (Zoom, Meet, Teams), payment providers (Stripe, PayPal, Square), CRM connections with connect/disconnect toggles |
/settings/branding |
Branding | Logo upload, brand color picker, booking page customization, custom domain settings |
/settings/payments |
Payments | Payment provider configuration, currency settings, deposit rules, tax/VAT settings, refund policy |
/settings/notifications |
Notifications | Email and SMS notification preferences matrix for booking events (created, confirmed, cancelled, rescheduled, reminder, follow-up) |
/settings/organization |
Organization | Organization name, default timezone, business hours, date format, first day of week |
/settings/roles |
Roles & Permissions | Permission matrix for admin/manager/member roles across features (bookings, event types, availability, contacts, analytics, settings) |
/settings/account |
Account | Profile editing, password change, two-factor authentication toggle, active sessions, danger zone with account deletion |
Auth (3 screens)
Authentication pages with social login support.
| Route | Page | Description |
|---|---|---|
/login |
Login | Email/password form with social login buttons (Google, Microsoft), remember me toggle |
/register |
Register | Registration form with name, email, password, password strength indicator, terms acceptance |
/forgot-password |
Forgot Password | Email input for password reset link |
Screen Count Summary
| Section | Screens |
|---|---|
| Public Booking Flow | 8 |
| Dashboard & Bookings | 5 |
| Event Types | 2 |
| Availability | 2 |
| People | 4 |
| Workflows | 2 |
| Analytics | 3 |
| Settings | 7 |
| Auth | 3 |
| Total | 39 |
Next Steps
- Components -- explore the component hierarchy
- Customization -- adapt screens for your brand
- Design Tokens -- customize colors, fonts, and spacing