# XWUIHrExpenseClaimsPage

Scoped expense-claims HR shell page (extends `HrScopedListPage` → `HrPageBase`) with three scope tabs - My / Team / Org-wide expense claims - that re-fetch on switch via `hrApi.listExpenseClaims(scope)`. Each scope renders three KPI tiles (claims pending approval count, total amount pending, total amount approved in `success` tone) above a data grid of claims with columns ID, Created on, Requested by, Date of purchase, Merchant, Amount (currency-formatted via `formatMoney`), Attachment (📎 when present), Status, Category, and Report name. Construct it with page `title`/`description` data and a `conf_comp` carrying `hrApiOptions` (e.g. `{ env: 'sandbox' }`) and `locale`.

## Basic Usage

Loads the "My / Team / Org-wide" expense-claim scopes from the sandbox HR API and renders the pending/approved KPI tiles above a claims grid with merchant, amount, attachment, and status columns.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Mounts XWUIHrExpenseClaimsPage with an "Expense Claims" title and the sandbox hrApi, then renders the scope tabs, the pending/approved KPIs, and the claims grid.
```

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