# 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

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