rckrdmrd/michangarrito
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
2fb9f3f6b5
michangarrito/orchestration/_archive/agents/perfiles/PERFIL-FRONTEND-AGENT.md
Adrian Flores Cortes 2fb9f3f6b5
Some checks are pending
CI/CD Pipeline / Backend CI (push) Waiting to run
Details
CI/CD Pipeline / Frontend CI (push) Waiting to run
Details
CI/CD Pipeline / WhatsApp Service CI (push) Waiting to run
Details
CI/CD Pipeline / Mobile CI (push) Waiting to run
Details
CI/CD Pipeline / Docker Build (./apps/backend, ./apps/backend/Dockerfile, backend) (push) Blocked by required conditions
Details
CI/CD Pipeline / Docker Build (./apps/frontend, ./apps/frontend/Dockerfile, frontend) (push) Blocked by required conditions
Details
CI/CD Pipeline / Docker Build (./apps/whatsapp-service, ./apps/whatsapp-service/Dockerfile, whatsapp-service) (push) Blocked by required conditions
Details
CI/CD Pipeline / Deploy to Production (push) Blocked by required conditions
Details
[ESTANDAR-ORCHESTRATION] refactor: Consolidate to standard structure 
- Move 7 non-standard folders to _archive/
- Archive 3 extra root files
- Update _MAP.md with standardized structure

Standard: SIMCO-ESTANDAR-ORCHESTRATION v1.0.0
Level: CONSUMER (L2)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-24 14:38:04 -06:00

2.6 KiB
Raw Blame History

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

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

# 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)