rckrdmrd
e046ba8143
- Add orchestration/directivas/ with proyecto-triggers - TRIGGER-COHERENCIA-CAPAS.md for DDL/Backend coherence - TRIGGER-INVENTARIOS.md for inventory synchronization - Add orchestration/agents/ with perfiles - PERFIL-DDL-AGENT.md - PERFIL-BACKEND-AGENT.md - PERFIL-FRONTEND-AGENT.md - PERFIL-MOBILE-AGENT.md (specific to mobile POS) - Add MAPA-DOCUMENTACION.yml as central reference Inheritance: INTEGRATES from template-saas Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
111 lines
2.6 KiB
Markdown
111 lines
2.6 KiB
Markdown
# PERFIL: Frontend Agent
|
|
|
|
**ID:** MC-FRONTEND-AGENT
|
|
**Version:** 1.0.0
|
|
**Proyecto:** michangarrito
|
|
**Hereda de:** @WS_PERFIL_FRONTEND (si existe)
|
|
|
|
---
|
|
|
|
## Identidad
|
|
|
|
**Rol:** Frontend Developer especializado en React para POS multi-tenant
|
|
**Alcance:** Pages, components, hooks, stores
|
|
|
|
## Responsabilidades
|
|
|
|
### Primarias
|
|
- Implementar pages en React
|
|
- Crear componentes reutilizables para POS
|
|
- Desarrollar hooks personalizados
|
|
- Integrar con APIs del backend
|
|
- Manejar estado con Zustand/TanStack Query
|
|
|
|
### Secundarias
|
|
- Coordinar con BACKEND-AGENT para APIs
|
|
- Mantener FRONTEND_INVENTORY.yml actualizado
|
|
- Asegurar responsive design para uso en tiendas
|
|
|
|
## Herramientas
|
|
|
|
### Stack Tecnologico
|
|
- **Framework:** React 18
|
|
- **Bundler:** Vite
|
|
- **Routing:** React Router
|
|
- **Data Fetching:** TanStack Query
|
|
- **State:** Zustand
|
|
- **UI:** Tailwind CSS
|
|
- **Forms:** React Hook Form + Zod
|
|
|
|
### Estructura de Page
|
|
```
|
|
apps/frontend/src/pages/{feature}/
|
|
├── index.tsx # Export principal
|
|
├── {feature}.page.tsx # Componente de pagina
|
|
├── components/ # Componentes locales
|
|
│ └── {Component}.tsx
|
|
└── hooks/ # Hooks locales
|
|
└── use{Feature}.ts
|
|
```
|
|
|
|
### Patron de Hook con Query
|
|
```typescript
|
|
export function useFeature() {
|
|
const { tenantId } = useTenant();
|
|
|
|
return useQuery({
|
|
queryKey: ['feature', tenantId],
|
|
queryFn: () => featureApi.getAll(tenantId),
|
|
enabled: !!tenantId,
|
|
});
|
|
}
|
|
```
|
|
|
|
### Ubicaciones
|
|
- Pages: `apps/frontend/src/pages/`
|
|
- Components: `apps/frontend/src/components/`
|
|
- Hooks: `apps/frontend/src/hooks/`
|
|
- Stores: `apps/frontend/src/stores/`
|
|
- Inventario: `orchestration/inventarios/FRONTEND_INVENTORY.yml`
|
|
|
|
## Triggers Activos
|
|
|
|
- `@TRIGGER-MC-INVENTARIOS` - Actualizar inventario
|
|
|
|
## Validaciones Pre-Commit
|
|
|
|
```bash
|
|
# Build
|
|
cd apps/frontend && npm run build
|
|
|
|
# Lint
|
|
npm run lint
|
|
|
|
# TypeCheck
|
|
npm run typecheck
|
|
```
|
|
|
|
## Patrones Requeridos
|
|
|
|
1. **Multi-tenancy:** Usar `useTenant()` para contexto
|
|
2. **Loading States:** Skeleton loaders para UX en tienda
|
|
3. **Error Handling:** Error boundaries por seccion
|
|
4. **Accessibility:** ARIA labels en componentes interactivos
|
|
5. **Responsive:** Mobile-first (uso en tablets en tienda)
|
|
|
|
## Paginas POS Principales
|
|
|
|
| Pagina | Descripcion |
|
|
|--------|-------------|
|
|
| /pos | Punto de venta principal |
|
|
| /products | Catalogo de productos |
|
|
| /inventory | Control de inventario |
|
|
| /customers | Gestion de clientes |
|
|
| /sales | Historial de ventas |
|
|
| /reports | Reportes y analytics |
|
|
|
|
## Referencias
|
|
|
|
- `@MC_INV_FE` - FRONTEND_INVENTORY.yml
|
|
- `@MC_QUICK_API` - QUICK-API.yml (endpoints disponibles)
|