# XWUIHrPayrollInputsPage

Shell page (extends `HrPageBase`) that serves as the Monthly Inputs screen of the payroll workflow, where per-period payroll adjustments are captured. In its current form `afterSetupDOM` appends a "Monthly Inputs" note paragraph (`p.xwui-hr-page-note`) into the page content area after the base setup runs. Configure through `conf_comp` (`hrApiOptions`, `locale`, plus the shared shell options `maxWidth`, `padding`, `hideHeader`, `hideBreadcrumbs`, aside controls, `className`); pass `title`/`description`/`titleAr` via `data`. Default title is "Monthly Inputs".

## Basic Usage

Builds the Monthly Inputs page in `#app` with an English title and a sandbox HR API.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Renders the Monthly Inputs payroll page bound to a sandbox IHrApi, with its Monthly Inputs content note.
```

## Bonus Cycle Inputs

The Monthly Inputs screen scoped to a December annual-bonus run, with drill-down breadcrumbs and a capped column.

```example
file: examples/BonusCycleInputs.ts
html: examples/BonusCycleInputs.html
title: Bonus Cycle Inputs
description: Renders the Monthly Inputs page for the December annual-bonus run with Payroll → Dec 2026 → Inputs breadcrumbs and a 1024px column over a sandbox IHrApi.
```

## Arabic Monthly Inputs

The Monthly Inputs screen localized for an Arabic-first payroll team, with a right-to-left layout.

```example
file: examples/ArabicMonthlyInputs.ts
html: examples/ArabicMonthlyInputs.html
title: Arabic Monthly Inputs
description: Renders the Monthly Inputs page in Arabic via titleAr and locale 'ar', mirroring the layout and breadcrumb trail to right-to-left.
```

```api
```