platform-marketing-content/orchestration/trazas/TRAZA-TAREAS-FRONTEND.md

385 lines
8.3 KiB
Markdown

# Traza de Tareas - Frontend Layer
**Proyecto:** Platform Marketing Content (PMC)
**Capa:** Frontend (React)
**Estado:** En progreso - Setup completado
**Ultima actualizacion:** 2025-12-08
---
## Resumen de Estado
| Modulo | Pages | Components | Hooks | Estado |
|--------|-------|------------|-------|--------|
| common | 0 | 4 | 0 | Completado |
| ui | 0 | 4 | 1 | Completado |
| auth | 1 | 0 | 0 | Parcial |
| dashboard | 1 | 0 | 0 | Parcial |
| crm | 0 | 0 | 0 | Pendiente |
| projects | 0 | 0 | 0 | Pendiente |
| generation | 0 | 0 | 0 | Pendiente |
| assets | 0 | 0 | 0 | Pendiente |
| automation | 0 | 0 | 0 | Pendiente |
| admin | 0 | 0 | 0 | Pendiente |
| **Total** | **2** | **8** | **1** | **20%** |
---
## Tareas Pendientes
### FE-001: Setup Inicial React + Vite
```yaml
ID: FE-001
Descripcion: Configurar proyecto React base
Estado: Pendiente
Asignado: Frontend-Agent-PMC
Entregables:
- apps/frontend/package.json
- apps/frontend/vite.config.ts
- apps/frontend/tsconfig.json
- apps/frontend/tailwind.config.js
- apps/frontend/src/main.tsx
- apps/frontend/src/App.tsx
- apps/frontend/src/index.css
Dependencias:
- Ninguna (primera tarea)
Criterios:
- [ ] npm run build pasa
- [ ] npm run lint pasa
- [ ] npm run dev inicia
- [ ] TailwindCSS funciona
```
### FE-002: shadcn/ui Setup
```yaml
ID: FE-002
Descripcion: Instalar y configurar shadcn/ui
Estado: Pendiente
Dependencias: FE-001
Entregables:
- src/components/ui/button.tsx
- src/components/ui/input.tsx
- src/components/ui/card.tsx
- src/components/ui/dialog.tsx
- src/components/ui/table.tsx
- src/components/ui/form.tsx
- src/lib/utils.ts
Criterios:
- [ ] Componentes basicos disponibles
- [ ] cn() funciona
```
### FE-003: Layout y Routing
```yaml
ID: FE-003
Descripcion: Estructura de layouts y rutas
Estado: Pendiente
Dependencias: FE-002
Entregables:
- src/components/common/Layout/MainLayout.tsx
- src/components/common/Layout/AuthLayout.tsx
- src/components/common/Layout/Sidebar.tsx
- src/components/common/Layout/Header.tsx
- src/routes/index.tsx
- src/routes/ProtectedRoute.tsx
Criterios:
- [ ] Navegacion funciona
- [ ] Rutas protegidas
```
### FE-004: Auth Store y API
```yaml
ID: FE-004
Descripcion: Stores de autenticacion y llamadas API
Estado: Pendiente
Dependencias: FE-003, BE-003
Entregables:
- src/stores/useAuthStore.ts
- src/stores/useTenantStore.ts
- src/services/api/client.ts
- src/services/api/auth.api.ts
- src/hooks/useAuth.ts
Criterios:
- [ ] Login/logout funciona
- [ ] Token persiste en localStorage
- [ ] Interceptor de auth en API
```
### FE-005: Auth Pages
```yaml
ID: FE-005
Descripcion: Paginas de autenticacion
Estado: Pendiente
Dependencias: FE-004
Entregables:
- src/pages/auth/LoginPage.tsx
- src/pages/auth/RegisterPage.tsx
- src/pages/auth/ForgotPasswordPage.tsx
- src/pages/auth/ResetPasswordPage.tsx
- src/pages/auth/AcceptInvitationPage.tsx
```
### FE-006: Dashboard
```yaml
ID: FE-006
Descripcion: Dashboard principal
Estado: Pendiente
Dependencias: FE-005, BE-010
Entregables:
- src/pages/dashboard/DashboardPage.tsx
- src/components/dashboard/StatsCard.tsx
- src/components/dashboard/RecentActivity.tsx
- src/components/dashboard/QuotaIndicator.tsx
```
### FE-007: CRM Pages
```yaml
ID: FE-007
Descripcion: Paginas de CRM
Estado: Pendiente
Dependencias: FE-006, BE-005
Entregables:
- src/pages/crm/ClientsPage.tsx
- src/pages/crm/ClientDetailPage.tsx
- src/pages/crm/BrandsPage.tsx
- src/pages/crm/BrandDetailPage.tsx
- src/pages/crm/ProductsPage.tsx
- src/components/crm/ClientCard.tsx
- src/components/crm/ClientForm.tsx
- src/components/crm/BrandCard.tsx
- src/hooks/useClients.ts
- src/hooks/useBrands.ts
```
### FE-008: Projects Pages
```yaml
ID: FE-008
Descripcion: Paginas de proyectos y campanas
Estado: Pendiente
Dependencias: FE-007, BE-007
Entregables:
- src/pages/projects/ProjectsPage.tsx
- src/pages/projects/ProjectDetailPage.tsx
- src/pages/projects/CampaignsPage.tsx
- src/pages/projects/CampaignDetailPage.tsx
- src/components/projects/ProjectCard.tsx
- src/components/projects/CampaignForm.tsx
- src/hooks/useProjects.ts
```
### FE-009: Generation Pages
```yaml
ID: FE-009
Descripcion: Paginas de generacion de contenido
Estado: Pendiente
Dependencias: FE-007, BE-008
Entregables:
- src/pages/generation/GenerationPage.tsx
- src/pages/generation/HistoryPage.tsx
- src/pages/generation/WorkflowsPage.tsx
- src/pages/generation/ModelsPage.tsx
- src/components/generation/GenerationPanel.tsx
- src/components/generation/PromptBuilder.tsx
- src/components/generation/ResultsGrid.tsx
- src/components/generation/ProgressIndicator.tsx
- src/hooks/useGeneration.ts
- src/hooks/useGenerationProgress.ts
```
### FE-010: Assets Pages
```yaml
ID: FE-010
Descripcion: Paginas de DAM
Estado: Pendiente
Dependencias: FE-006, BE-006
Entregables:
- src/pages/assets/AssetsPage.tsx
- src/pages/assets/AssetDetailPage.tsx
- src/pages/assets/CollectionsPage.tsx
- src/components/assets/AssetCard.tsx
- src/components/assets/AssetGrid.tsx
- src/components/assets/AssetUploader.tsx
- src/hooks/useAssets.ts
```
### FE-011: Admin Pages
```yaml
ID: FE-011
Descripcion: Paginas de administracion
Estado: Pendiente
Dependencias: FE-005, BE-003, BE-004
Entregables:
- src/pages/admin/UsersPage.tsx
- src/pages/admin/RolesPage.tsx
- src/pages/admin/SettingsPage.tsx
- src/pages/admin/BillingPage.tsx
- src/pages/admin/UsagePage.tsx
```
---
## Registro de Tareas Completadas
## [FE-001] Setup Inicial React + Vite
**Fecha:** 2025-12-08
**Estado:** Completado
**Agente:** Frontend-Agent-PMC
### Descripcion
Setup completo del proyecto React con Vite, TailwindCSS, shadcn/ui base components.
### Archivos Creados
- `apps/frontend/package.json`
- `apps/frontend/tsconfig.json`
- `apps/frontend/vite.config.ts`
- `apps/frontend/tailwind.config.js`
- `apps/frontend/postcss.config.js`
- `apps/frontend/index.html`
- `apps/frontend/src/main.tsx`
- `apps/frontend/src/App.tsx`
- `apps/frontend/src/index.css`
- `apps/frontend/src/lib/utils.ts`
---
## [FE-002] shadcn/ui Base Components
**Fecha:** 2025-12-08
**Estado:** Completado
**Agente:** Frontend-Agent-PMC
### Descripcion
Componentes UI base: Button, Input, Card, Toast.
### Archivos Creados
- `src/components/ui/button.tsx`
- `src/components/ui/input.tsx`
- `src/components/ui/card.tsx`
- `src/components/ui/toast.tsx`
- `src/components/ui/toaster.tsx`
- `src/hooks/use-toast.ts`
---
## [FE-003] Layout y Routing Base
**Fecha:** 2025-12-08
**Estado:** Completado
**Agente:** Frontend-Agent-PMC
### Descripcion
Estructura de layouts (Main, Auth) y routing basico.
### Archivos Creados
- `src/components/common/Layout/MainLayout.tsx`
- `src/components/common/Layout/AuthLayout.tsx`
- `src/components/common/Layout/Sidebar.tsx`
- `src/components/common/Layout/Header.tsx`
---
## [FE-004] Auth Store y API Client
**Fecha:** 2025-12-08
**Estado:** Completado
**Agente:** Frontend-Agent-PMC
### Descripcion
Store de autenticacion con Zustand y cliente API con interceptors.
### Archivos Creados
- `src/stores/useAuthStore.ts`
- `src/services/api/client.ts`
---
## [FE-005] Auth y Dashboard Pages Base
**Fecha:** 2025-12-08
**Estado:** Completado
**Agente:** Frontend-Agent-PMC
### Descripcion
Paginas iniciales de login y dashboard.
### Archivos Creados
- `src/pages/auth/LoginPage.tsx`
- `src/pages/dashboard/DashboardPage.tsx`
<!-- Template para tareas completadas:
## [FE-XXX] {Descripcion}
**Fecha:** {YYYY-MM-DD HH:MM}
**Estado:** Completado
**Agente:** Frontend-Agent-PMC
### Descripcion
{Que se hizo}
### Archivos Creados
- `src/pages/{modulo}/{Page}.tsx`
- `src/components/{modulo}/{Component}.tsx`
- `src/hooks/use{Hook}.ts`
### Archivos Modificados
- `src/routes/index.tsx` (nuevas rutas)
### Validaciones Ejecutadas
- [x] npm run build: PASA
- [x] npm run lint: PASA
- [x] npm run typecheck: PASA
- [x] Sin errores en consola: SI
- [x] Responsive: SI
### Screenshots
(Adjuntar si aplica)
### Inventario Actualizado
- orchestration/inventarios/FRONTEND_INVENTORY.yml
- Seccion: paginas.{modulo}
-->
---
## Referencias
- Inventario Frontend: `orchestration/inventarios/FRONTEND_INVENTORY.yml`
- User Stories: `docs/05-user-stories/`
- Prompt Frontend: `orchestration/prompts/PROMPT-FRONTEND-PMC.md`
- shadcn/ui: https://ui.shadcn.com/
---
**Generado por:** Requirements-Analyst
**Fecha:** 2025-12-08