# XWUIHrBusinessTravelPolicyPage

`XWUIHrBusinessTravelPolicyPage` is the Benefits - Business Travel Policy page (extends `HrPageBase` → `XWUIShellPage`): a corporate-travel rule grid. On mount it injects the shared benefits stylesheet, shows a "Loading…" / "جاري التحميل…" busy state, then calls `hrApi.listBusinessTravelPolicies()` and renders an `xwui-hr-ben` table (via `renderBenTable`) with the columns **Policy name** (`name`), **Last updated** (`lastUpdated`), **Applies to** (`appliesTo`, rendered as a `benTag` pill) and **Status** (`status`, rendered as a colored `benStatusPill`). It shows "No policies found" / "لا توجد سياسات" when empty and an inline "Error: …" message if the API call throws. The default title is "Business Travel Policy" / "سياسة سفر العمل". Configure it with the standard page-base `conf_comp` props (`maxWidth`, `centered`, `padding`, `hideHeader`, `hideBreadcrumbs`, asides, `className`) and data props (`title`, `description`, `breadcrumbs`, `nav`, …).

## Basic Usage

Loads the page against the sandbox HR API (`hrApiOptions: { env: 'sandbox' }`, `locale: 'en'`) and renders the policy table (Policy name / Last updated / Applies-to tag / Status pill) under the "Business Travel Policy" header.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Mounts XWUIHrBusinessTravelPolicyPage against the sandbox HR API and renders the business-travel policy grid with applies-to tags and status pills.
```

## 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
```