# XWUIHrAccountingIntegrationPage

Payroll connector page that lists the ERP/accounting apps wired up for journal automation. It calls `hrApi.listAccountingIntegrations()` and renders one card per integration showing the app name, a connected/pending status pill (the integration's `state` text), the `percentComplete` value, and a progress bar filling to that percentage. Use it as the shell page where HR/finance admins review which accounting apps are connected and how far each setup has progressed. Accepts the standard page-base `conf_comp` props (`maxWidth`, `centered`, `padding`, `hideHeader`, `hideBreadcrumbs`, `className`) plus `hrApiOptions` and `locale`; data props include `title`, `titleAr`, and `description`.

## Basic Usage

Loads the page against the sandbox HR API and renders the accounting-integration cards (app name, connection status pill, percent-complete, and progress bar) for each connected/pending app.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Constructs the page with title/description data and `{ hrApiOptions: { env: 'sandbox' }, locale: 'en' }`, then fetches and renders the integration cards.
```

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