# XWUIHrLiveAttendancePage

Real-time attendance page, built directly on `HrPageBase` (a shell page extending `XWUIShellPage`). Its content area stacks two pieces: an `XWUIHrTimeClock` widget (wired to the page's `hrApi` and `locale`) for clock-in/out, and a small `XWUIDataGrid` populated from `hrApi.listEmployees({ status: 'active' })` with **Employee** (`nameEn`), **Department**, and **Status** columns showing who is currently on the clock. Default page title is "Live Attendance" ("الحضور المباشر" in Arabic). Construct it with page `data` (`title`, `description`) and `conf_comp` carrying `hrApiOptions` plus standard page-base props (`maxWidth`, `centered`, `padding`, aside widths, `className`).

## Basic Usage

Mounts the page against the sandbox HR API; it renders the time-clock widget and then loads the active-employees grid via `listEmployees({ status: 'active' })`.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Constructs XWUIHrLiveAttendancePage with hrApiOptions.env 'sandbox' so the time clock plus the active-employee grid render together.
```

## Arabic locale (RTL)

Passes `{ locale: 'ar' }` with a `titleAr` so the page resolves the Arabic title (`الحضور المباشر`) and renders the time clock and grid 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 attendance 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
```