# Frontend Integration: Finance Reconciliation (财务对账引擎)

## 🎨 UI Layout Sketch
- **Page Path**: `/erp/finance/reconciliation`
- **Component Structure**:
  - `ReconciliationSummary`: Top stats (Total Orders, Matched Count, Discrepancy Amount).
  - `DiscrepancyCalendar`: Calendar view of discrepancy days.
  - `ReconTable`: Detailed reconciliation list:
    - Order ID & Status (Matched, Discrepancy).
    - Expected Amount (from Order) vs Actual Amount (from Settlement).
    - Gap ($ Delta).
    - AI Reasoning (e.g., "Logistics Fee Overcharge", "Tax Miscalculation").
  - `DetailDrilldown`: Click order to see `DecisionExplainabilityEngine` factors (Expected, Actual, Gap).
  - `ResolutionCenter`: "Manual Adjust" or "Dispute with Platform" buttons.

## 🔄 Interaction State Machine
- `INITIAL`: Waiting for settlement data.
- `RECONCILING`: `FinanceReconService` processing orders.
- `MATCHED`: Amount aligns within threshold.
- `DISCREPANCY`: Discrepancy detected, awaiting action.
- `RESOLVED`: Discrepancy cleared (e.g., through adjustment or refund).

## 🔗 API Mapping
- `POST /api/v1/finance/reconciliation/run`: Triggers `FinanceReconService.performReconciliation`.
- `GET /api/v1/finance/reconciliation/list`: Fetches `cf_finance_reconciliation` records.
- `GET /api/v1/xai/narrative?resourceId={orderId}`: Fetches `DecisionExplainabilityEngine` logic.

## 📈 ROI Visualization
- "Recovered Funds" from disputes.
- "Revenue Leakage" trend line.