Skip to main content
Jabulani is the merchant-facing dashboard application that provides comprehensive tools for managing a reservation-based business.

​
Overview

  • Port: 5173
  • Purpose: Merchant dashboard and business management
  • Authentication: Required for all routes except signup
  • Tech Stack: React 19, TanStack Router, TanStack Query, Tailwind CSS 4

​
Key Features

Calendar Management

Interactive calendar with drag-and-drop booking management powered by FullCalendar

Customer Database

Complete customer relationship management with booking history and analytics

Service Catalog

Manage services, categories, pricing, and scheduling settings

Team Management

Employee scheduling, permissions, and availability

Analytics Dashboard

Revenue tracking, booking statistics, and business insights

Business Settings

Configure business hours, locations, integrations, and preferences

​
Technology Stack

​
Core Dependencies

From frontend/apps/jabulani/package.json:
  • @fullcalendar/react (^6.1.20) - Calendar component with multiple views
  • @fullcalendar/daygrid (^6.1.20) - Month and day grid views
  • @fullcalendar/timegrid (^6.1.20) - Time-based calendar views
  • @fullcalendar/interaction (^6.1.20) - Drag-and-drop functionality
  • @fullcalendar/list (^6.1.20) - List view for bookings
  • @mapbox/search-js-react (^1.5.1) - Location search and mapping
  • recharts (^3.6.0) - Revenue charts and analytics visualization

​
Shared Dependencies

  • React 19.2.3 - Latest React version
  • TanStack Router 1.147.1 - File-based routing
  • TanStack Query 5.90.16 - Server state management
  • @reservations/components - Shared UI components
  • @reservations/lib - Shared utilities and hooks
  • @reservations/assets - Shared icons and images

​
Application Structure

​
Route Organization

Jabulani uses nested layouts for consistent UI structure:
routes/
├── __root.jsx              # Root layout
├── index.jsx               # Landing page
├── _authenticated/         # Auth-required routes
│   ├── signup/            # Merchant onboarding
│   └── _sidepanel/        # Main app with sidebar
All main application features are nested under _authenticated/_sidepanel/ to ensure consistent navigation and layout.

​
Core Features

​
Dashboard

Route: _authenticated/_sidepanel/dashboard.jsx Provides business overview with:
1

Key Metrics

StatisticsCard components showing:
  • Total revenue (with period comparison)
  • Number of bookings (with growth indicators)
  • Customer counts and trends
  • Service performance metrics
2

Revenue Analytics

RevenueChart component powered by Recharts:
  • Daily, weekly, monthly revenue visualization
  • Period-over-period comparisons
  • Interactive charts with filtering
3

Recent Activity

BookingsList component showing:
  • Upcoming bookings
  • Recent customer activity
  • Quick action buttons
4

Inventory Alerts

LowStockProductsAlert component:
  • Product inventory warnings
  • Restock notifications
  • Direct links to product management

​
Calendar Management

Route: _authenticated/_sidepanel/calendar/index.jsx Interactive booking calendar with:
  • Calendar Component (FullCalendar integration)
    • Day, week, month, and list views
    • Drag-and-drop booking management
    • Color-coded events by service or employee
    • Time slot blocking and availability management
  • Booking Management
    • NewBookingPanel - Create bookings with customer/service selection
    • CalendarSidePanel - View and edit booking details
    • RecurSection - Recurring booking configuration
    • ParticipantManager - Multi-participant bookings
  • Customer Integration
    • CustomerSelector - Search and select existing customers
    • CustomerProfile - Quick customer info view
    • Inline customer creation
  • Advanced Features
    • BlockedTimePanel - Mark unavailable time periods
    • DragConfirmationModal - Confirm booking time changes
    • DeleteBookingPopoverContent - Safe booking deletion

​
Customer Management

Routes: _authenticated/_sidepanel/customers/ Complete CRM system:

Customer List

CustomersTable with AG Grid:
  • Searchable, sortable customer database
  • Quick actions (edit, view, blacklist)
  • Booking history indicators (BookingRing)
  • Bulk operations

Customer Details

Individual customer view ($customerId/index.jsx):
  • Complete booking history
  • Customer statistics (CustomerStats)
  • Revenue and visit analytics (BookingDonutChart)
  • Notes and preferences (ExpandableNote)

Customer Forms

Create and edit customers:
  • new.jsx - New customer form
  • edit.$id.jsx - Edit existing customer
  • Form validation and autofill

