# XWUIHrSpendDashboardPage

Spend and expenses overview shell page that fetches a spend summary via `hrApi.getSpendSummary()` and renders three sections: quick-action buttons for "Create expense claim" and "Create expense report" (each emitting an `xwui-spend-action` CustomEvent), a KPI row showing approved-claims spend and travel spend with transaction counts, and a pending-requests `XWUIDataGrid` listing ID, requested-on date, requester, report name, expense-claim count, and formatted amount. Supports English/Arabic via `locale` and accepts the standard shell `conf_comp` layout keys (`maxWidth`, `centered`, `padding`, `hideHeader`, `hideAsideStart`, etc.). Use it as the landing page for an employee or manager expense-management area.

## Basic Usage

Mounts the page against `#app` with a title and description, loading sample spend data from `createHrApi({ env: 'sandbox' })` in English.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Spend dashboard wired to the sandbox HR API, rendering quick actions, spend KPIs, and the pending-requests grid.
```

## 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 spend dashboard in Arabic with a right-to-left layout; numbers and titles 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 spend dashboard in a 720px centred column with breadcrumbs hidden, for an embedded finance overview panel.
```

```api
```