# XWUIHrPostpaidBillingPage

A benefits HR shell page (extends `HrPageBase` → `XWUIShellPage`) that surfaces the status of the gated travel-credit / postpaid-billing facility - typically a waitlist notice. On load it calls the HR API's `getTravelCreditStatus()` and renders a centered status card (clock icon, `status.title` heading, and `status.message` body) inside a `role="status"` region, with shared benefits styling applied via `ensureBenefitsStyles()`; failures render an inline error line instead. Configure the source with `conf_comp.hrApiOptions` (default `{ env: 'sandbox' }`) or `conf_comp.hrApi`, and set `conf_comp.locale` to localize the default title ("Postpaid Billing" / "الدفع الآجل") and error prefix. Use it to inform employees that postpaid travel credit is pending or not yet available.

## Basic Usage

Mounts the page against a sandbox HR API so it fetches and displays the current travel-credit facility status (e.g. a waitlist message).

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Instantiates XWUIHrPostpaidBillingPage with createHrApi({ env: 'sandbox' }) in English, rendering the travel-credit status card from getTravelCreditStatus().
```

## Arabic Waitlist Notice

Shows the postpaid travel-credit facility as an Arabic (RTL) benefits-portal page with localized breadcrumbs and footer.

```example
file: examples/ArabicWaitlistNotice.ts
html: examples/ArabicWaitlistNotice.html
title: Arabic Waitlist Notice
description: Mounts XWUIHrPostpaidBillingPage in Arabic (locale 'ar') so getTravelCreditStatus() renders the waitlist card RTL, with localized title, breadcrumbs, and a next-quarter activation footer.
```

## Compact Facility Status

Embeds the facility status as a headerless, narrow inline widget suitable for a benefits dashboard column.

```example
file: examples/CompactFacilityStatus.ts
html: examples/CompactFacilityStatus.html
title: Compact Facility Status
description: Renders the travel-credit status with hideHeader and hideBreadcrumbs and a 480px maxWidth, producing a compact status card that drops into a benefits dashboard.
```

```api
```