# SUBAGENTE SA-005: Fiado API Integration

## Metadata

| Campo | Valor |
|-------|-------|
| ID | SA-005 |
| Agent ID | aa0e856 |
| Tipo | general-purpose |
| Perfil | Frontend Developer |
| Tarea | T3.5 |
| Estado | COMPLETADO |
| Commit | ad4ab40 |

---

## Prompt Enviado

```markdown
## TAREA: Conectar Fiado.tsx a las APIs reales

**Proyecto:** michangarrito
**Ubicación:** /home/isem/workspace-v2/projects/michangarrito

### CONTEXTO
La página Fiado.tsx gestiona las cuentas de crédito de clientes ("fiado" es crédito informal en tiendas mexicanas). Actualmente usa datos mock y necesita conectarse a las APIs reales.

### REFERENCIAS A CONSULTAR
1. `frontend/src/pages/Fiado.tsx` - Página actual con mock data
2. `frontend/src/lib/api.ts` - APIs ya definidas (fiadosApi, customersApi)
3. `orchestration/inventarios/FRONTEND_INVENTORY.yml` - Estado actual de la página

### APIs DISPONIBLES
- `fiadosApi.getAll(params)` - Listar cuentas de fiado
- `fiadosApi.getByCustomer(customerId)` - Fiados de un cliente
- `fiadosApi.create(data)` - Crear registro de fiado
- `fiadosApi.registerPayment(id, amount)` - Registrar abono
- `fiadosApi.getBalance(customerId)` - Saldo de cliente
- `customersApi.getAll()` - Para selector de clientes

### INSTRUCCIONES
1. Leer el archivo Fiado.tsx actual
2. Identificar los datos mock a reemplazar
3. Implementar useQuery para listado de fiados
4. Implementar useMutation para crear fiado y registrar pagos
5. Mostrar balance por cliente
6. Agregar estados de loading y error
7. Mantener la estructura visual existente
8. Hacer commit con mensaje: `[MCH-FE] feat: Connect Fiado to real API`
9. Push al remote

### VALIDACIONES
- Build debe pasar: `npm run build`
- No errores de TypeScript
```

---

## Contexto Adicional Proporcionado

- Acceso al archivo Fiado.tsx vía Read tool
- Acceso a api.ts para ver el patrón de APIs
- Contexto de negocio: fiado = crédito informal mexicano

---

## Resultado

### Archivos Modificados

| Archivo | Cambios |
|---------|---------|
| `frontend/src/pages/Fiado.tsx` | +useQuery, +useMutation, -mock data, +balance display, +payment registration |

### Cambios Implementados

1. **Imports agregados:**
   - `useQuery`, `useMutation`, `useQueryClient` de `@tanstack/react-query`
   - `fiadosApi`, `customersApi` de `../lib/api`

2. **Interfaces TypeScript:**
   - `FiadoRecord`
   - `FiadoPayment`
   - `CustomerBalance`

3. **React Query hooks:**
   ```typescript
   const { data: fiados, isLoading } = useQuery({
     queryKey: ['fiados', filters],
     queryFn: () => fiadosApi.getAll(filters)
   });

   const paymentMutation = useMutation({
     mutationFn: ({ id, amount }) => fiadosApi.registerPayment(id, amount),
     onSuccess: () => {
       queryClient.invalidateQueries(['fiados']);
       queryClient.invalidateQueries(['customer-balance']);
     }
   });
   ```

4. **Funcionalidades:**
   - Listado de fiados pendientes
   - Registro de nuevos fiados
   - Registro de abonos parciales
   - Balance total por cliente
   - Historial de pagos

---

## Lecciones del Subagente

### Que funcionó bien
- El concepto de fiado estaba bien explicado
- Las APIs cubrían todos los casos de uso
- Integración con customersApi para selector

### Mejoras sugeridas
- Agregar recordatorios de pago
- Incluir límite de crédito por cliente