# XWUIHrEmployeeDashboardPage

Employee self-service (ESS) home page (default title "My Dashboard" / "لوحة التحكم") that composes six HR widgets into a three-row `xwui-hr-ess-dashboard` grid. On load it fetches all data in parallel via `Promise.all` over `hrApi.listLeaveBalances()`, `listPendingTasks()`, `listWhoIsOff()`, `listAttendance({ pageSize: 5 })`, and `listCalendarEvents()`, then mounts: a **time clock** (`XWUIHrTimeClock`) and **pending tasks** (`XWUIHrPendingTasks`) in the top row; **leave-balance cards** (`XWUIHrLeaveBalanceCards`) and **who-is-off** (`XWUIHrWhoIsOff`) in the middle row; and **attendance history** (`XWUIHrAttendanceHistory`, last 5 entries) plus an **events calendar** (`XWUIHrEventsCalendar`) in the bottom row. Built on `HrPageBase` (extends `XWUIShellPage`); accepts the standard page props plus `hrApiOptions` and `locale` (propagated to every child widget). Use it as the landing page of the employee portal.

## Basic Usage

Loads leave balances, pending tasks, who-is-off, recent attendance, and calendar events from the sandbox HR API in parallel, then renders the full six-widget ESS dashboard grid.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Constructs XWUIHrEmployeeDashboardPage against createHrApi({ env: 'sandbox' }) and renders the time clock, pending tasks, leave-balance cards, who-is-off, attendance history, and events calendar.
```

## Arabic locale (RTL)

Passes `{ locale: 'ar' }` with a `titleAr` so the page resolves the Arabic title (`لوحتي`) and renders 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 page.
```

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

```api
```