> ## Documentation Index
> Fetch the complete documentation index at: https://dhanurgo.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Trip Management

> How trips are displayed, filtered, and inspected in the bookings view

# 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

The `BookingFilters` component manages all filter state and passes it to the data hook.

## View Modes

<Accordion title="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`.
</Accordion>

<Accordion title="Card View">
  A grid of trip cards for a more visual layout. Each card shows key trip info at a glance. Component: `BookingCard`.
</Accordion>

<Accordion title="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`.
</Accordion>

Toggle between views using the `ViewToggle` component in the page header.

## Booking Detail Panel

Clicking a trip opens `BookingDetailPanel`, 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

The `HeaderStats` / `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 the `trips` table, populated by CSV import or Chrome extension sync. The `useBookings` hook in `src/hooks/useBookings.ts` handles fetching with filter parameters.