# XWUIOpsHRVisaTrackingPage

Expatriate visa compliance and risk-management dashboard (route `/en/hr/visa-tracking`) that extends `XWUIShellPage` with a toolbar (free-text search + Nationality/Status/Department filters), a 4-tile KPI strip (Expired / Expiring / Valid / Total), and an `XWUIDataGrid` carrying the 10-column visa matrix: Employee Code, Full Name (avatar + EN/AR composite), Nationality, Visa Type, Visa Number, Issue Date, Expiry Date, Days Remaining, Status, Actions. Each record's `status` (valid / expiring / expired) drives the Status pill plus the colour of the Expiry and Days-Remaining cells (the latter via `XWUIDisplayDueDate`); when omitted, status is derived from `expiryDate` against the `expiringDays` window (default 30). Drive it with the `visas` array - which also feeds the KPI counts and filter dropdown options - and the `onSearch`/`onFilterChange`/`onRowAction` callbacks. Use it so HR can surface expiring visas before the renewal window closes and avoid the SAR 10,000 / 25,000 / deportation overstay-penalty cascade.

## Basic Usage

Visa Tracking page with three sample rows - one valid, one inside the 30-day renewal window, and one expired - so the KPI strip lights up the full urgency palette.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Three Work Visa records (Egyptian valid, Indian expiring, Filipino expired) across Production/Post-Production/Logistics, demonstrating the expired/expiring/valid status pills and Days-Remaining colour coding.
```

## Expiring Renewal Queue

HR tightens the renewal window to 14 days, turning the page into an end-of-quarter renewal work-list dominated by the Expiring and Expired KPI tiles.

```example
file: examples/ExpiringRenewalQueue.ts
html: examples/ExpiringRenewalQueue.html
title: Expiring Renewal Queue
description: Five crew whose work visas all fall inside or past a tightened 14-day window, listed as an urgent end-of-quarter renewal queue with a custom title and breadcrumb trail.
```

## Nationality Compliance Audit

A broad multi-nationality, multi-visa-class audit dataset mounted inside the Ops shell app, exercising the Nationality and Department filters at scale.

```example
file: examples/NationalityComplianceAudit.ts
html: examples/NationalityComplianceAudit.html
title: Nationality Compliance Audit
description: Eight crew across eight nationalities and three visa classes (Work/Visit/Family), shown in the real Ops shell chrome the way HR actually opens the tracker.
```

```api
```