Bookings
The booking workflow pages — list and map booking entry, the dispatch planner, auto-assigned and intercity bookings, cancellations, call-flow summary and PNR lookup.
The Bookings area covers the whole trip lifecycle, from taking a call to dispatching a
vehicle and looking a trip up afterwards. It groups eight pages: two booking-entry screens
(bookingV1.html for form entry, bookingV2.html for map entry), the live dispatch board
(bookingPlanner.html), two trip lists (autoAssignedBookings.html, intercityBookings.html),
and three report/lookup screens (cancelledBooking.html, callFlow.html, pnr.html).
The list and report pages are standard DataTables screens — see Tables for sorting, the per-column search row and the multi-filter panel they all share. Every page is assembled from the kit's shared layout (header, sidebar, page header, card panels and a responsive grid); see Layout.
Booking — List View (bookingV1.html)
The primary manual booking screen. A call agent uses it to capture a new trip while a caller is on the line. It is a two-column layout: a vehicle-availability accordion on the left and the full booking form on the right.
The left column is a Bootstrap accordion with four collapsible panels:
| Accordion panel | Contents |
|---|---|
| Custom Vehicle Search | Look up a vehicle by number, registration or mobile; expands a full details table (driver, model, seat capacity, current location, today/total collection, pending target). |
| Consolidated Details | Live status counts — Free, Running, Allotted, Break, Leave — with total and assigned vehicle totals. |
| Free Vehicle | Table of available vehicles (vehicle, location, distance) with a live count badge. |
| Assigned Vehicle | Vehicles already on assigned trips, same columns. |
The right column is #bookingForm. Key fields: Caller Mobile, Unique ID (read-only), Call Type
(Booking / Enquiry / Follow-up / Feedback / VNA), Customer Name and Mobile, Zone, Pickup and Drop
Location, Passengers, Preferred Model, Tariff Type (Local / Rental / Outstation / Airport /
Package), three switches (Schedule Booking, Round Trip, Emergency), Pickup Date/Time, Landmark,
Remarks, Follow-up Mobile, Landline, Number of Vehicles and Accessories. Actions are Reset
and Book Now. The location/model/zone selects are Select2 dropdowns — see
Forms.
Customize: Field options live in the page markup (callType, tariffType) or are populated from
assets/js/pages/shared/data.js via assets/js/pages/bookings/bookingV1.js. Add or remove
form fields in the .row blocks; drop an unused accordion panel by deleting its markup from the
left column.
Booking — Map View (bookingV2.html)
A full-screen map-based dispatch alternative to the form view, for agents who allocate by
seeing where vehicles are. It renders a Google Map (#bookingMap, loaded with a mapAPIKey
and marker clustering) with floating panels overlaid.
- Quick Booking panel (left, collapsible): a condensed form — Mobile, Name, Pickup, Drop, Vehicle Model, Pax — plus Book Now / reset. Below it, four clickable vehicle stat cards (Free, Running, Allotted, Offline) that double as map filters.
- Info panel (right, collapsible): shows context for the current selection in three sections — Route Info (distance, duration, estimated fare with a base/distance/time fare breakdown), Nearby Vehicles (count + list), and Vehicle Info (driver, mobile, status badge, location, distance) with an Assign Vehicle action.
- Map controls (zoom in/out, center, refresh vehicles) and a Legend keyed to the marker colours: Free (green), Running (blue/primary), Allotted (amber), Offline (red).
Customize: Set your Google Maps key where mapAPIKey is defined; map behaviour, marker
data and fare math live in assets/js/pages/bookings/bookingV2.js. Marker colours map to the
same statuses as the stat cards — keep the two in sync if you rename a status. Responsive
behaviour stacks the panels below the map on tablet/mobile.
Booking Planner (bookingPlanner.html)
A live dispatch board showing what needs attention now, split into six time-bucketed tables across two columns. Dispatchers use it to work the queue by urgency.
- Allot (left column): bookings still needing a vehicle — Next 20 Min, Next 60 Min, More Than 60 Min.
- Drop (right column): vehicles about to free up — Next 15 Min, Next 30 Min, Next 60 Min.
The Allot tables carry columns like Customer, Vehicle / Taxi-Type, Pickup, From and To; the Drop
tables show VID, Pickup Time, ETD, From, Location and To. All use dt-wrapper-auto-height so
each panel sizes to its rows rather than paginating.
Customize: The time buckets, table data and refresh interval are driven by
assets/js/pages/bookings/bookingPlanner.js. Add or remove a bucket by copying a card panel
block and giving its table a new id; adjust columns in the matching thead.
Auto-Assigned Bookings (autoAssignedBookings.html)
A DataTable of regular/recurring trips that the dispatch engine assigned automatically (e.g. standing daily pickups). Operations staff review and adjust these assignments.
Columns: row checkbox, #, Customer Name, Mobile, From, To, Vehicle Type, Pickup Time, Days in
Week, Fare, Status and Action. A hidden multi-filter panel (#show_multiple_filter_div) and the
per-column search/select row (apply_search / apply_select) come from the shared table setup.
Customize: Columns and search affordances are set in the thead; data and row actions live
in assets/js/pages/bookings/autoAssignedBookings.js. See Tables for
the filter panel and column-search wiring.
Intercity Bookings (intercityBookings.html)
A DataTable for outstation / intercity trips, which carry extra route and return-date fields that local bookings don't.
Columns: row checkbox, #, Booking ID, Customer Name, Mobile, From City, To City, Trip Type, Journey Date, Return Date, Vehicle Type, Status and Action. Same hidden multi-filter panel and column search/select row as the other list pages.
Customize: Edit the thead for columns; data and actions are in
assets/js/pages/bookings/intercityBookings.js. The Trip Type and Vehicle Type columns use
apply_select filters — populate their options from your trip-type list.
Cancelled Bookings (cancelledBooking.html)
A report listing cancelled trips with who cancelled and why, used for refund handling and loss analysis.
Columns: row checkbox, #, PNR, Customer, Phone, From, To, Amount, Cancelled By and Reason. The
Cancelled By and Reason columns are apply_select filters so you can slice by cancellation
source or reason; a date-range multi-filter panel is available.
Customize: Driven by assets/js/pages/reports/cancelledBooking.js. Define your cancellation
reason and source lists there so the column filters and any charts stay consistent.
Call Flow (callFlow.html)
A call-summary report that aggregates inbound calls by type rather than listing individual trips — a quick read on how call volume converts into bookings.
Columns: row checkbox, S.No, Call Type, No of Calls, Percentage, Avg Duration and Trend. The
Call Type values mirror the Call Type field on bookingV1
(Booking, Enquiry, Follow-up, Feedback, VNA), and Trend is an apply_select filter.
Customize: Aggregation and the trend indicator come from
assets/js/pages/reports/callFlow.js. Keep the call-type list aligned with the booking form's
callType options so the summary totals match.
PNR Lookup (pnr.html)
A booking-record lookup keyed by PNR, with a KPI strip on top and a full searchable table below. Used to find and track any trip after the fact.
The top row holds four summary cards — Total Bookings, Completed Trips, Total
Revenue and Cancelled Trips (these are the same KPI tiles documented in
Widgets). Table columns: row checkbox, #, PNR, Booking Date, Customer,
Pickup, Drop, Vehicle Type, Fare, Payment, Trip Status and Action. Payment, Vehicle Type and
Trip Status are apply_select filters.
Customize: The summary-card totals and table data are computed in
assets/js/pages/reports/pnr.js; point them at your own dataset. The PNR shown here is the same
identifier surfaced on the Cancelled Bookings report,
so keep the PNR format consistent across both.
Was this page helpful?