# XWUIOpsHRLeavePage

Leave-management portal (route `/en/hr/leave`) that extends `XWUIShellPage` with a toolbar (search + Status/Leave Type/Department filters + a date-range picker + a primary "+ New Leave Request" button), a 4-tile KPI strip (Pending · Approved · Rejected · On Leave Today), and a 10-column `XWUIDataGrid`: Employee Code, Full Name (avatar composite), Leave Type chip, From, To, Days, Status, Reason, Submitted On, Actions. The per-row Actions cell branches on `status`: pending rows show inline Approve (success) + Reject (danger) buttons, all others show View + Edit. Leave types cover annual/sick/unpaid/maternity/paternity/compassionate/other (open set), dates use dd/mm/yyyy and `days` is host-precomputed. Drive it with `rows` and the `on*` approval callbacks (onApprove/onReject/onView/onEdit/onNewRequest); Leave Type and Department filter options auto-derive from the rows when not supplied. Use it for HR to track time off and process approval workflows.

## Basic Usage

Leave Management page demonstrating the four canonical row states - pending, an approved leave bracketing today, a historical approved leave, and a rejected request - with filter options auto-derived from the rows.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Four leave requests (pending annual, approved sick, historical approved annual, rejected unpaid) wired to approve/reject/view/edit callbacks, exercising the pending-vs-resolved Actions-cell branching.
```

## Pending Approval Queue

The Leave page as a line-manager's approval inbox where every request is pending across the full leave-type set, exercising the Approve/Reject action branch.

```example
file: examples/PendingApprovalQueue.ts
html: examples/PendingApprovalQueue.html
title: Pending Approval Queue
description: Five pending requests (annual, sick, unpaid, paternity, compassionate) with onApprove/onReject wired as the primary action.
```

## Eid Coverage Planner

A seasonal coverage-planning view inside the Ops shell where approved leaves cluster on the same Eid window, with one rejected for clashing with live-match coverage.

```example
file: examples/EidCoveragePlanner.ts
html: examples/EidCoveragePlanner.html
title: Eid Coverage Planner
description: Overlapping approved annual/compassionate leaves around Eid Al-Adha plus a rejected request, shown as read-mostly history in the shell.
```

```api
```