# XWUIHrOffboardingPage

Shell page (extends `HrPageBase`) that hosts the employee separation workflow: it mounts an `XWUIHrOffboardingForm` to capture a new resignation, then renders the list of separations returned by `hrApi.listSeparations()` in an `XWUIDataGrid` with Employee, Resignation date, and Last day columns. Configure it through `conf_comp` (`hrApiOptions`, `locale`, plus the shared shell options `maxWidth`, `padding`, `hideHeader`, `hideBreadcrumbs`, the aside controls, and `className`); pass `title`/`description` (and `titleAr` for Arabic) via `data`. Use it as the Offboarding screen of an HR app where staff log departures and review pending exits. The default title is "Offboarding" ("إنهاء الخدمة" when `locale` is `ar`).

## Basic Usage

Constructs the Offboarding page inside `#app` with an English title and a sandbox HR API, loading separations from the mock `createHrApi` backend.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Renders the Offboarding shell page bound to a sandbox IHrApi, showing the separation form above a data grid of separations.
```

## Retail Location Closure

Offboarding screen for a closing retail branch, with a breadcrumb trail down to the store and a width-capped column for a focused exit review.

```example
file: examples/RetailLocationClosure.ts
html: examples/RetailLocationClosure.html
title: Retail Location Closure
description: Offboarding page for the closing Store #214, with HR → Retail Ops → Store breadcrumbs and a 1080px constrained column over a sandbox IHrApi.
```

## Arabic RTL Offboarding

The separation workflow localized for a regional office, with an Arabic title and a right-to-left layout.

```example
file: examples/ArabicRtlOffboarding.ts
html: examples/ArabicRtlOffboarding.html
title: Arabic RTL Offboarding
description: Renders the Offboarding page in Arabic via titleAr and locale 'ar', mirroring the breadcrumb trail and form/grid to right-to-left.
```

```api
```
