michangarrito/orchestration/_archive/tareas/TASK-2026-01-20-001/subagentes/SA-012-settings-fe.md

SUBAGENTE SA-012: Settings Frontend Integration

Metadata

Campo	Valor
ID	SA-012
Agent ID	a799038
Tipo	general-purpose
Perfil	Frontend Developer
Tarea	T3.7-FE
Estado	COMPLETADO
Commit	1b2fca8
Dependencia	SA-007 (Settings Backend)

---

Prompt Enviado

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

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

### CONTEXTO
La página Settings.tsx actualmente usa datos mock. El backend ya tiene el módulo de settings implementado (SA-007). Ahora necesita conectarse a las APIs reales.

### REFERENCIAS A CONSULTAR
1. `frontend/src/pages/Settings.tsx` - Página actual con mock data
2. `frontend/src/lib/api.ts` - Agregar settingsApi
3. `backend/src/modules/settings/settings.controller.ts` - Endpoints disponibles

### APIs A IMPLEMENTAR EN api.ts
```typescript
export const settingsApi = {
  getAll: () => api.get('/v1/settings'),
  get: (key: string) => api.get(`/v1/settings/${key}`),
  update: (key: string, value: any) => api.put(`/v1/settings/${key}`, { value }),
  bulkUpdate: (settings: Record<string, any>) => api.post('/v1/settings/bulk', { settings })
};

INSTRUCCIONES

1. Agregar settingsApi en api.ts
2. Leer el archivo Settings.tsx actual
3. Identificar los datos mock a reemplazar
4. Implementar useQuery para cargar configuraciones
5. Implementar useMutation para guardar cambios
6. Agrupar settings por categoría (store, notifications, tax)
7. Agregar feedback de éxito/error al guardar
8. Mantener la estructura visual existente
9. Hacer commit con mensaje: [MCH-FE] feat: Connect Settings to real API
10. Push al remote

VALIDACIONES

• Build debe pasar: npm run build
• No errores de TypeScript

---

## Contexto Adicional Proporcionado

- Referencia al backend ya implementado (SA-007)
- Estructura de endpoints del backend
- Patrón de api.ts existente

---

## Resultado

### Archivos Modificados

| Archivo | Cambios |
|---------|---------|
| `frontend/src/lib/api.ts` | +settingsApi |
| `frontend/src/pages/Settings.tsx` | +useQuery, +useMutation, -mock data |

### Cambios Implementados

1. **Settings API en api.ts:**
   ```typescript
   export const settingsApi = {
     getAll: () => api.get('/v1/settings').then(r => r.data),
     get: (key: string) => api.get(`/v1/settings/${key}`).then(r => r.data),
     update: (key: string, value: any) =>
       api.put(`/v1/settings/${key}`, { value }).then(r => r.data),
     bulkUpdate: (settings: Record<string, any>) =>
       api.post('/v1/settings/bulk', { settings }).then(r => r.data)
   };

2. React Query hooks:

   const { data: settings, isLoading } = useQuery({
     queryKey: ['settings'],
     queryFn: () => settingsApi.getAll()
   });
   
   const saveMutation = useMutation({
     mutationFn: (changes: Record<string, any>) =>
       settingsApi.bulkUpdate(changes),
     onSuccess: () => {
       queryClient.invalidateQueries(['settings']);
       toast.success('Configuración guardada');
     }
   });
   

3. Agrupación por categoría:

   • Store Settings (nombre, dirección, teléfono)
   • Notification Settings (email, umbrales)
   • Tax Settings (tasa IVA, incluido en precio)

4. UX:

   • Loading skeleton mientras carga
   • Botón de guardar con estado de loading
   • Toast de éxito/error

---

Lecciones del Subagente

Que funcionó bien

• La dependencia de SA-007 estaba completa
• Los endpoints estaban bien documentados
• El patrón de api.ts fue fácil de extender

Mejoras sugeridas

• Agregar validación de formulario antes de enviar
• Incluir confirmación antes de cambios críticos