# XWUIHrReportsHubPage

Shell page that serves as the landing hub for HR reporting, extending `HrPageBase` (and through it `XWUIShellPage`) with a default title of "Reports". In its current form `afterSetupDOM` only appends a single `xwui-hr-page-note` paragraph placeholder into the content region, so it provides the framed page chrome (header, breadcrumbs, optional asides via the shared `conf_comp` keys) ready to host report cards or links. Use it as the entry point in an HR navigation tree where downstream report pages will hang.

## Basic Usage

Mounts the Reports hub page against `#app` with a title/description, wired to a mock/sandbox `IHrApi` (`hrApiOptions: { env: 'sandbox' }`, `locale: 'en'`).

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Renders the Reports hub shell page in English so the page chrome and placeholder content region appear.
```

## Payroll Reports Hub

Frames the reports hub for the payroll and compliance category, with breadcrumbs and a closed-run footer setting up the landing area.

```example
file: examples/PayrollReportsHub.ts
html: examples/PayrollReportsHub.html
title: Payroll Reports Hub
description: Renders XWUIHrReportsHubPage titled "Payroll & Compliance Reports" with Reports / Payroll breadcrumbs and a footer, framing the chrome for payslip-register and GOSI-summary report cards.
```

## Arabic Reports Landing

Presents the reports hub as an Arabic (RTL) HR portal landing page with localized title and breadcrumbs.

```example
file: examples/ArabicReportsLanding.ts
html: examples/ArabicReportsLanding.html
title: Arabic Reports Landing
description: Mounts XWUIHrReportsHubPage in Arabic (locale 'ar') so the localized title, description, and breadcrumbs render RTL as the entry point for employee, attendance, and payroll report categories.
```

```api
```