# FRONTEND_INVENTORY.yml - Platform Marketing Content # Inventario de frontend React # Version: 1.0.0 # Fecha: 2025-12-08 # Estado: Planificacion (sin implementar) version: "1.0.0" proyecto: "Platform Marketing Content" fecha_actualizacion: "2025-12-08" estado: planificado # ============================================================================= # RESUMEN # ============================================================================= resumen: framework: React 18+ lenguaje: TypeScript state_management: Zustand styling: TailwindCSS + shadcn/ui routing: React Router v6 data_fetching: TanStack Query forms: React Hook Form + Zod paginas_planificadas: ~35 componentes_estimados: ~120 # ============================================================================= # ESTRUCTURA DE CARPETAS # ============================================================================= estructura: path: apps/frontend/src carpetas: - components/ - pages/ - hooks/ - stores/ - services/ - types/ - utils/ - layouts/ - routes/ # ============================================================================= # PAGINAS POR MODULO # ============================================================================= paginas: auth: - LoginPage - RegisterPage - ForgotPasswordPage - ResetPasswordPage - AcceptInvitationPage - ProfilePage estado: planificado dashboard: - DashboardPage - AnalyticsOverviewPage estado: planificado crm: - ClientsListPage - ClientDetailPage - ClientCreatePage - BrandsListPage - BrandDetailPage - BrandCreatePage - ProductsListPage - ProductDetailPage - ProductCreatePage estado: planificado projects: - ProjectsListPage - ProjectDetailPage - ProjectCreatePage - CampaignsListPage - CampaignDetailPage - CampaignCreatePage - BriefDetailPage estado: planificado generation: - GenerationPage - GenerationHistoryPage - WorkflowsPage - ModelsPage - ModelTrainingPage estado: planificado assets: - AssetsLibraryPage - AssetDetailPage - CollectionsPage - CollectionDetailPage estado: planificado automation: - AutomationFlowsPage - FlowEditorPage - WebhooksPage estado: planificado admin: - UsersPage - RolesPage - SettingsPage - BillingPage - UsagePage estado: planificado # ============================================================================= # COMPONENTES COMUNES # ============================================================================= componentes_comunes: ui: descripcion: Componentes base de UI (shadcn/ui) componentes: - Button - Input - Select - Checkbox - Radio - Modal/Dialog - Dropdown - Tabs - Table - Card - Badge - Avatar - Tooltip - Toast - Skeleton layout: descripcion: Componentes de layout componentes: - MainLayout - AuthLayout - Sidebar - Header - Footer - Breadcrumbs forms: descripcion: Componentes de formularios componentes: - FormField - FormSelect - FormTextarea - FormDatePicker - FormFileUpload - FormColorPicker data: descripcion: Componentes de datos componentes: - DataTable - Pagination - SearchInput - FilterPanel - SortDropdown - EmptyState - LoadingState - ErrorState # ============================================================================= # COMPONENTES POR MODULO # ============================================================================= componentes_modulo: crm: - ClientCard - ClientForm - BrandCard - BrandForm - BrandStyleGuide - ProductCard - ProductForm - ProductGallery projects: - ProjectCard - ProjectForm - CampaignCard - CampaignForm - CampaignTimeline - BriefEditor - ApprovalWorkflow - AssetSelector generation: - GenerationPanel - PromptBuilder - WorkflowSelector - ModelSelector - ParameterControls - GenerationPreview - GenerationProgress - BatchGenerator - ResultsGrid - VariationControls assets: - AssetCard - AssetGrid - AssetUploader - AssetViewer - AssetEditor - CollectionCard - CollectionGrid - VersionHistory - CommentThread automation: - FlowCard - FlowCanvas - NodePalette - TriggerConfig - ActionConfig - WebhookCard - EventLog # ============================================================================= # STORES (Zustand) # ============================================================================= stores: useAuthStore: proposito: Autenticacion y sesion estado: - user - token - isAuthenticated - permissions acciones: - login - logout - refreshToken - updateProfile useTenantStore: proposito: Contexto de tenant estado: - tenant - plan - limits - usage acciones: - setTenant - refreshUsage useUIStore: proposito: Estado de UI estado: - sidebarOpen - theme - notifications acciones: - toggleSidebar - setTheme - addNotification useGenerationStore: proposito: Estado de generacion estado: - currentJob - queue - history - progress acciones: - startGeneration - cancelJob - clearHistory # ============================================================================= # HOOKS PERSONALIZADOS # ============================================================================= hooks: auth: - useAuth - usePermissions - useCurrentUser data: - useClients - useBrands - useProducts - useProjects - useCampaigns - useAssets - useCollections generation: - useGeneration - useWorkflows - useModels - useGenerationProgress utils: - useDebounce - useLocalStorage - usePagination - useInfiniteScroll - useMediaQuery - useWebSocket # ============================================================================= # SERVICIOS API # ============================================================================= servicios_api: auth: - authApi.login - authApi.register - authApi.logout - authApi.refreshToken - authApi.forgotPassword - authApi.resetPassword crm: - clientsApi.getAll - clientsApi.getById - clientsApi.create - clientsApi.update - clientsApi.delete - brandsApi.* - productsApi.* projects: - projectsApi.* - campaignsApi.* - briefsApi.* - approvalsApi.* generation: - generationApi.create - generationApi.cancel - generationApi.getStatus - generationApi.getHistory - workflowsApi.* - modelsApi.* assets: - assetsApi.upload - assetsApi.download - assetsApi.getAll - assetsApi.update - assetsApi.delete - collectionsApi.* # ============================================================================= # RUTAS # ============================================================================= rutas: publicas: - /login - /register - /forgot-password - /reset-password - /invitation/:token privadas: dashboard: - / - /analytics crm: - /clients - /clients/new - /clients/:id - /brands - /brands/new - /brands/:id - /products - /products/new - /products/:id projects: - /projects - /projects/new - /projects/:id - /campaigns - /campaigns/new - /campaigns/:id generation: - /generate - /generate/history - /workflows - /models - /models/train assets: - /assets - /assets/:id - /collections - /collections/:id automation: - /automation - /automation/new - /automation/:id - /webhooks admin: - /admin/users - /admin/roles - /admin/settings - /admin/billing - /admin/usage # ============================================================================= # INTEGRACIONES # ============================================================================= integraciones: websocket: proposito: Progreso de generacion en tiempo real eventos: - generation:progress - generation:completed - generation:failed - notification:new storage: proposito: Upload directo a S3/MinIO metodo: Presigned URLs # ============================================================================= # REFERENCIAS # ============================================================================= referencias: guia_convenciones: docs/95-guias-desarrollo/GUIA-CONVENCIONES.md ui_components: https://ui.shadcn.com/ stack_adr: docs/97-adr/ADR-001-stack-tecnologico.md # ============================================================================= # METADATOS # ============================================================================= metadata: creado_por: Requirements-Analyst fecha_creacion: "2025-12-08" ultima_actualizacion: "2025-12-08" estado_implementacion: pendiente