# XWUIApprovalWorkflow

A visual multi-stage sign-off tracker that renders a `data.stages` array as a horizontal `XWUISteps` strip - each stage shows its title, its approvers' names, and a status of `approved` (finish, ✓), `rejected` (error, ✗), or `pending`. The stage matching `data.currentStageId` becomes the active step, and when `allowActions` is on it surfaces a comment textarea plus Approve/Reject buttons; approving advances `currentStageId` to the next stage while rejecting halts the flow. With `showHistory` (default true) it appends an `XWUITimeline` of every completed stage with its comment and timestamp.

## Basic Usage

A three-stage flow (Self-review → Manager → Executive sign-off) where Self-review is already `approved` and `currentStageId` points at the pending Manager stage, which carries two approvers (Alex, Priya).

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A 3-stage approval chain currently parked on the pending "Manager" stage with two named approvers.
```

## With History

Two stages are already `approved` with reviewer comments and timestamps; passing `{ showHistory: true, allowActions: true }` renders the chronological timeline below the steps and exposes Approve/Reject controls on the pending "Exec sign-off" stage.

```example
file: examples/WithHistory.ts
html: examples/WithHistory.html
title: With History
description: Two approved stages with comments feed the timeline while the pending exec stage shows live action buttons.
```

## Rejected at Finance

A purchase request that was approved by the requester and team lead but rejected at finance review, so the chain halts and the rejection comment lands in the history timeline.

```example
file: examples/RejectedAtFinance.ts
html: examples/RejectedAtFinance.html
title: Rejected at Finance
description: A rejected finance stage renders as an error step and its comment surfaces in the timeline; an onAction handler logs decisions.
```

## Live Decision

A pending time-off request with `allowActions: true` and `showHistory: false`, focusing the page on the manager's comment box and Approve / Reject buttons.

```example
file: examples/InteractiveDecision.ts
html: examples/InteractiveDecision.html
title: Live Decision
description: The pending manager stage exposes the comment textarea and Approve/Reject buttons with the history panel hidden.
```

```api
```