Dashboard & Analytics

The Dashboard & Analytics system provides a comprehensive real-time overview of hotel operations, including booking arrivals/departures, financial metrics, and recent booking activity. This system serves as the primary landing page for hotel administrators and offers interactive data visualization with date filtering capabilities.

For information about the core booking system that feeds this dashboard, see Core Booking System. For details about user management and access control, see User Management.

System Architecture

The Dashboard & Analytics system follows a Model-View-Controller (MVC) architecture with AJAX-powered real-time updates. The system integrates with the multi-tenant booking database to aggregate and display key operational metrics.

Database Layer

AJAX Endpoints

Dashboard MVC Architecture

Dashboard Controller
Dashboard.php

Dashboard Model
DashboardModel.php

Dashboard View
home.php

Frontend JavaScript
frontjavascript.php

get() method
Filtered booking data

getallcount() method
Financial metrics

hotel_booking_bookings
Multi-tenant booking data

hotel_booking_setup
Configuration data
    

Dashboard Components

The dashboard consists of three main interactive sections that provide real-time operational insights:

Arrivals and Departures Tables

These tables display filtered booking data with date-based switching capabilities:

Data Tables

AJAX Data Flow

Date Filter Buttons

Yesterday Button
data-type='yesterday'

Today Button (Active)
data-type='today'

Tomorrow Button
data-type='tomorrow'

ajaxSend() function
whichfunction: 'arrivals'

ajaxSend() function
whichfunction: 'departures'

#arrivals tbody
Check-in bookings

#departures tbody
Check-out bookings
    

The tables display booking ID, customer name, adults count, rooms, check-in/out dates, and color-coded status badges.

Financial Analytics Cards

The finance section displays aggregated booking metrics in a grid layout:

Event Timeline

Recent booking activity is displayed in an interactive timeline format with booking details and status indicators.

Data Flow and AJAX Operations

The dashboard uses a sophisticated AJAX system for real-time data updates without page refreshes:

"hotel_booking_bookings"
"DashboardModel"
"Dashboard Controller"
"frontjavascript.php"
User
"hotel_booking_bookings"
"DashboardModel"
"Dashboard Controller"
"frontjavascript.php"
User
whichfunction, allData, pagelimit params
Click date filter button
Update timestatus variable
AJAX GET /dashboard/get
getSearchAll(searchMain, whichfunction)
Filter by admin_uid and date
Filtered booking results
Query builder with data
Apply status color mapping
JSON response with formatted data
joinmainData() or joinEventData()
Update table/timeline display
    

Key JavaScript Functions:

• ajaxSend() - Main AJAX request handler
• joinmainData() - Renders table rows for arrivals/departures
• joinEventData() - Renders event timeline items
• countData() - Fetches financial metrics

Financial Analytics Implementation

The financial dashboard aggregates booking data using specialized model methods:

Metrics Output

Database Queries

Analytics Methods

bookingCount(column, allcount)
Counts non-null records

bookingTotal(column)
Sums column values

SELECT COUNT(*)
WHERE admin_uid AND column IS NOT NULL

SELECT SUM(column)
WHERE admin_uid AND column != '0.00'

Gross Booking Value
SUM(total_room_gross_amount)

Taxes Value
SUM(total_room_vat_total)

Revenue
SUM(total_received)

Total Bookings
COUNT(total_booking)

Nights Booked
SUM(total_room_nights)
    

The getallcount() endpoint returns a structured array of metrics with value, name, and type fields for frontend rendering.

User Interface Components

Status Color Coding

Booking statuses use a consistent color mapping system:

$colorMap = [
    '#198754' => 'Check In',      // Green
    '#ffca2c' => 'Reserved',      // Yellow
    '#0d6efd' => 'Temporary Reserved', // Blue
    '#6c757d' => 'Check Out'      // Gray
];
    

Responsive Design

The dashboard uses Bootstrap grid system with responsive breakpoints defined in the CSS:

• Mobile: Single column layout with centered filter buttons
• Tablet: Two-column finance cards
• Desktop: Three-column finance cards with full table display

Multi-tenant Integration

The dashboard respects the multi-tenant architecture by filtering all data queries with the current user's admin_uid:

• session->get('uid') - Current tenant ID
• hotel_booking_bookings WHERE admin_uid = ?
• hotel_booking_setup WHERE admin_uid = ?
• permissionvaluecheck() - View access validation

All AJAX endpoints validate user permissions before returning data, ensuring tenant isolation and security.