# XWUIHrInvoiceManagementPage

Spend-management page for accounts-payable invoices. It calls `hrApi.listInvoices()` and renders a four-tile KPI summary row (`renderKpiRow`) - Invoices due (overdue / due soon), Pending approval (with reviewers approved out of total), Amount due (overdue / upcoming, money-formatted via `formatMoney`), and Invoices added (last 30 / last 14 days) - above an `XWUIDataGrid` (striped, hoverable) of invoices with columns for Document no., Vendor, Amount, Status, Due date, and Submitted by. Extends `HrPageBase`/`XWUIShellPage`, supports English/Arabic via the `locale` config, and constructs with `hrApiOptions` (e.g. `{ env: 'sandbox' }`).

## Basic Usage

Loads invoices and their KPIs from the sandbox HR API and renders the due/pending/amount/added KPI tiles plus the invoice data grid with vendor, amount, status, and due-date columns.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Constructs XWUIHrInvoiceManagementPage in sandbox mode to display the invoice KPI row and the XWUIDataGrid of invoices.
```

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