# XWUIHrSetupUtilityPage

Admin toolkit page for HR - surfaces utility tools such as mass transfer, custom fields, and the report engine as a clickable card grid. Unlike the other Setup pages it extends `HrPageBase` directly (not `HrSetupPage`), loads its tools via `hrApi.listSetupUtilities()`, and renders each `SetupUtilityTool` as a `xwui-hr-ben-card` button with a glyph (`⇄` exchange, `🗒` form, `📊` report, `⚙` fallback), title, and description inside a `xwui-hr-ben-cards` grid. Clicking a card dispatches a bubbling/composed `xwui-setup-utility` CustomEvent carrying `{ id }`. The page is bilingual (`defaultTitle()` returns `Setup - Utility` / `الإعداد - أدوات`) and reuses the shared benefits styles via `ensureBenefitsStyles()`.

## Basic Usage

Mounts the Utility toolkit page against a sandbox mock HR API (`hrApiOptions: { env: 'sandbox' }`, `locale: 'en'`); the tool cards load asynchronously from `listSetupUtilities()` after DOM setup.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Renders the HR admin Utility page as a grid of tool cards (mass transfer, custom fields, report engine) from a sandbox mock IHrApi.
```

## Arabic (RTL)

The page rendered in Arabic with a right-to-left layout - built-in labels, status pills, and loading text localize, and `titleAr` supplies the heading.

```example
file: examples/ArabicLocale.ts
html: examples/ArabicLocale.html
title: Arabic (RTL)
description: The setup-utility tools page in Arabic with a right-to-left layout; labels and loading text localize and titleAr drives the heading.
```

## Embedded Panel

A width-constrained, centred layout (`maxWidth: '720px'`, `centered: true`) with the breadcrumb row hidden - the shape used when the page is dropped into a narrow settings column.

```example
file: examples/EmbeddedPanel.ts
html: examples/EmbeddedPanel.html
title: Embedded Panel
description: The setup-utility tools in a 720px centred column with breadcrumbs hidden, for an embedded admin tools panel.
```

```api
```