# Frontend Integration: CRM Hub (客户中枢)

## 🎨 UI Layout Sketch
- **Page Path**: `/business/crm`
- **Component Structure**:
  - `CustomerStats`: Top metrics (Total Customers, Bronze/Silver/Gold/Platinum count).
  - `CustomerFilter`: Filtering by level, tags, spend, and order count.
  - `CustomerTable`: List of customers with:
    - Level badge (e.g., `GOLD` in yellow, `PLATINUM` in purple).
    - Order count & Total Spend.
    - Credit Score (e.g., 95 in green).
    - Tags (e.g., "Frequent Buyer", "B2B", "Low Return Rate").
  - `Customer360Drawer`: Full profile on click:
    - `ProfileHeader`: Name, Email, Level, Credit Score.
    - `OrderHistory`: Timeline of past 10 orders (from `ConsumerOrderService`).
    - `TransactionHistory`: Reconciliation status of past 5 transactions (from `FinanceReconService`).
    - `DisputeHistory`: Past complaints and resolutions (from `DisputeArbitrationService`).
    - `SummaryStats`: Reliability indicator and active disputes count.
  - `ActionButtons`: "Edit Profile", "Update Credit", "Send Coupon".

## 🔄 Interaction State Machine
- `INITIAL`: Fetching global customer profiles.
- `FILTERING`: User applying criteria.
- `VIEWING`: Drawer open with 360 view.
- `UPDATING`: User adjusting credit score or tags.
- `COMMUNICATING`: User sending email or coupon.

## 🔗 API Mapping
- `GET /api/v1/crm/list`: Fetches `cf_customer_profiles`.
- `GET /api/v1/crm/360?customerId={id}`: Triggers `Customer360Service.getCustomer360`.
- `POST /api/v1/crm/credit`: Triggers `Customer360Service.updateCreditScore`.

## 📈 ROI Visualization
- "Customer Lifetime Value (LTV)": Total spend per customer over time.
- "Churn Rate": Percentage of customers without orders in 90 days.