# Frontend Integration: Approval Center (通用审批中心)

## 🎨 UI Layout Sketch
- **Page Path**: `/governance/approval`
- **Component Structure**:
  - `ApprovalSummary`: Top metrics (Pending Approvals, Approved, Rejected).
  - `ApprovalTabs`: "My Pending", "My History", "All (Admin only)".
  - `ApprovalCardList`: Grid showing:
    - Type icon (e.g., `HIGH_VALUE_ORDER` in red, `PRICE_CHANGE` in blue).
    - Status Badge (e.g., `PENDING` in orange, `APPROVED` in green).
    - Stage indicator: `Stage 1/2` (Manager), `Stage 2/2` (Finance).
    - Requester & Date.
    - Resource ID & Description.
  - `ApprovalDetailModal`:
    - Full details (Metadata, Amount, etc.).
    - Decision log (who approved which stage).
    - Decision Narrative from `DecisionExplainabilityEngine`.
    - "Approve", "Reject", "Comment" actions.

## 🔄 Interaction State Machine
- `INITIAL`: Fetching pending requests.
- `PENDING`: Request listed for approver.
- `STAGE_TRANSITION`: Request moving from Stage 1 to Stage 2.
- `APPROVED`: Final approval reached.
- `REJECTED`: Request terminated at any stage.

## 🔗 API Mapping
- `GET /api/v1/approval/pending`: Fetches `cf_approval_requests` with `status=PENDING`.
- `POST /api/v1/approval/approve`: Triggers `ApprovalService.approve`.
- `GET /api/v1/approval/history`: Fetches `cf_approval_requests` with `status=APPROVED|REJECTED`.

## 📈 ROI Visualization
- "Compliance Audit Trail": 100% visibility of sensitive actions.
- "Approval Latency": Average time from request to final decision.