# XWUICardEmployeeCompliance

HR identity-document compliance card for the Ops "Documents Overview" page (`/en/hr/documents`), which paginates ~1226 of these across the workforce. The header composes XWUIAvatar plus the employee's English/Arabic name, `#code`, department, and a Saudi/Non-Saudi nationality badge; two doc rows (Iqama, Passport) render number, "Expires DD/MM/YYYY", an XWUIDisplayDueDate days-remaining chip, and an XWUIDisplayBadge state tag. The host's left-edge stripe inherits the worst-case state across both docs (expired/expiring/valid/none), with `missing` collapsed into expired. Toggle the Arabic name and department line via `conf_comp.showArabicName` / `conf_comp.showDepartment`.

## Basic Usage

A Non-Saudi employee (Adriaan Jakobus Booysen, Logistics, #10476) whose iqama is missing and passport just expired - the worst-case stripe reads as expired.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Non-Saudi employee with a missing iqama and an expired passport, expired worst-case stripe.
```

## Saudi Compliant

A Saudi national with no iqama required and a valid passport - the clean, fully-compliant baseline with a green worst-case stripe.

```example
file: examples/SaudiCompliant.ts
html: examples/SaudiCompliant.html
title: Saudi Compliant
description: Saudi national - iqama row collapses to " - ", valid passport into 2031, green valid worst-case stripe.
```

## Iqama Renewal Due

A Non-Saudi resident whose iqama is expiring inside the renewal window - amber worst-case stripe with a warning badge and days-remaining chip, Arabic name hidden for a dense roster.

```example
file: examples/IqamaRenewalDue.ts
html: examples/IqamaRenewalDue.html
title: Iqama Renewal Due
description: Non-Saudi with an expiring iqama and valid passport; amber stripe, warning badge, showArabicName disabled.
```

```api
```