a699704ca5
- Create TASK-2026-01-25-OQI-004-ACCOUNT-DETAIL folder - Add METADATA.yml with task details - Add 05-EJECUCION.md with implementation details - Update FRONTEND_INVENTORY.yml (pages: 32, services: 11, routes) - Update MASTER_INVENTORY.yml (OQI-004 progress: 30% -> 45%) - Update _INDEX.yml with new task entry Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
103 lines
3.1 KiB
Markdown
103 lines
3.1 KiB
Markdown
# 05-EJECUCION - OQI-004 Account Detail
|
|
|
|
## Contexto
|
|
|
|
El modulo de Investment (OQI-004) tenia paginas Portfolio.tsx y Products.tsx pero faltaba la pagina de detalle de cuenta individual. Portfolio.tsx (linea 115) enlaza a `/investment/accounts/${account.id}` pero la pagina no existia.
|
|
|
|
## Fase 1: Investment Service
|
|
|
|
### Archivo Creado
|
|
```
|
|
apps/frontend/src/services/investment.service.ts
|
|
```
|
|
|
|
### Funciones Implementadas
|
|
- **Products:** getProducts, getProductById, getProductPerformance
|
|
- **Accounts:** getUserAccounts, getAccountSummary, getAccountById, createAccount, closeAccount
|
|
- **Transactions:** getTransactions, createDeposit, createWithdrawal
|
|
- **Distributions:** getDistributions
|
|
- **Withdrawals:** getWithdrawals
|
|
|
|
### Tipos Exportados
|
|
- Product, ProductPerformance
|
|
- InvestmentAccount, AccountSummary, AccountDetail
|
|
- Transaction, Distribution, Withdrawal
|
|
|
|
---
|
|
|
|
## Fase 2: Account Detail Page
|
|
|
|
### Archivo Creado
|
|
```
|
|
apps/frontend/src/modules/investment/pages/AccountDetail.tsx
|
|
```
|
|
|
|
### Estructura de Componentes
|
|
```typescript
|
|
AccountDetail
|
|
├── StatCard // Cards de estadisticas
|
|
├── TransactionRow // Fila de transaccion
|
|
├── DistributionRow // Fila de distribucion
|
|
├── PerformanceChart // Canvas chart de rendimiento
|
|
└── Tabs
|
|
├── Overview // Resumen + chart + info
|
|
├── Transactions // Historial completo
|
|
├── Distributions // Historial de distribuciones
|
|
├── Deposit // DepositForm integrado
|
|
└── Withdraw // WithdrawForm integrado
|
|
```
|
|
|
|
### Funcionalidades
|
|
1. **Stats Grid:** Balance actual, Total invertido, Ganancias, Total retirado
|
|
2. **Performance Chart:** Canvas-based line chart con gradient fill
|
|
3. **Recent Transactions:** Ultimas 5 transacciones en overview
|
|
4. **Load More:** Paginacion de transacciones
|
|
5. **Deposit/Withdraw:** Forms integrados con tabs
|
|
|
|
---
|
|
|
|
## Fase 3: Routes y App.tsx
|
|
|
|
### Imports Agregados
|
|
```typescript
|
|
const InvestmentPortfolio = lazy(() => import('./modules/investment/pages/Portfolio'));
|
|
const InvestmentProducts = lazy(() => import('./modules/investment/pages/Products'));
|
|
const AccountDetail = lazy(() => import('./modules/investment/pages/AccountDetail'));
|
|
```
|
|
|
|
### Rutas Agregadas
|
|
```typescript
|
|
<Route path="/investment/portfolio" element={<InvestmentPortfolio />} />
|
|
<Route path="/investment/products" element={<InvestmentProducts />} />
|
|
<Route path="/investment/accounts/:accountId" element={<AccountDetail />} />
|
|
```
|
|
|
|
---
|
|
|
|
## Validaciones
|
|
|
|
- [x] Estructura de archivos correcta
|
|
- [x] Imports validos (React, react-router-dom, lucide-react)
|
|
- [x] Props de componentes correctas (currentBalance en WithdrawForm)
|
|
- [x] Rutas registradas en App.tsx
|
|
- [x] Inventarios actualizados
|
|
|
|
## Resultado
|
|
|
|
**Progreso OQI-004:** 30% → 45%
|
|
|
|
**Funcionalidades completadas:**
|
|
- Pagina de detalle de cuenta
|
|
- Service API centralizado
|
|
- Navegacion por tabs
|
|
- Grafico de rendimiento
|
|
- Historial de transacciones
|
|
- Historial de distribuciones
|
|
- Depositos y retiros integrados
|
|
|
|
**Pendiente:**
|
|
- Pagina de listado de withdrawals global
|
|
- Pagina de transactions global
|
|
- Pagina de reports
|
|
- ProductDetail page (detalle de producto individual)
|