# XWUIHrOrgChartPage

Shell page (extends `HrPageBase`) that visualizes the company reporting structure. It fetches the department-level tree via `hrApi.getOrgChart('department')` and renders it with `XWUIOrganizationChart` in `vertical` orientation inside the page content area. Configure through `conf_comp` (`hrApiOptions`, `locale`, plus the shared shell options `maxWidth`, `padding`, `hideHeader`, `hideBreadcrumbs`, aside controls, `className`); pass `title`/`description`/`titleAr` via `data`. Use it as the Org Chart screen of an HR app. Default title is "Organization Chart" ("الهيكل التنظيمي" when `locale` is `ar`).

## Basic Usage

Builds the Org Chart page in `#app` with an English title and a sandbox HR API, rendering the department tree from the mock backend.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Renders the Organization Chart page bound to a sandbox IHrApi, drawing the department-level org tree vertically.
```

## Engineering Division Chart

The org chart framed as one division's reporting view, with drill-down breadcrumbs and a wide column for the deep tree.

```example
file: examples/EngineeringDivisionChart.ts
html: examples/EngineeringDivisionChart.html
title: Engineering Division Chart
description: Renders the org tree as an Engineering division view with Company → Technology → Engineering breadcrumbs and a 1440px column over a sandbox IHrApi.
```

## Arabic Org Chart

The company reporting structure rendered for an Arabic-first organization, with a right-to-left layout.

```example
file: examples/ArabicOrgChart.ts
html: examples/ArabicOrgChart.html
title: Arabic Org Chart
description: Renders the Organization Chart in Arabic via titleAr and locale 'ar', mirroring the tree and breadcrumbs to right-to-left.
```

```api
```