# XWUIHrFlightBookingsPage

Benefits page that lists employee flight-travel requests. It calls `hrApi.listFlightBookings()` and renders a promo banner ("New: book now using your payment card") above a shared benefits table (`renderBenTable`) with columns for Request ID, Created on, Traveler, Destinations (origin → / ⇄ destination), Departs on, and a colored Status pill (Pending booking, Booked, Expired, Cancelled). Extends `HrPageBase`/`XWUIShellPage`; localizes to English or Arabic via the `locale` config and constructs with `hrApiOptions` (e.g. `{ env: 'sandbox' }`).

## Basic Usage

Loads flight travel requests from the sandbox HR API and renders the promo banner plus the bookings grid with traveler, route, departure date, and status columns.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Constructs XWUIHrFlightBookingsPage in sandbox mode to display the flight travel-request table.
```

## Arabic locale (RTL)

Passes `{ locale: 'ar' }` with a `titleAr` so the page resolves the Arabic title (`حجوزات الطيران`) and renders right-to-left.

```example
file: examples/ArabicLocale.ts
html: examples/ArabicLocale.html
title: Arabic locale (RTL)
description: Arabic title via titleAr plus locale 'ar' for a right-to-left page.
```

## Constrained, centered layout

Caps the content column at 1200px, centers it, and adds roomier padding via the shell-page config.

```example
file: examples/ConstrainedLayout.ts
html: examples/ConstrainedLayout.html
title: Constrained, centered layout
description: `{ maxWidth: '1200px', centered: true, padding: '2rem' }` constrains and centers the page column.
```

```api
```