michangarrito/orchestration/tareas/TASK-2026-01-20-001/subagentes/SA-004-customers.md

SUBAGENTE SA-004: Customers API Integration

Metadata

Campo	Valor
ID	SA-004
Agent ID	a5cb03f
Tipo	general-purpose
Perfil	Frontend Developer
Tarea	T3.4
Estado	COMPLETADO
Commit	969f8ac

---

Prompt Enviado

## TAREA: Conectar Customers.tsx a las APIs reales

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

### CONTEXTO
La página Customers.tsx actualmente usa datos mock. Necesita conectarse a las APIs reales del backend para gestión completa de clientes.

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

### APIs DISPONIBLES
- `customersApi.getAll(params)` - Listar clientes con paginación
- `customersApi.getById(id)` - Obtener cliente por ID
- `customersApi.create(data)` - Crear cliente
- `customersApi.update(id, data)` - Actualizar cliente
- `customersApi.delete(id)` - Eliminar cliente
- `customersApi.search(query)` - Buscar clientes

### INSTRUCCIONES
1. Leer el archivo Customers.tsx actual
2. Identificar los datos mock a reemplazar
3. Implementar useQuery de React Query para listado
4. Implementar useMutation para create/update/delete
5. Agregar estados de loading y error
6. Mantener la estructura visual existente
7. Hacer commit con mensaje: `[MCH-FE] feat: Connect Customers to real API`
8. Push al remote

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

---

Contexto Adicional Proporcionado

• Acceso al archivo Customers.tsx vía Read tool
• Acceso a api.ts para ver el patrón de APIs
• Acceso a FRONTEND_INVENTORY.yml para contexto

---

Resultado

Archivos Modificados

Archivo	Cambios
frontend/src/pages/Customers.tsx	+useQuery, +useMutation, -mock data, +loading/error states, +search

Cambios Implementados

1. Imports agregados:

   • useQuery, useMutation, useQueryClient de @tanstack/react-query
   • customersApi de ../lib/api

2. Interfaces TypeScript:

   • Customer
   • CustomerFilters
   • CustomerFormData

3. React Query hooks:

   const { data: customers, isLoading, error } = useQuery({
     queryKey: ['customers', searchTerm],
     queryFn: () => customersApi.search(searchTerm)
   });
   
   const createMutation = useMutation({
     mutationFn: customersApi.create,
     onSuccess: () => queryClient.invalidateQueries(['customers'])
   });
   

4. Funcionalidades:

   • CRUD completo con APIs reales
   • Búsqueda de clientes
   • Historial de compras por cliente
   • Estado de cuenta (fiados)

---

Lecciones del Subagente

Que funcionó bien

• Patrón CRUD ya establecido en otras páginas
• Búsqueda integrada correctamente
• Modal de edición reutilizado

Mejoras sugeridas

• Incluir validación de datos de contacto
• Agregar exportación de lista de clientes