# XWUIHrAdminDashboardPage

HR admin landing dashboard that fetches workforce insights via `hrApi.getInsights()` and renders them as a KPI strip inside an `XWUIDashboard`. It surfaces four headline tiles built from the `InsightsKpis` payload - Employees (total headcount, info), Active Today (success), Open Roles (warning), and Avg Tenure in years (neutral) - laid out in up to four columns. Extends `HrInsightsPageBase`, so passing `kpis` directly in `data` skips the API call and renders immediately. Use it as the top-level HR overview page; accepts standard page-base `conf_comp` props plus `hrApiOptions` and `locale`.

## Basic Usage

Loads the page against the sandbox HR API and renders the four-tile KPI dashboard (Employees, Active Today, Open Roles, Avg Tenure) from the insights payload.

```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 insights and renders the KPI strip.
```

## Arabic locale (RTL)

Passes `{ locale: 'ar' }` with a `titleAr`, so the page resolves the Arabic title and renders its KPI strip and status copy 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 dashboard.
```

## 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 dashboard column.
```

```api
```