# XWUIOpsHRDocumentsPage

Centralised identity-document lifecycle page (route `/en/hr/documents`) that extends `XWUIShellPage` with a 4-tile aging-bucket KPI strip - Expired Passports (red shield), <6 Months (orange warning), 6-12 Months (blue clock), All Valid (green shield) - sitting above a filter row (search + Nationality/Department/Status dropdowns + an All/Expired/<6m/6-12m/Valid quick-filter segmented control) and a responsive paginated grid of `XWUICardEmployeeCompliance` instances, 12 per page. Each card shows the employee (name, EN/AR, code, department, nationality) with a Passport row plus an Iqama row for Non-Saudi profiles, every doc cell colour-coded valid/expiring/expired/missing. Drive it with the `kpis` aggregates, the current-page `employees` array, `currentPage`/`pageSize`/`totalEmployees`, and `initialBucket`; use it as the HR landing dashboard for forecasting passport/Iqama renewals across the full 1226-employee workforce.

## Basic Usage

Documents Overview page with OPFlow-spec KPI totals and six representative compliance cards exercising every document state.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: KPI strip totals (156 expired passports / 36 <6m / 32 6-12m / 1002 valid) over a page of six employee compliance cards mixing valid, expiring and expired passports plus Saudi profiles with no Iqama.
```

## Passport Renewal Queue

Opens straight onto the "Less Than 6 Months" aging bucket so HR works only the near-term passport-renewal cohort.

```example
file: examples/ExpiringPassportRenewalQueue.ts
html: examples/ExpiringPassportRenewalQueue.html
title: Passport Renewal Queue
description: Pre-filtered to the <6 months bucket with every card showing a passport in the expiring state within the next half-year, mixing Saudi and Non-Saudi crew.
```

## Missing-Iqama Compliance Audit

A government-audit view inside the Ops shell isolating Non-Saudi crew whose Iqama is missing or expired - the site-access blockers to escalate first.

```example
file: examples/MissingIqamaComplianceAudit.ts
html: examples/MissingIqamaComplianceAudit.html
title: Missing-Iqama Compliance Audit
description: Shell-mounted audit of Non-Saudi employees with missing or expired Iqama records, shown alongside their passport row for escalation.
```

```api
```
