Back to portfolio
HadiBook — Booking Platform logoSalon & wellness booking suite

HadiBook — Booking Platform

Two-app salon booking suite: a customer-facing discovery and reservation app, and a full admin console for appointments, staff, catalog, customers, and scheduling — with polished light/dark design across every screen.

ReactViteTypeScriptTailwind CSS v4MonorepoAdminBooking

HadiBook is a production-architecture service booking platform built as a pnpm monorepo. Customers browse categories and services with per-category color accents, read staff profiles with ratings, and move through a five-step booking flow — service, specialist, date and time, contact details, review — all tracked by a live progress bar with locked future steps.

The admin console gives owners and managers a dashboard with a weekly bar chart and KPI cards, a searchable and date-range-filtered appointment list, appointment detail pages with status control, a day-schedule calendar, services and categories CRUD, staff management with live availability summaries, a customer CRM with appointment history, per-staff availability configuration, booking rules settings, and placeholder modules for reviews, promotions, reports, and notifications.

Both apps share an MVVM-inspired clean architecture: View → ViewModel → Repository → Service → API Client. Light, dark, and system theme modes are supported throughout. The user app includes unit tests and critical-flow integration tests; the admin app has MSW scaffolding ready for future test suites.

Presentation

Mockups

HadiBook customer discovery — home feed, service catalog, service details
HadiBook booking flow — five-step reservation with progress bar and staff avatars
HadiBook account hub — appointments, favorites, and status badges
HadiBook admin dashboard — KPIs, weekly chart, and appointment list
HadiBook admin operations — appointment detail hero and calendar in dark mode
HadiBook admin management — staff cards, service catalog, and customer CRM
Details

App presentation

Customer App

Discovery home, category-filtered service catalog, five-step booking flow, account hub, and appointment tracking.

The HadiBook customer app is a polished salon and wellness booking experience. A gradient hero home feed showcases color-coded category cards (Hair, Nails, Skincare, Wellness), ranked popular services with inline pricing, and featured staff with star ratings. The five-step booking flow progresses through service selection with category accent stripes, specialist selection with gradient initials avatars and a Recommended badge, a date picker and responsive time-slot grid, a contact details form, and a 2×2 review summary before confirmation. The success screen uses an emerald hero with the appointment ID. The account area features a gradient avatar hero, icon-tile navigation, appointment tracking with colored status badges, and a favorites area with staff initials avatars.

  • Gradient hero homepage with stats strip, category gradient cards, ranked popular-service rows, and staff avatar cards.
  • Service catalog with per-category color accent stripes, popularity badges, compact price/duration, and separate Book and Details actions.
  • Five-step booking flow with a live progress bar — future steps are locked non-clickable spans until reached.
  • Specialist cards show gradient initials avatars, star ratings, and a Recommended badge for any-available.
  • Emerald success screen with appointment ID, four confirmation summary cards, and contextual navigation CTAs.
  • Account hub with gradient avatar hero, six icon tiles (each fills primary on hover), appointment status badges, and favorites with staff initials.

Discovery

  • Home page introduces service categories, popular services, featured staff, and quick booking entry points.
  • Service catalog supports broad browsing and category-specific discovery through `/services` and `/categories/:categorySlug`.
  • Service detail pages provide the context needed before a customer commits to an appointment.
  • Staff listing and staff profile routes let customers choose based on provider identity, specialty, and availability context.

Booking Flow

  • The booking route sequence separates service selection, staff selection, date/time choice, customer details, review, and success.
  • Flow-guarded steps prevent customers from jumping into later stages without the required booking context.
  • The review step gives a final confirmation surface before the appointment is submitted.
  • The success route completes the reservation loop and connects naturally to appointment tracking.

Customer Account

  • Protected account hub gives returning customers a single place to reach appointments, profile, favorites, reviews, and notifications.
  • Appointments are available both as quick access and inside the account area, including dynamic appointment details.
  • Favorites, reviews, and notifications make the demo feel like a returning-customer product, not only a booking form.
  • Settings/profile routes are present as placeholders for future preference editing and richer account management.

Product Readiness

  • The project is built around route documentation, feature modules, view-model hooks, repository contracts, services, and typed models.
  • The current implementation is backend-ready and mock-data-first, with realistic workflows even without production persistence.
  • Known future work includes online payments, deposits, reminders, customer management, campaigns, reports, and multi-location support.
  • Theme support and responsive layouts are included for portfolio-grade presentation across light, dark, and system modes.

Admin Console

Dashboard with weekly chart, appointment triage, calendar, staff management with availability summaries, and customer CRM.

The HadiBook admin console is a full operations workspace for salon owners and managers. The dashboard shows KPI stat cards, a weekly appointment bar chart with per-day tooltips, status-mix proportion bars (confirmed / completed / cancelled), and an upcoming appointment list. Appointments can be filtered by date range and status, and each detail page has a gradient hero with a colored status badge, four summary cards, a notes panel, and a status control action. The staff list shows live availability summaries — working days, hours, and slot interval — with direct edit links. The customer CRM supports search, lifecycle filters, per-customer profiles, spend tracking, and linked appointment history. Services and categories have full CRUD with switch-style active/visible toggles.

  • Dashboard with weekly bar chart (tooltips per day), KPI cards, status-mix bars, and upcoming appointment links.
  • Appointment list with date-range pickers and status chips; detail page with hero, 4 summary cards, notes, and status control.
  • Day-schedule calendar and agenda view for scheduling oversight.
  • Staff cards showing working days, hours, slot interval, and availability edit shortcut.
  • Customer CRM with search, lifecycle filters, per-customer profile, spend, and appointment history.
  • Services and categories CRUD with switch-style active/visible toggles and AppSelect dropdowns.

Scheduling Ops

  • Appointment list route supports filtering and triage for day-to-day service operations.
  • Dynamic appointment detail pages expose status updates and appointment-specific review.
  • Calendar route gives operators a schedule-first day view with agenda context.
  • Dashboard stats provide quick visibility before the operator enters deeper management screens.

Catalog Setup

  • Services module includes list, create, and edit routes for maintaining bookable offerings.
  • Categories can be created, edited, ordered, and toggled for visibility.
  • Staff management covers staff list, creation, and editing for provider records.
  • Availability management is separated per staff member so capacity and scheduling rules remain explicit.

Access Model

  • Admin routes are protected through `ProtectedAdminRoute` and redirect to admin login when needed.
  • The role model includes owner, manager, receptionist, and staff concepts for future finer-grained permissions.
  • Current owner/manager states are represented in the UI even though route-level role restrictions are still planned.
  • Unknown admin paths redirect back to the dashboard, keeping the demo flow contained.

Expansion Points

  • Planned modules include customers, reviews moderation, promotions, reports, notification center management, and reset-password completion.
  • Future backend integration can attach to existing feature modules and repository contracts.
  • Payment deposits, reminder delivery, and multi-location operations are documented post-MVP paths.
  • Admin testing and runtime MSW integration are called out as known project hardening items.