michangarrito/orchestration/_archive/tareas/TASK-2026-01-20-001/subagentes/SA-005-fiado.md

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

## 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:

   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