## Context

The agent home page and the commission center both render a withdrawable-commission summary card from the same `GET /api/admin/shops/fund-summary` response, but they currently duplicate the markup separately.

That duplication has already caused drift:

- the home page added an inline `佣金中心` text-and-chevron chip inside the card header
- the two cards can diverge visually even though they show the same summary concept
- new summary fields such as `main_balance` need to be maintained in two places

The requested change is small in scope, but it introduces a presentation-level reuse rule that should be documented before implementation.

## Goals / Non-Goals

- Goals:
  - Ensure the home page and commission center render the withdrawable-commission summary with the same visible structure
  - Remove the extra inline `佣金中心` chip from the home-page card
  - Centralize the repeated card markup into one shared component
  - Keep data fetching and navigation ownership in the page containers

- Non-Goals:
  - Redesigning commission-center record lists or search/filter areas
  - Changing the fund-summary API contract beyond the already approved username/main-balance behavior
  - Moving commission business logic out of the page containers

## Decisions

- Decision: implement one shared presentational component for the withdrawable-commission summary card.
  - Why: the two pages describe the same summary object and should not maintain separate card markup.

- Decision: the shared component should own display structure only; parent pages should continue to own data loading and page navigation.
  - Why: the card is reused across pages, but fetch timing and navigation context are still page-specific concerns.

- Decision: the home-page card must not render a separate inline `佣金中心` chip/chevron affordance inside the card header.
  - Why: the product explicitly wants that duplicate callout removed, and the surrounding page already provides navigation context.

- Decision: the shared summary icon should render directly in the header layout without an extra boxed wrapper surface.
  - Why: the product explicitly wants the icon treatment simplified, and keeping the icon unboxed reduces visual noise while preserving recognition.

## Risks / Trade-offs

- Risk: extracting a shared component can accidentally drop one page-specific field or visual state.
  - Mitigation: the spec requires the same core title, amount, and summary metric set on both pages.

- Risk: if navigation behavior is embedded into the shared component, reuse may become rigid.
  - Mitigation: keep click handling and routing in the parent pages.

## Migration Plan

1. Extract the repeated withdrawable-commission card markup into one shared component
2. Replace the duplicated home-page and commission-center card markup with the shared component
3. Remove the extra inline `佣金中心` chip from the home-page rendering
4. Verify that both pages still show the same summary fields and formatting

## Open Questions

- Whether the shared component should live in `src/components/` or in an `agent-system`-scoped components directory
