# Subscription Service Management

Guidance for SIM management in the Subscriptions detail page.

- Location: `Subscriptions > [Subscription] > SIM Management`
- Current status: SIM management available; other services (Internet, Netgear, VPN) to be added as needed

## UI Structure

```
apps/portal/src/features/subscriptions/
├── sim/                              # SIM management subfolder
│   ├── components/
│   │   ├── SimManagementSection.tsx  # Main SIM management container
│   │   ├── SimDetailsCard.tsx        # SIM details display
│   │   ├── DataUsageChart.tsx        # Data usage visualization
│   │   ├── SimActions.tsx            # Action buttons
│   │   ├── TopUpModal.tsx            # Data top-up modal
│   │   ├── ChangePlanModal.tsx       # Plan change modal
│   │   ├── ReissueSimModal.tsx       # SIM reissue modal
│   │   └── SimFeatureToggles.tsx     # Voice/roaming toggles
│   ├── hooks/
│   │   └── useSimTopUpPricing.ts     # Top-up pricing hook
│   ├── utils/
│   │   └── plan.ts                   # Plan utilities
│   └── index.ts
├── views/
│   ├── SubscriptionDetail.tsx        # Main subscription detail view
│   ├── SimCancel.tsx                 # SIM cancellation flow
│   ├── SimTopUp.tsx                  # Data top-up flow
│   └── SimReissue.tsx                # SIM reissue flow
└── ...
```

## Service Panels

- SIM: Renders the existing SIM management UI
  - Source: `apps/portal/src/features/subscriptions/sim/components/SimManagementSection.tsx`
  - Backend: `/api/subscriptions/{id}/sim/*`
- Internet: To be added when needed
- Netgear: To be added when needed
- VPN: To be added when needed

## Integration

- Entry point: `apps/portal/src/app/account/subscriptions/[id]/page.tsx` renders `SubscriptionDetailContainer`
- SIM tab: Shows when `subscription.productName` includes `sim` (case-insensitive)
- SIM management actions route to `/account/subscriptions/{id}/sim/*`

## Future Expansion

- Add service-specific management panels as needed (Internet, VPN, etc.)
- Gate options per subscription capabilities
- Deep-linking: support hash fragments like `#sim-management` to navigate to panels

## Notes

- SIM management is co-located with subscriptions since it's a subscription-level concern
- All SIM-related routes live under `/account/subscriptions/{id}/sim/*`