docs & ux improvmeents

2025-12-25 20:31:58 +00:00
parent 90e6e96b2b
commit 4bffede052
247 changed files with 6869 additions and 53517 deletions
--- a/docs/30-FRONTEND/PAGES.md
+++ b/docs/30-FRONTEND/PAGES.md
@@ -0,0 +1,228 @@
+# Frontend Pages & Routes
+
+**Last Verified:** December 25, 2025  
+**Framework:** React 18 + TypeScript + React Router 6
+
+---
+
+## Route Configuration
+
+Routes defined in `/frontend/src/App.tsx` with:
+- Auth guards via `PrivateRoute` component
+- Public routes for auth pages
+- Nested layouts with sidebar
+
+---
+
+## Public Routes (No Auth Required)
+
+| Route | Component | Description |
+|-------|-----------|-------------|
+| `/login` | `LoginPage` | User login |
+| `/register` | `RegisterPage` | New account |
+| `/forgot-password` | `ForgotPasswordPage` | Request reset |
+| `/reset-password/:token` | `ResetPasswordPage` | Set new password |
+| `/verify-email/:token` | `VerifyEmailPage` | Email verification |
+
+---
+
+## Dashboard Routes
+
+| Route | Component | Module | Description |
+|-------|-----------|--------|-------------|
+| `/` | `Dashboard` | - | Main dashboard |
+| `/dashboard` | `Dashboard` | - | Main dashboard (alias) |
+
+---
+
+## Planner Routes
+
+| Route | Component | Module | Description |
+|-------|-----------|--------|-------------|
+| `/planner` | `PlannerPage` | Planner | Keyword management |
+| `/planner/keywords` | `KeywordsPage` | Planner | Keywords list |
+| `/planner/clusters` | `ClustersPage` | Planner | Cluster view |
+| `/planner/ideas` | `ContentIdeasPage` | Planner | Content ideas |
+
+---
+
+## Writer Routes
+
+| Route | Component | Module | Description |
+|-------|-----------|--------|-------------|
+| `/writer` | `WriterPage` | Writer | Task management |
+| `/writer/tasks` | `TasksPage` | Writer | Task list |
+| `/writer/content` | `ContentListPage` | Writer | Content list |
+| `/writer/content/:id` | `ContentEditorPage` | Writer | Edit content |
+
+---
+
+## Automation Routes
+
+| Route | Component | Module | Description |
+|-------|-----------|--------|-------------|
+| `/automation` | `AutomationPage` | Automation | Pipeline view |
+| `/automation/config` | `AutomationConfigPage` | Automation | Configuration |
+| `/automation/logs` | `AutomationLogsPage` | Automation | Activity logs |
+
+---
+
+## Linker Routes
+
+| Route | Component | Module | Description |
+|-------|-----------|--------|-------------|
+| `/linker` | `LinkerPage` | Linker | Internal linking (inactive) |
+
+---
+
+## Optimizer Routes
+
+| Route | Component | Module | Description |
+|-------|-----------|--------|-------------|
+| `/optimizer` | `OptimizerPage` | Optimizer | SEO optimization (inactive) |
+
+---
+
+## Settings Routes
+
+| Route | Component | Description |
+|-------|-----------|-------------|
+| `/settings` | `SettingsPage` | Settings index |
+| `/settings/sites` | `SitesSettingsPage` | Site management |
+| `/settings/sites/:id` | `SiteDetailPage` | Site details |
+| `/settings/sectors` | `SectorsSettingsPage` | Sector management |
+| `/settings/users` | `UsersSettingsPage` | User management |
+| `/settings/integrations` | `IntegrationsSettingsPage` | Integration setup |
+| `/settings/integrations/:id` | `IntegrationDetailPage` | Integration details |
+| `/settings/prompts` | `PromptsSettingsPage` | AI prompts |
+| `/settings/modules` | `ModulesSettingsPage` | Module enable/disable |
+| `/settings/api-keys` | `APIKeysSettingsPage` | AI API keys |
+| `/settings/billing` | `BillingSettingsPage` | Credit/billing |
+
+---
+
+## Profile Routes
+
+| Route | Component | Description |
+|-------|-----------|-------------|
+| `/profile` | `ProfilePage` | User profile |
+| `/profile/account` | `AccountPage` | Account settings |
+| `/profile/security` | `SecurityPage` | Password/2FA |
+
+---
+
+## Page Components Location
+
+```
+frontend/src/pages/
+├── auth/
+│   ├── LoginPage.tsx
+│   ├── RegisterPage.tsx
+│   ├── ForgotPasswordPage.tsx
+│   └── ResetPasswordPage.tsx
+├── dashboard/
+│   └── Dashboard.tsx
+├── planner/
+│   ├── PlannerPage.tsx
+│   ├── KeywordsPage.tsx
+│   ├── ClustersPage.tsx
+│   └── ContentIdeasPage.tsx
+├── writer/
+│   ├── WriterPage.tsx
+│   ├── TasksPage.tsx
+│   ├── ContentListPage.tsx
+│   └── ContentEditorPage.tsx
+├── automation/
+│   ├── AutomationPage.tsx
+│   ├── AutomationConfigPage.tsx
+│   └── AutomationLogsPage.tsx
+├── linker/
+│   └── LinkerPage.tsx
+├── optimizer/
+│   └── OptimizerPage.tsx
+├── settings/
+│   ├── SettingsPage.tsx
+│   ├── SitesSettingsPage.tsx
+│   ├── SectorsSettingsPage.tsx
+│   ├── UsersSettingsPage.tsx
+│   ├── IntegrationsSettingsPage.tsx
+│   ├── PromptsSettingsPage.tsx
+│   ├── ModulesSettingsPage.tsx
+│   ├── APIKeysSettingsPage.tsx
+│   └── BillingSettingsPage.tsx
+└── profile/
+    ├── ProfilePage.tsx
+    └── SecurityPage.tsx
+```
+
+---
+
+## Route Guards
+
+### PrivateRoute Component
+
+```typescript
+// frontend/src/components/auth/PrivateRoute.tsx
+- Checks authentication state
+- Redirects to /login if not authenticated
+- Stores intended destination for post-login redirect
+```
+
+### Module-Based Visibility
+
+Sidebar items hidden when module disabled:
+- Controlled by `moduleStore.isModuleEnabled()`
+- Does NOT block direct URL access (pending implementation)
+
+---
+
+## Navigation Structure
+
+### Main Sidebar (`AppSidebar.tsx`)
+
+```
+Dashboard
+├── Planner [if enabled]
+│   ├── Keywords
+│   ├── Clusters
+│   └── Ideas
+├── Writer [if enabled]
+│   ├── Tasks
+│   └── Content
+├── Automation [if enabled]
+├── Linker [if enabled, hidden by default]
+├── Optimizer [if enabled, hidden by default]
+└── Settings
+```
+
+---
+
+## Layout Components
+
+| Component | Location | Purpose |
+|-----------|----------|---------|
+| `AppLayout` | `/layouts/AppLayout.tsx` | Main app wrapper |
+| `AppSidebar` | `/components/sidebar/AppSidebar.tsx` | Navigation sidebar |
+| `AppHeader` | `/components/header/AppHeader.tsx` | Top navigation |
+| `PageHeader` | `/components/common/PageHeader.tsx` | Page title section |
+| `ContentContainer` | `/components/common/ContentContainer.tsx` | Content wrapper |
+
+---
+
+## State Context
+
+All routes have access to:
+- `useAuthStore()` - User/account info
+- `useSiteStore()` - Current site selection
+- `useSectorStore()` - Current sector selection
+- `useModuleStore()` - Module enable states
+
+---
+
+## Planned Changes
+
+| Item | Description | Priority |
+|------|-------------|----------|
+| Route-level guards | Block disabled module routes, not just hide sidebar | High |
+| Breadcrumbs | Add breadcrumb navigation | Medium |
+| Route analytics | Track page views | Low |