Special Functions

Customer management tools:
  • BlacklistModal - Manage restricted customers
  • TransferAppsModal - Move bookings between customers
  • Blacklist view (_layout/blacklist.jsx)

​
Service Management

Routes: _authenticated/_sidepanel/services/ Service catalog and configuration:
  • Service Listing (index.jsx)
    • ServiceCategoryCard - Organized by category
    • ServiceCard - Individual service display
    • Quick edit and reorder
  • Service Creation/Editing
    • new.jsx / edit.$id.jsx - Standard services
    • ServicePage component with:
      • ServicePhases - Multi-phase service configuration
      • ServiceSchedulingSettings - Booking rules and duration
      • ProductAdder - Link products to services
  • Group Services (group/)
    • GroupServicePage - Configure group bookings
    • Capacity and participant management
    • Special pricing rules
  • Category Management
    • AddServiceCategoryModal - Create categories
    • EditServiceCategoryModal - Edit categories
    • Drag-and-drop reordering

​
Team Management

Routes: _authenticated/_sidepanel/team/ Employee scheduling and management:
  • Employee Directory (index.jsx)
    • EmployeeTable - Staff listing with AG Grid
    • Role and permission indicators
    • Quick access to schedules
  • Employee Details ($id.jsx)
    • EmployeePage component
    • Schedule and availability
    • Performance metrics
    • Service assignments
  • Employee Forms
    • new.jsx - Add new team member
    • edit.$id.jsx - Edit employee details
    • Permission and service assignment

​
Business Settings

Route: _authenticated/_sidepanel/settings.jsx Comprehensive business configuration with tabbed sections:
_pages/merchant.jsx:
  • Business name and branding (MerchantNameModal)
  • Logo and image upload (ImageUploader)
  • Location management with Mapbox integration
  • Contact information
Additional Settings Features:
  • SettingsNavigation - Tabbed navigation component
  • DangerZone - Critical actions (account deletion, etc.)
  • RadioInputGroup - Settings option selector

​
Product Inventory

Route: _authenticated/_sidepanel/products/index.jsx Manage retail products and inventory:
  • ProductsTable - AG Grid with product listing
  • ProductModal - Create/edit products
  • Stock level tracking
  • Integration with LowStockProductsAlert on dashboard

​
Integrations

Route: _authenticated/_sidepanel/integrations/index.jsx Third-party service connections and API integrations.

​
Onboarding Flow

Route: _authenticated/signup/ New merchant setup process:
1

Business Information

MerchantInfoForm component:
  • Business name and type
  • Industry selection
  • Initial configuration
2

Location Setup

LocationPicker component:
  • Address entry with Mapbox search
  • Map-based location selection
  • Service area configuration
3

Initial Setup

Guide merchants through:
  • First service creation
  • Business hours configuration
  • Team member addition (optional)

​
Key Components

Shared components used throughout Jabulani:

​
Dashboard Components

  • StatisticsCard - Metric display with change indicators
  • StatisticsChangeIndicator - Period-over-period comparison
  • RevenueChart - Recharts-based revenue visualization
  • BookingsList - Upcoming bookings preview
  • LowStockProductsAlert - Inventory warnings

​
Calendar Components

  • Calendar - FullCalendar integration
  • CalendarModal - Booking detail modal
  • CalendarSidePanel - Booking information sidebar
  • NewBookingPanel - Create booking interface
  • BlockedTimePanel - Unavailability management
  • DragConfirmationModal - Confirm booking changes

​
Form Components

  • CustomerSelector - Customer search and selection
  • ServiceSelector - Service picker
  • ParticipantManager - Multi-participant handling
  • RecurSection - Recurring booking settings

​
Data Components

  • CustomersTable / EmployeeTable / ProductsTable - AG Grid tables
  • TableActions - Row action buttons
  • BookingDonutChart - Customer analytics
  • CustomerStats - Customer metrics

​
Development

​
Running Jabulani

# Start development server on port 5173
npm run dev-jabulani

# Build for production
npm run build-jabulani

​
Development Features

  • Hot module replacement (HMR)
  • API proxy to backend at /api
  • Local domain support (.reservations.local)
  • React DevTools integration
  • TanStack Query DevTools

Frontend Overview

Learn about the frontend monorepo architecture

Tango Booking

Explore the customer-facing booking interface

Build docs developers (and LLMs) love

Get started for freeTalk to us