# XWUIHrContributionsPage

Payroll/HR shell page for statutory contributions (default title "Statutory Contributions"), built on `HrPageBase` (extends `XWUIShellPage`). It is currently a scaffold: `afterSetupDOM` appends a single `xwui-hr-page-note` paragraph reading "Statutory Contributions" into the page content area, with no API fetch wired in yet. It accepts the standard page props (`title`, `titleAr`, `description`, `breadcrumbs`, `toolbar`, `asideStart`/`asideEnd`, `footer`) and `hrApiOptions` for the HR API environment. Use it as the landing page slot for employee statutory-contribution data (e.g. social-insurance / GOSI-style deductions) within the HR shell.

## Basic Usage

Mounts the Statutory Contributions page in the HR shell against the sandbox API, rendering the page chrome (title/description) and the "Statutory Contributions" content note.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Constructs XWUIHrContributionsPage with title 'Statutory Contributions' against createHrApi({ env: 'sandbox' }), rendering the page shell and its content note.
```

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