# XWUIHrExpensePolicyPage

Benefits "Expense Policy" HR shell page (extends `HrPageBase`) that lists reimbursement rules as an editable grid. It loads `hrApi.listExpensePolicies()` (showing a localized loading then error/empty state) and renders them via the shared benefits table (`xwui-hr-ben`) with columns Policy name, Last update, Employees covered, Department (first department as a tag plus an `N+` overflow tag), Status (rendered as a `benStatusPill`), and a Publish column exposing a per-row toggle checkbox. The title localizes to "Expense Policy"/"سياسة المصروفات"; construct it with page `title`/`description` data and a `conf_comp` carrying `hrApiOptions` (e.g. `{ env: 'sandbox' }`) and `locale`.

## Basic Usage

Loads the expense policies from the sandbox HR API and renders the reimbursement-rule table with department tags, a status pill, and a per-row publish toggle.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Mounts XWUIHrExpensePolicyPage with an "Expense Policy" title and the sandbox hrApi, then renders the policy grid with department tags, status pills, and publish toggles.
```

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