# XWUIOpsHRRatingsPage

Performance-ratings data-entry page (route `/en/hr/ratings`) that extends `XWUIShellPage` with a 4-tile KPI ribbon (Company Average 0..5 · Ratings Submitted · Pending Reviews · Top Department), a filter row (Type · Department · search), and a 2-column workspace. The left column is the Submit Rating form: a Project|Quarterly evaluation-type segmented control, Select Employee dropdown, conditional Select Project dropdown (visible only in Project mode), a 5-star `XWUIInputRating`, a Comments textarea, and Submit / Save Draft buttons; the right column is a dynamic-feeds stack with Rating History and Department Averages panels (empty-state by default). Configure it with `kpis`, the `employeeOptions`/`projectOptions`/`departmentOptions` arrays, and `initialEvaluationType`; Submit and Save Draft both emit the `{ evaluationType, employeeCode, projectId, rating, comments }` payload via `onSubmit`/`onSaveDraft`. Per the OPFlow tabula-rasa spec every metric defaults to zero / N/A. Use it to capture per-project or quarterly employee evaluations.

## Basic Usage

Performance Ratings page in its tabula-rasa default state - all KPIs at zero / N/A, both feed panels empty, Project evaluation type active - with sample employee/project/department dropdown options.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Zeroed KPIs and empty feeds with a small Employee/Project/Department option sample (e.g. Al Hilal vs Al Nassr, AFC Champions League Elite), Project evaluation type selected and Submit/Save-Draft wired to console.
```

## Quarterly Review Cycle

The page in its Quarterly evaluation mode mid-cycle, hiding the project dropdown and showing a live KPI ribbon with employee options grouped by department.

```example
file: examples/QuarterlyReviewCycle.ts
html: examples/QuarterlyReviewCycle.html
title: Quarterly Review Cycle
description: Quarterly mode with a 4.2 company average, 318 submitted, 47 pending and Engineering leading, employees grouped by department in the dropdown.
```

## Season-End Project Appraisal

Project evaluation mode inside the Ops shell after a busy season, with the conditional project dropdown populated by completed productions and high throughput KPIs.

```example
file: examples/SeasonEndProjectAppraisal.ts
html: examples/SeasonEndProjectAppraisal.html
title: Season-End Project Appraisal
description: Project mode with five completed productions (RSL final, King's Cup, Super Cup) and a 4.5 average / 512 submitted ribbon, mounted in the shell.
```

```api
```