# XWUIHrGovernmentServicesPage

Government Relations page modeled on the Saudi Muqeem integration surface. Under a "Muqeem" provider strip it shows three keyboard-navigable sub-tabs - Services, Visas, and Operation Report - built from `hrApi.listGovServiceCatalog()` and `hrApi.listGovTransactions()`. The Services/Visas tabs render categorized grids of action cards (Resident ID and Visa lifecycle actions, each with an inline SVG icon, badge, title, and descriptor); clicking a card dispatches a bubbling `xwui-gov-service` CustomEvent and shows an inline notice rather than calling the portal directly, so hosts can open their own confirm-gated workflow. The Operation Report tab renders a transactions table (Employee, Service, Reference, Status pill, Submitted date). Extends `HrPageBase`/`XWUIShellPage`, supports English/Arabic via the `locale` config, and constructs with `hrApiOptions` (e.g. `{ env: 'sandbox' }`).

## Basic Usage

Loads the Muqeem-style service catalog and operation transactions from the sandbox HR API and renders the provider strip, the Services/Visas/Operation Report tabs, the categorized action-card grid, and the operations table.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Constructs XWUIHrGovernmentServicesPage in sandbox mode to display the Muqeem-style service catalog tabs and operation report.
```

## Arabic locale (RTL)

Passes `{ locale: 'ar' }` with a `titleAr` so the page resolves the Arabic title (`الخدمات الحكومية`) and renders right-to-left.

```example
file: examples/ArabicLocale.ts
html: examples/ArabicLocale.html
title: Arabic locale (RTL)
description: Arabic title via titleAr plus locale 'ar' for a right-to-left page.
```

## Constrained, centered layout

Caps the content column at 1200px, centers it, and adds roomier padding via the shell-page config.

```example
file: examples/ConstrainedLayout.ts
html: examples/ConstrainedLayout.html
title: Constrained, centered layout
description: `{ maxWidth: '1200px', centered: true, padding: '2rem' }` constrains and centers the page column.
```

```api
```