Trip Management
The Bookings page is the central hub for viewing all Turo trips. Trips are imported via CSV or Chrome extension sync and displayed with rich filtering, multiple view modes, and detailed earnings breakdowns.Trip Statuses
| Status | Meaning |
|---|---|
| Completed | Trip has ended and earnings are finalized |
| In Progress | Guest currently has the vehicle |
| Upcoming | Future reservation confirmed |
| Cancelled | Trip was cancelled before or during the rental |
Filtering and Search
Trips can be filtered by:- Status — Completed, In Progress, Upcoming, Cancelled
- Date range — Filter by trip start or end dates
- Vehicle — Show trips for a specific vehicle
- Search — Free-text search across reservation ID, guest name, and vehicle name
BookingFilters component manages all filter state and passes it to the data hook.
View Modes
Table View
Table View
The default view. Shows trips in a sortable table with columns for vehicle, guest, dates, duration, earnings, and status. Each row is clickable to open the detail panel. Component:
BookingsTable with BookingRow.Card View
Card View
A grid of trip cards for a more visual layout. Each card shows key trip info at a glance. Component:
BookingCard.Calendar View
Calendar View
A Gantt-style calendar showing trips as horizontal bars across a date grid, grouped by vehicle. Useful for spotting scheduling gaps and overlaps. Components:
CalendarGrid, CalendarVehicleRow, CalendarBookingBar.ViewToggle component in the page header.
Booking Detail Panel
Clicking a trip opensBookingDetailPanel, a slide-over panel showing:
- Full trip dates and duration
- Guest information
- Complete earnings breakdown (via
EarningsBreakdown) - Fee details (via
FeesSection) - Trip metrics (via
TripMetrics)
Header Statistics
TheHeaderStats / BookingStats components display aggregate stats above the trip list: total trips, total earnings, average per trip, and average duration for the current filter selection.
Key Components
| Component | Purpose |
|---|---|
BookingsTable | Main table view with sortable columns |
BookingCard | Card view for individual trips |
BookingDetailPanel | Slide-over with full trip details |
BookingFilters | Status, date, vehicle, and search filters |
CalendarGrid | Gantt-style calendar view |
EarningsBreakdown | Line-by-line earnings for a trip |
ViewToggle | Switch between table, card, and calendar views |
SelectionActionBar | Bulk actions for selected trips |
Data Source
Trips come from thetrips table, populated by CSV import or Chrome extension sync. The useBookings hook in src/hooks/useBookings.ts handles fetching with filter parameters.