makemd/docs/blueprints/frontend-integration/approval-center.md

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.