Project Structure

The Booking Kit follows a three-tier component architecture with domain-specific route groups and a centralized data layer.

Directory Overview

booking-kit/
├── app/
│   ├── (app)/                        # Admin pages (sidebar layout)
│   │   ├── bookings/
│   │   │   ├── page.tsx              # Bookings dashboard
│   │   │   ├── [id]/page.tsx         # Booking detail
│   │   │   ├── calendar/page.tsx     # Calendar week view
│   │   │   ├── recurring/page.tsx    # Recurring bookings
│   │   │   └── links/page.tsx        # Booking links
│   │   ├── event-types/
│   │   │   ├── page.tsx              # Event types list
│   │   │   └── [id]/page.tsx         # Event type detail
│   │   ├── availability/
│   │   │   ├── page.tsx              # Weekly hours editor
│   │   │   └── policies/page.tsx     # Booking policies
│   │   ├── contacts/
│   │   │   ├── page.tsx              # Contacts list
│   │   │   └── [id]/page.tsx         # Contact detail
│   │   ├── team/
│   │   │   ├── page.tsx              # Team members
│   │   │   └── availability/page.tsx # Team availability
│   │   ├── workflows/
│   │   │   ├── page.tsx              # Workflows list
│   │   │   └── [id]/page.tsx         # Workflow detail
│   │   ├── analytics/
│   │   │   ├── page.tsx              # Bookings analytics
│   │   │   ├── revenue/page.tsx      # Revenue analytics
│   │   │   └── team/page.tsx         # Team performance
│   │   ├── settings/
│   │   │   ├── integrations/page.tsx # Calendar sync, video, payments, CRM
│   │   │   ├── branding/page.tsx     # Logo, colors, booking page
│   │   │   ├── payments/page.tsx     # Payment provider config
│   │   │   ├── notifications/page.tsx# Email/SMS notification prefs
│   │   │   ├── organization/page.tsx # Org name, timezone, defaults
│   │   │   ├── roles/page.tsx        # Roles & permissions matrix
│   │   │   └── account/page.tsx      # Profile, password, danger zone
│   │   └── layout.tsx                # Sidebar + header shell
│   ├── (public)/                     # Public booking flow
│   │   └── book/
│   │       ├── page.tsx              # Service landing / event selection
│   │       ├── slots/page.tsx        # Calendar + slot picker
│   │       ├── details/page.tsx      # Attendee details form
│   │       ├── payment/page.tsx      # Payment summary + card input
│   │       ├── confirmation/page.tsx # Booking confirmed
│   │       ├── reschedule/page.tsx   # Reschedule picker
│   │       ├── cancel/page.tsx       # Cancellation form
│   │       └── unavailable/page.tsx  # No availability fallback
│   ├── (auth)/                       # Authentication
│   │   ├── login/page.tsx
│   │   ├── register/page.tsx
│   │   └── forgot-password/page.tsx
│   ├── page.tsx                      # Root redirect to /bookings
│   ├── layout.tsx                    # Root layout (fonts, theme, skip-link)
│   └── globals.css                   # Design tokens + Tailwind config
├── components/
│   ├── ui/                           # Tier 1: shadcn/ui primitives (28)
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── calendar.tsx
│   │   ├── dialog.tsx
│   │   ├── table.tsx
│   │   ├── tabs.tsx
│   │   ├── select.tsx
│   │   ├── input.tsx
│   │   └── ... (28 total)
│   ├── booking/                      # Tier 2: Booking flow composites
│   │   ├── booking-stepper.tsx
│   │   ├── host-card.tsx
│   │   ├── mini-calendar.tsx
│   │   └── slot-picker.tsx
│   ├── dashboard/                    # Tier 2: Dashboard composites
│   │   ├── stat-card.tsx
│   │   └── booking-status-badge.tsx
│   ├── layout/                       # Tier 2: App shell
│   │   ├── app-sidebar.tsx
│   │   ├── app-header.tsx
│   │   ├── mobile-sidebar.tsx
│   │   ├── skip-link.tsx
│   │   └── theme-toggle.tsx
│   ├── a11y/                         # Accessibility utilities
│   │   ├── live-region.tsx
│   │   └── visually-hidden.tsx
│   ├── analytics/                    # Analytics chart wrappers
│   ├── availability/                 # Availability editor components
│   ├── calendar/                     # Calendar view components
│   ├── contacts/                     # Contact management components
│   ├── events/                       # Event type components
│   ├── settings/                     # Settings form components
│   ├── team/                         # Team management components
│   └── workflows/                    # Workflow builder components
├── data/
│   └── seed.ts                       # All mock data (bookings, events, contacts, etc.)
├── types/
│   └── index.ts                      # TypeScript interfaces for all domains
├── lib/
│   ├── format.ts                     # Date, currency, number formatters
│   └── utils.ts                      # cn() class utility
├── public/                           # Static assets
├── components.json                   # shadcn/ui configuration
├── next.config.ts                    # Next.js config
├── package.json
└── tsconfig.json

Route Groups

The app uses three Next.js route groups:

Group	Layout	Purpose
(app)	Sidebar + Header	Admin pages for managing bookings, events, availability, team, analytics, and settings
(public)	Minimal	Public-facing booking flow that clients/attendees use to schedule
(auth)	Centered card	Login, register, and forgot password

Key Files

File	Purpose
app/layout.tsx	Root layout: fonts (Figtree, Mulish, IBM Plex Mono), ThemeProvider, TooltipProvider, SkipLink, Toaster
app/globals.css	oklch design tokens, Tailwind theme, animations, accessibility utilities
data/seed.ts	All mock data: bookings, event types, contacts, team members, analytics, workflows
types/index.ts	TypeScript interfaces for every domain: Booking, EventType, Contact, TeamMember, Workflow, CalendarEvent, etc.
lib/format.ts	Shared formatters: formatCurrency(), formatDate(), formatTime(), formatDuration(), formatPercent(), formatRelativeDate()
lib/utils.ts	cn() class name merge utility
components.json	shadcn/ui config (new-york style)

Next Steps

• Screens -- browse all 39 screens with routes and descriptions
• Components -- understand the three-tier component hierarchy
• Design Tokens -- customize the oklch color system