Phase 1 — Tenant Panel Static Preview

PHT Service Booking SaaS

Interactive HTML/CSS/JS prototype for the Tenant/Vendor admin. Designed to be ported to Laravel Blade — all layouts, tables, forms, modals and mock data behave as they will in production.

Open Tenant Dashboard View Login Screen
Marketing Website — Where Tenants Come to Buy

Homepage

Marketing site landing page — hero, product tour, features, pricing preview, testimonials, FAQ.

Features

Detailed feature breakdown with product tour, feature grid and competitor comparison table.

Pricing

Three tiers (Starter / Growth / Enterprise), monthly / annual toggle, add-ons and billing FAQ.

Blog

Content marketing hub — featured post, 6 recent posts, tag filter and newsletter signup.

About

Company story, mission, team profiles, values and multi-office timeline.

Contact

Lead-capture form, contact channels (email / phone / chat) and three-office cards.

Bookings & Scheduling

Service Dashboard

KPI overview: today's bookings, pending, revenue, leads with upcoming appointments and quick actions.

Bookings List

Filterable list with status tabs, bulk-confirmation and per-row detail navigation.

Calendar

Week grid with services, staff filter, drag-friendly events and status colour coding.

Catalog & People

Services

Card grid, categories, pricing tiers, SQFT/SQM toggle, activate/deactivate.

Staff

Directory with status catalog (active / on-leave / docs-pending), profile with tabs.

Customers

Customer list with lifetime value, bookings count, last activity.

Sales & CRM

Leads Pipeline

Kanban with New → Contacted → Qualified → Booked → Lost columns.

Invoices

Paid / outstanding / overdue / draft with Stripe status and PDF preview.

Staff Payments

Payroll-style report with Excel export, hours worked & deductions.

Automation & Configuration

Notifications

Inbox of system events plus fully editable templates per channel.

Analytics

Revenue, funnel conversion, cancellations, service-line performance.

Business Settings

Branding, currency, tax rate, cancellation policy, Stripe Connect status.

Public Booking Flow — Tenant-Branded (Northwind Cleaning example)

Marketing Landing

Tenant-branded hero, inline quote widget, services grid, testimonials, "how it works" section.

Quote Widget → Auto-lead

3-step quote form. Submission auto-creates a lead in the tenant's CRM pipeline with source attribution.

Booking Wizard (no-login)

4-step public wizard: service selection with add-ons, date/time with pro picker, guest details, Stripe checkout.

Track Booking

No-login tracking with booking # + email. Live map, ETA, timeline, cancel option.

Customer Portal — Book, Track & Earn

Customer Account

Portal login with SSO options, welcome hero on the home dashboard.

Book & Manage

4-step booking wizard matching client mockups; my bookings list; booking detail with reschedule.

Loyalty & Favourites

Points, tiers (Bronze → Platinum), redeemable perks, referral link, favourite staff cards.

Invoices & Profile

Downloadable invoice history, payment methods, notification prefs, security, delete account.

Staff — Mobile-First Field App

Staff Sign in

Optimized mobile sign-in with biometric option — for iOS & Android WebViews.

Today's Shifts

Home screen: live clock-in card, day earnings, current + upcoming bookings, alerts.

Clock In / Booking

GPS-verified clock in with selfie option; live booking timer + checklist while on-site.

Documents & Earnings

Compliance uploads, payslip history, weekly earnings chart with bonus targets.

Profile & Notifications

Availability toggle, ratings, notification inbox with grouped days.

Superadmin — Enterprise Operations

Superadmin Access

Command-center for the platform: tenants, plans, feature flags, revenue.

Tenants Management

128 businesses on-platform · provision, impersonate, downgrade, churn.

Revenue & Growth

Plans, pricing tiers, MRR waterfall, cohort retention, Stripe Connect take-rate.

Compliance & Ops

SOC-2 audit log, cross-tenant support triage, global integrations.

Blade porting notes
Each HTML file matches a target Blade view. Sidebar & topbar are in partials/ and included via a small fetch wrapper — the equivalent of @include('partials.sidebar'). Mock data lives in assets/js/mock-data.js.
Enter Prototype