# 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

```markdown
## 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:**
   ```typescript
   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