michangarrito/orchestration/tareas/TASK-2026-01-20-001/subagentes/SA-003-orders.md

SUBAGENTE SA-003: Orders API Integration

Metadata

Campo	Valor
ID	SA-003
Agent ID	aa7d1dd
Tipo	general-purpose
Perfil	Frontend Developer
Tarea	T3.3
Estado	COMPLETADO
Commit	c8cf78e

---

Prompt Enviado

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

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

### CONTEXTO
La página Orders.tsx actualmente usa datos mock. Necesita conectarse a las APIs reales del backend incluyendo flujo de estados de pedido.

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

### APIs DISPONIBLES
- `ordersApi.getAll(params)` - Listar pedidos con filtros
- `ordersApi.getById(id)` - Obtener pedido por ID
- `ordersApi.create(data)` - Crear pedido
- `ordersApi.updateStatus(id, status)` - Cambiar estado del pedido
- `ordersApi.cancel(id)` - Cancelar pedido

### ESTADOS DE PEDIDO
- pending → preparing → ready → delivered
- pending → cancelled (en cualquier momento antes de delivered)

### INSTRUCCIONES
1. Leer el archivo Orders.tsx actual
2. Identificar los datos mock a reemplazar
3. Implementar useQuery para listado con filtros
4. Implementar useMutation para cambios de estado
5. Agregar indicadores visuales por estado
6. Agregar estados de loading y error
7. Mantener la estructura visual existente
8. Hacer commit con mensaje: `[MCH-FE] feat: Connect Orders to real API`
9. Push al remote

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

---

Contexto Adicional Proporcionado

• Acceso al archivo Orders.tsx vía Read tool
• Acceso a api.ts para ver el patrón de APIs
• Definición de estados de pedido y transiciones permitidas

---

Resultado

Archivos Modificados

Archivo	Cambios
frontend/src/pages/Orders.tsx	+useQuery, +useMutation, -mock data, +status flow, +loading/error states

Cambios Implementados

1. Imports agregados:

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

2. Interfaces TypeScript:

   • Order
   • OrderItem
   • OrderStatus
   • OrderFilters

3. React Query hooks:

   const { data: orders, isLoading, error } = useQuery({
     queryKey: ['orders', filters],
     queryFn: () => ordersApi.getAll(filters)
   });
   
   const statusMutation = useMutation({
     mutationFn: ({ id, status }) => ordersApi.updateStatus(id, status),
     onSuccess: () => queryClient.invalidateQueries(['orders'])
   });
   

4. Funcionalidades:

   • Listado con filtros por estado y fecha
   • Transición de estados con botones contextuales
   • Indicadores de color por estado
   • Cancelación de pedidos

---

Lecciones del Subagente

Que funcionó bien

• La máquina de estados estaba bien definida
• Los indicadores visuales siguieron patrones existentes
• El flujo de transiciones fue claro

Mejoras sugeridas

• Incluir notificaciones toast al cambiar estado
• Agregar confirmación para cancelación