UI Pages Documentation
This reference tours the main screens of Tutor by route. The screenshots below are captured from a live install with demo data. Pages are Next.js 16 App Router route segments under src/app/. There are five broad areas, each with its own URL prefix and layout:
| Area | URL prefix | Location |
|---|---|---|
| Storefront (public) | /, /listings, /booking, … |
src/app/(site)/ |
| Customer area | /customer/* |
src/app/customer/(app)/ |
| Host (tutor) area | /host/* |
src/app/host/(app)/ |
| Admin panel | /admin/* |
src/app/admin/(panel)/ |
| Influencer area | /influencer/* |
src/app/influencer/(app)/ |
Storefront pages (src/app/(site))
The public marketing + Lesson-catalogue experience. No sign-in required for browsing or starting a booking.
| Page | Route | What it does |
|---|---|---|
| Home | / |
Landing page — hero slider, featured lessons, subjects/categories, testimonials |
| Lesson catalogue | /listings |
Search grid with subject/study-level/price filters and facets |
| Lesson detail | /listings/[slug] |
Single Lesson — summary, what's included, tutor, lesson times, reviews, book |
| Booking / checkout | /booking/checkout |
Pick a lesson time + extras, pay deposit or full |
| Booking confirmed | /booking/confirmed |
Post-payment confirmation screen |
| How it works | /how-it-works |
Explains the browse → book → learn flow |
| Become a tutor | /careers, /enquiry |
Tutor onboarding + lead-capture pages |
| Blogs | /blogs |
Blog index and article pages |
| Gallery | /gallery |
Media gallery |
| About / Contact / FAQ | /about, /contact, /faq |
CMS + lead-capture pages |
| AI tools | /ai-tools |
Public AI assistant / helper surface |
| CMS pages | /[slug] |
Builder / CMS-authored pages resolved by slug |
| Legal | /privacy-policy, /terms-and-conditions, /cookie-policy, /refund-policy |
Policy pages |
Home — /
The storefront landing page (src/app/(site)/page.tsx). Composes the hero slider, featured lessons, subjects/categories, testimonials and CTAs. Public.
Lesson catalogue — /listings
The catalogue grid (src/app/(site)/listings/page.tsx) with search, subject/study-level and price filters. Backed by GET /api/v1/listings (paginated/sorted/filtered).
Lesson detail — /listings/[slug]
The conversion page for a single Lesson (src/app/(site)/listings/[slug]/page.tsx). Renders the title, summary, "What's included", the tutor, available lesson times (backed by experience_sessions, either scheduled directly or expanded from the tutor's weekly availability_rules), and reviews, with a book action. Data comes from GET /api/v1/listings/:slug (and /reviews, /availability).
Booking / checkout — /booking/checkout
Collects student/contact details, party size and any paid extras, then takes payment. The chosen lesson time is claimed atomically, and the student pays a deposit or the full amount through the configured gateway. On success the flow lands on /booking/confirmed.
Customer area (src/app/customer/(app))
The signed-in area for students who book lessons. Requires a customer session; the layout renders CustomerChrome + CustomerSidebar.
| Page | Route | What it does |
|---|---|---|
| Dashboard | /customer/dashboard |
"Your bookings at a glance" — summary cards + recent activity |
| Bookings | /customer/bookings, /customer/bookings/[public_id] |
Upcoming/past bookings + booking detail (lesson time, extras, invoice) |
| Wishlist | /customer/wishlist |
Saved lessons |
| Reviews | /customer/reviews |
Reviews the student has left / can leave after a lesson |
| Messages | /customer/messages |
Conversations with tutors |
| Payments | /customer/payments |
Payment history + invoices |
| Notifications | /customer/notifications |
Notification inbox |
| Support | /customer/support |
Support tickets |
| Settings | /customer/settings |
Profile, addresses & account settings |
Dashboard — /customer/dashboard
The customer landing screen (src/app/customer/(app)/dashboard/page.tsx). Summarises upcoming lesson times, recent bookings and activity.
Bookings — /customer/bookings
Lists the student's bookings, each linking to a detail page at /customer/bookings/[public_id] showing the lesson, lesson-time date/time, extras, payments and an invoice (InvoiceModal). Cancellations follow the tiered refund policy and release the lesson time.
Host (tutor) area (src/app/host/(app))
The workspace for tutors who list Lessons and publish their availability. Requires a host session; the layout renders HostSidebar.
| Page | Route | What it does |
|---|---|---|
| Dashboard | /host/dashboard |
"Your lessons at a glance" — KPIs + upcoming lesson times |
| Listings | /host/listings, /host/listings/new, /host/listings/[id] |
Create & manage Lessons (details, amenities, languages) |
| Availability | /host/availability |
Publish weekly availability hours + lesson length (availability_rules), and one-off exceptions |
| Calendar | /host/calendar |
Lesson-time calendar / scheduling |
| Reservations | /host/reservations |
Incoming bookings to confirm / manage |
| Inbox | /host/inbox |
Messages with students |
| Insights | /host/insights |
Performance analytics |
| Reviews | /host/reviews |
Reviews on the tutor's Lessons |
| Payouts | /host/payouts |
Earnings & payout requests |
| Billing | /host/billing |
Tutor subscription to list Lessons |
| Settings | /host/settings |
Tutor profile & preferences |
Dashboard — /host/dashboard
The host landing screen (src/app/host/(app)/dashboard/page.tsx), surfacing the tutor's Lessons, upcoming lesson times and headline metrics.
Listings — /host/listings
The tutor's Lesson manager (src/app/host/(app)/listings/page.tsx). The editor (ListingForm) is organised into tabs — details, an AmenitiesTab ("What's included"), a LocationPicker, and a LanguagesTab. New Lessons are created at /host/listings/new; existing ones edited at /host/listings/[id]. Weekly availability is managed separately on the Availability page (/host/availability), which expands into bookable lesson times rather than being hand-scheduled per listing.
Admin panel (src/app/admin/(panel))
The administration console. Requires an admin session; write actions are RBAC-gated per route. Pages typically open with <PageHeader> and use the shared UI primitives.
| Page | Route | What it does |
|---|---|---|
| Dashboard | /admin/dashboard |
KPIs + "Revenue over time" chart |
| Listings | /admin/listings |
Review & manage the Lesson catalogue |
| Bookings | /admin/bookings |
Manage all bookings and payment transactions |
| Refunds | /admin/refunds |
Cancellation refund approval queue |
| Hosts / Customers | /admin/hosts, /admin/customers |
Manage tutors and students |
| Extras / Amenities | /admin/extras, /admin/amenities |
Paid add-ons and "what's included" catalogue |
| Coupons | /admin/coupons |
Discount coupons |
| Reviews | /admin/reviews |
Moderate lesson reviews |
| Issues / Leads | /admin/issues, /admin/leads |
Reported issues and captured leads |
| Calendar | /admin/calendar |
Lesson times across all tutors |
| Content (CMS) | /admin/pages, /admin/blogs, /admin/faqs, /admin/gallery, /admin/hero-slider, /admin/testimonials, /admin/partners, /admin/about, /admin/why-choose-us, /admin/menus |
CMS content |
| Builder / Theme | /admin/builder, /admin/theme-builder |
Page builder & theme builder |
| Master data | /admin/master-data |
Subjects, study levels, session formats, categories, locations |
| Media | /admin/media |
Media library |
| Marketing / Apps | /admin/marketing, /admin/apps |
Marketing tools & installed add-ons |
| License | /admin/license |
License activation & entitlements |
| Settings | /admin/settings/* |
Platform settings (see below) |
Dashboard — /admin/dashboard
The admin landing screen (src/app/admin/(panel)/dashboard/page.tsx). Opens with "Welcome back," shows headline KPIs and a "Revenue over time" chart. Data from GET /api/v1/admin/dashboard.
Bookings (admin) — /admin/bookings
Booking management (src/app/admin/(panel)/bookings/page.tsx) — every booking, its lesson time, extras, payments and status. Cancellations that request money back land in the Refunds queue (/admin/refunds), where an admin approves or rejects each booking_refunds request.
Add-ons & Integrations — /admin/settings/integrations
The add-ons screen (src/app/admin/(panel)/settings/integrations/page.tsx) where premium integrations and feature plugins are unlocked with a purchase code and toggled on. See the Add-on Development Guide and Plugin Development Guide.
Settings — /admin/settings/*
The settings hub. Sections (each a route segment under src/app/admin/(panel)/settings/) include: theme, payments, booking, monetization, plans (tutor subscription plans), currencies, countries, locations, languages, users, roles, permissions, integrations, webhooks, api-tokens, backup, notifications, notification-log, and activity. Each section reads/writes via GET/POST /api/v1/admin/settings/:section (plus dedicated routes for users, roles, languages, etc.).
Influencer area (src/app/influencer/(app))
The affiliate workspace. Requires an influencer session; the layout renders InfluencerChrome + InfluencerSidebar.
| Page | Route | What it does |
|---|---|---|
| Dashboard | /influencer/dashboard |
Referral performance at a glance |
| Referral links | /influencer/referral-links |
Create & manage tracked referral links |
| Analytics | /influencer/analytics |
Clicks, visits and conversion analytics |
| Bookings | /influencer/bookings |
Bookings attributed to the influencer |
| Commission | /influencer/commission |
Earned commissions |
| Payouts | /influencer/payouts |
Commission payout requests |
| Listings | /influencer/listings |
Browse Lessons to promote (ProductBrowser) |
| Marketing materials | /influencer/marketing-materials |
Share assets & tools (ShareTools) |
| AI chat | /influencer/ai-chat |
AI assistant for content (InfluencerAiChat) |
| Notifications | /influencer/notifications |
Notification inbox |
| Profile / Settings | /influencer/profile, /influencer/settings |
Public profile, social links & preferences |
Referral links — /influencer/referral-links
The link manager (src/app/influencer/(app)/referral-links/page.tsx) where an influencer generates tracked links to Lessons. Visits and clicks are recorded (influencer_clicks, influencer_visits); attributed bookings drive influencer_commissions.
© CreativeCape Solutions · creative-cape.com · support@creative-cape.com