michangarrito/orchestration/_archive/tareas/TASK-2026-01-20-001/subagentes/SA-006-inventory.md

SUBAGENTE SA-006: Inventory API Integration

Metadata

Campo	Valor
ID	SA-006
Agent ID	ad81b0d
Tipo	general-purpose
Perfil	Frontend Developer
Tarea	T3.6
Estado	COMPLETADO
Commit	0385695

---

Prompt Enviado

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

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

### CONTEXTO
La página Inventory.tsx gestiona el inventario de productos. Actualmente usa datos mock y necesita conectarse a las APIs reales del backend.

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

### APIs DISPONIBLES
- `inventoryApi.getAll(params)` - Listar inventario con filtros
- `inventoryApi.getLowStock()` - Productos con stock bajo
- `inventoryApi.adjustStock(productId, quantity, reason)` - Ajustar stock
- `inventoryApi.getMovements(productId)` - Historial de movimientos
- `productsApi.getAll()` - Para selector de productos

### INSTRUCCIONES
1. Leer el archivo Inventory.tsx actual
2. Identificar los datos mock a reemplazar
3. Implementar useQuery para listado de inventario
4. Implementar useMutation para ajustes de stock
5. Mostrar alertas de stock bajo
6. Mostrar historial de movimientos
7. Agregar estados de loading y error
8. Mantener la estructura visual existente
9. Hacer commit con mensaje: `[MCH-FE] feat: Connect Inventory to real API`
10. Push al remote

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

---

Contexto Adicional Proporcionado

• Acceso al archivo Inventory.tsx vía Read tool
• Acceso a api.ts para ver el patrón de APIs
• Definición de umbrales de stock bajo

---

Resultado

Archivos Modificados

Archivo	Cambios
frontend/src/pages/Inventory.tsx	+useQuery, +useMutation, -mock data, +low stock alerts, +movement history

Cambios Implementados

1. Imports agregados:

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

2. Interfaces TypeScript:

   • InventoryItem
   • StockMovement
   • StockAdjustment

3. React Query hooks:

   const { data: inventory, isLoading } = useQuery({
     queryKey: ['inventory', filters],
     queryFn: () => inventoryApi.getAll(filters)
   });
   
   const { data: lowStock } = useQuery({
     queryKey: ['low-stock'],
     queryFn: () => inventoryApi.getLowStock()
   });
   
   const adjustMutation = useMutation({
     mutationFn: inventoryApi.adjustStock,
     onSuccess: () => queryClient.invalidateQueries(['inventory'])
   });
   

4. Funcionalidades:

   • Listado de inventario con filtros
   • Alerta visual de productos con stock bajo
   • Ajuste de stock con razón
   • Historial de movimientos por producto
   • Indicadores de nivel de stock

---

Lecciones del Subagente

Que funcionó bien

• Las alertas de stock bajo estaban bien integradas
• El historial de movimientos da trazabilidad
• Los ajustes requieren razón (auditoría)

Mejoras sugeridas

• Agregar escaneo de código de barras
• Incluir predicción de reorden