# XWUIOpsEmployeeDirectoryPage

Operational "Resources > Employee Directory" page (route `/en/resources/employees`) with a List/Availability segmented toggle that swaps only the body while preserving the toolbar's search and filter context. List view is an XWUIDataGrid (Employee Code, Full Name as an XWUIAvatar + bilingual EN/AR composite, Crew Role chip, Department, Availability badge, Invite Status, City, Actions eye-icon); Availability view is an XWUIResourceMatrix using the OPFlow HR status palette (Production / Rigging / Rehearsal / Vacation / Sick Leave / Free) plus trailing Work-Days and Utilization columns. The toolbar adds three XWUIInputSelect filters (Crew Role / Department / Availability), a "Show Inactive" XWUIInputSwitch, and a primary "+ Add Employee" button; use it as the operational roster view the AI Planner reads, distinct from the administrative HR Employees page.

## Basic Usage

A 3-employee directory (Aaron Reyes / Aasim Khan / Abdalatti Al) with a May-2026 availability slice exercising Production, Rigging, and Vacation cells, opening in the default List view.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Three bilingual employee rows plus an availability-matrix slice covering Production, Rigging, and Vacation, defaulting to the List view.
```

## Availability Matrix Planning

Opens straight into the Availability view with a six-person OB crew across May 2026, exercising the full status palette plus Work-Days and Utilization metrics.

```example
file: examples/AvailabilityMatrixPlanning.ts
html: examples/AvailabilityMatrixPlanning.html
title: Availability Matrix Planning
description: Six-crew May-2026 matrix covering Production, Rigging, Rehearsal, Vacation and Sick Leave with utilization bars, opening in the Availability view.
```

## Inactive Contractor Audit

The List view with "Show Inactive" pre-enabled for the quarterly freelance reconciliation, surfacing archived and terminated contractor nodes alongside active staff.

```example
file: examples/InactiveContractorAudit.ts
html: examples/InactiveContractorAudit.html
title: Inactive Contractor Audit
description: List view with showInactive on, mixing active staff with pending/expired invites and two terminated contractor rows.
```

```api
```