# XWUIHrOnboardingPage

List-style shell page (extends `HrListPage`) that tracks new hires through onboarding. It calls `hrApi.listOnboarding()` and renders the results in a grid with three columns: New hire (`nameEn`), Employee info (`employeeInfoStatus`), and Org info (`orgInfoStatus`) - letting HR see which onboarding steps each starter has completed. Configure via `conf_comp` (`hrApiOptions`, `locale`, and the shared shell options `maxWidth`, `padding`, `hideHeader`, `hideBreadcrumbs`, aside controls, `className`); set `title`/`description`/`titleAr` through `data`. Default title is "Onboarding".

## Basic Usage

Builds the Onboarding page in `#app` with an English title and a sandbox HR API, loading new-hire rows from the mock backend.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Renders the Onboarding list page bound to a sandbox IHrApi, listing new hires with their employee-info and org-info statuses.
```

## Arabic Locale (RTL)

Renders the page right-to-left with an Arabic title by passing `locale: 'ar'`.

```example
file: examples/ArabicLocale.ts
html: examples/ArabicLocale.html
title: Arabic Locale (RTL)
description: Renders the page right-to-left with an Arabic title by passing locale 'ar'.
```

## Preloaded Rows

Supplies `data.rows` directly so the grid renders immediately without calling the API.

```example
file: examples/PreloadedRows.ts
html: examples/PreloadedRows.html
title: Preloaded Rows
description: Supplies data.rows directly so the grid renders immediately without calling the API.
```

```api
```