docs update
This commit is contained in:
IGNY8 VPS (Salman)
@@ -1,228 +1,312 @@
|
||||
# Frontend Pages & Routes
|
||||
|
||||
**Last Verified:** December 25, 2025
|
||||
**Framework:** React 18 + TypeScript + React Router 6
|
||||
**Version:** 1.1.0
|
||||
**Framework:** React 19 + TypeScript + React Router 6 + Vite
|
||||
|
||||
---
|
||||
|
||||
## Route Configuration
|
||||
|
||||
Routes defined in `/frontend/src/App.tsx` with:
|
||||
- Auth guards via `PrivateRoute` component
|
||||
- Public routes for auth pages
|
||||
- Nested layouts with sidebar
|
||||
Routes defined in `/frontend/src/App.tsx`:
|
||||
- `PrivateRoute` - Requires authentication
|
||||
- `AdminRoute` - Requires admin/staff role
|
||||
- Nested layouts with `AppLayout` (sidebar + header)
|
||||
|
||||
---
|
||||
|
||||
## 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 |
|
||||
| Route | File | Description |
|
||||
|-------|------|-------------|
|
||||
| `/login` | `AuthPages/SignIn.tsx` | User login |
|
||||
| `/register` | `AuthPages/SignUp.tsx` | New account registration |
|
||||
| `/forgot-password` | `AuthPages/ForgotPassword.tsx` | Request password reset |
|
||||
| `/reset-password/:token` | `AuthPages/ResetPassword.tsx` | Set new password |
|
||||
| `/verify-email/:token` | `AuthPages/VerifyEmail.tsx` | Email verification |
|
||||
|
||||
---
|
||||
|
||||
## Dashboard Routes
|
||||
## Dashboard
|
||||
|
||||
| Route | Component | Module | Description |
|
||||
|-------|-----------|--------|-------------|
|
||||
| `/` | `Dashboard` | - | Main dashboard |
|
||||
| `/dashboard` | `Dashboard` | - | Main dashboard (alias) |
|
||||
| Route | File | Description |
|
||||
|-------|------|-------------|
|
||||
| `/` | `Dashboard/Home.tsx` | Main dashboard with workflow pipeline, metrics, quick actions |
|
||||
|
||||
---
|
||||
|
||||
## Planner Routes
|
||||
## SETUP 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 |
|
||||
### Add Keywords
|
||||
|
||||
| Route | File | Description |
|
||||
|-------|------|-------------|
|
||||
| `/setup/add-keywords` | `Setup/AddKeywords.tsx` | Browse/add seed keywords from global database |
|
||||
|
||||
### Content Settings
|
||||
|
||||
| Route | File | Description |
|
||||
|-------|------|-------------|
|
||||
| `/account/content-settings` | `account/ContentSettingsPage.tsx` | 3 tabs: Content Generation, Publishing, Image Settings |
|
||||
|
||||
### Sites
|
||||
|
||||
| Route | File | Description |
|
||||
|-------|------|-------------|
|
||||
| `/sites` | `Sites/List.tsx` | Site listing with filters |
|
||||
| `/sites/:id/dashboard` | `Sites/SiteDashboard.tsx` | Individual site overview |
|
||||
| `/sites/:id/settings` | `Sites/SiteSettings.tsx` | Site settings (General, Integrations, Content Types) |
|
||||
| `/sites/:id/content` | `Sites/SiteContent.tsx` | Site content management |
|
||||
|
||||
### Thinker (Admin Only)
|
||||
|
||||
| Route | File | Description |
|
||||
|-------|------|-------------|
|
||||
| `/thinker/prompts` | `Thinker/Prompts.tsx` | AI prompt template management |
|
||||
| `/thinker/author-profiles` | `Thinker/AuthorProfiles.tsx` | Author profile CRUD |
|
||||
| `/thinker/strategies` | `Thinker/Strategies.tsx` | Coming Soon placeholder |
|
||||
| `/thinker/image-testing` | `Thinker/ImageTesting.tsx` | Coming Soon placeholder |
|
||||
|
||||
---
|
||||
|
||||
## Writer Routes
|
||||
## WORKFLOW 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 |
|
||||
### Planner
|
||||
|
||||
| Route | File | Description | Tab |
|
||||
|-------|------|-------------|-----|
|
||||
| `/planner` | → `/planner/keywords` | Redirect | - |
|
||||
| `/planner/keywords` | `Planner/Keywords.tsx` | Keyword management, bulk actions | Keywords |
|
||||
| `/planner/clusters` | `Planner/Clusters.tsx` | Cluster listing, AI clustering | Clusters |
|
||||
| `/planner/clusters/:id` | `Planner/ClusterView.tsx` | Individual cluster view | - |
|
||||
| `/planner/ideas` | `Planner/Ideas.tsx` | Content ideas, queue to writer | Ideas |
|
||||
| `/planner/keyword-opportunities` | `Planner/KeywordOpportunities.tsx` | Seed keyword discovery (hidden) | - |
|
||||
|
||||
### Writer
|
||||
|
||||
| Route | File | Description | Tab |
|
||||
|-------|------|-------------|-----|
|
||||
| `/writer` | → `/writer/tasks` | Redirect | - |
|
||||
| `/writer/tasks` | `Writer/Tasks.tsx` | Task queue, content generation | Queue |
|
||||
| `/writer/drafts` | `Writer/Drafts.tsx` | Draft content listing | Drafts |
|
||||
| `/writer/content/:id` | `Writer/ContentView.tsx` | Content detail view (read-only) | - |
|
||||
| `/writer/images` | `Writer/Images.tsx` | Image management by content | Images |
|
||||
| `/writer/review` | `Writer/Review.tsx` | Review queue (status=review) | Review |
|
||||
| `/writer/published` | `Writer/Published.tsx` | Published content (status=published) | Published |
|
||||
|
||||
### Automation
|
||||
|
||||
| Route | File | Description |
|
||||
|-------|------|-------------|
|
||||
| `/automation` | `Automation/Dashboard.tsx` | 7-stage pipeline, schedule config, run controls |
|
||||
|
||||
### Linker (Optional Module)
|
||||
|
||||
| Route | File | Description |
|
||||
|-------|------|-------------|
|
||||
| `/linker` | → `/linker/content` | Redirect |
|
||||
| `/linker/content` | `Linker/Content.tsx` | Content list for internal linking |
|
||||
| `/linker/dashboard` | `Linker/Dashboard.tsx` | Not exposed in navigation |
|
||||
|
||||
### Optimizer (Optional Module)
|
||||
|
||||
| Route | File | Description |
|
||||
|-------|------|-------------|
|
||||
| `/optimizer` | → `/optimizer/content` | Redirect |
|
||||
| `/optimizer/content` | `Optimizer/Content.tsx` | Content list with optimization scores |
|
||||
| `/optimizer/preview/:id` | `Optimizer/AnalysisPreview.tsx` | Not linked from UI |
|
||||
| `/optimizer/dashboard` | `Optimizer/Dashboard.tsx` | Not exposed in navigation |
|
||||
|
||||
---
|
||||
|
||||
## Automation Routes
|
||||
## ACCOUNT Routes
|
||||
|
||||
| Route | Component | Module | Description |
|
||||
|-------|-----------|--------|-------------|
|
||||
| `/automation` | `AutomationPage` | Automation | Pipeline view |
|
||||
| `/automation/config` | `AutomationConfigPage` | Automation | Configuration |
|
||||
| `/automation/logs` | `AutomationLogsPage` | Automation | Activity logs |
|
||||
### Account Settings
|
||||
|
||||
| Route | File | Description |
|
||||
|-------|------|-------------|
|
||||
| `/account/settings` | `account/AccountSettingsPage.tsx` | 3 tabs: Account, Profile, Team |
|
||||
|
||||
**Tab Structure:**
|
||||
- **Account**: Organization name, billing address, tax ID
|
||||
- **Profile**: Name, email, phone, timezone, language, notifications, security
|
||||
- **Team**: Team member list, invite, remove
|
||||
|
||||
### Plans & Billing
|
||||
|
||||
| Route | File | Description |
|
||||
|-------|------|-------------|
|
||||
| `/account/plans` | `account/PlansAndBillingPage.tsx` | 3 tabs: Plan, Upgrade, History |
|
||||
|
||||
**Tab Structure:**
|
||||
- **Current Plan**: Plan details, features, credits, renewal date
|
||||
- **Upgrade Plan**: Pricing table, plan comparison
|
||||
- **History**: Invoices, payments, payment methods
|
||||
|
||||
### Usage
|
||||
|
||||
| Route | File | Description |
|
||||
|-------|------|-------------|
|
||||
| `/account/usage` | `account/UsageAnalyticsPage.tsx` | 3 tabs: Limits, Credit History, API Activity |
|
||||
|
||||
**Tab Structure:**
|
||||
- **Your Limits & Usage**: Hard + monthly limits with usage bars
|
||||
- **Credit History**: Transaction log
|
||||
- **API Activity**: Call statistics (currently placeholder data)
|
||||
|
||||
### AI Models (Admin Only)
|
||||
|
||||
| Route | File | Description |
|
||||
|-------|------|-------------|
|
||||
| `/settings/integration` | `Settings/IntegrationPage.tsx` | OpenAI, Runware config, image testing, site integrations |
|
||||
|
||||
---
|
||||
|
||||
## Linker Routes
|
||||
## HELP Routes
|
||||
|
||||
| Route | Component | Module | Description |
|
||||
|-------|-----------|--------|-------------|
|
||||
| `/linker` | `LinkerPage` | Linker | Internal linking (inactive) |
|
||||
| Route | File | Description |
|
||||
|-------|------|-------------|
|
||||
| `/help` | `Help/HelpCenter.tsx` | Documentation, FAQ, support CTAs |
|
||||
| `/help/docs` | `Help/Documentation.tsx` | Placeholder |
|
||||
| `/help/system-testing` | `Help/SystemTesting.tsx` | Placeholder |
|
||||
| `/help/function-testing` | `Help/FunctionTesting.tsx` | Placeholder |
|
||||
|
||||
---
|
||||
|
||||
## Optimizer Routes
|
||||
## Legacy Redirects
|
||||
|
||||
| Route | Component | Module | Description |
|
||||
|-------|-----------|--------|-------------|
|
||||
| `/optimizer` | `OptimizerPage` | Optimizer | SEO optimization (inactive) |
|
||||
These routes redirect to their new locations:
|
||||
|
||||
| Old Route | Redirects To |
|
||||
|-----------|--------------|
|
||||
| `/team` | `/account/settings` |
|
||||
| `/profile` | `/account/settings` |
|
||||
| `/import-export` | `/account/settings` |
|
||||
| `/billing/overview` | `/account/plans` |
|
||||
| `/billing/credits` | `/account/plans` (separate page exists at `Billing/CreditPurchase.tsx`) |
|
||||
| `/billing/history` | `/account/plans` |
|
||||
| `/publishing` | `/account/content-settings` |
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
## Page File Locations
|
||||
|
||||
```
|
||||
frontend/src/pages/
|
||||
├── auth/
|
||||
│ ├── LoginPage.tsx
|
||||
│ ├── RegisterPage.tsx
|
||||
│ ├── ForgotPasswordPage.tsx
|
||||
│ └── ResetPasswordPage.tsx
|
||||
├── dashboard/
|
||||
├── account/
|
||||
│ ├── AccountSettingsPage.tsx # Account, Profile, Team tabs
|
||||
│ ├── ContentSettingsPage.tsx # Content Gen, Publishing, Images tabs
|
||||
│ ├── PlansAndBillingPage.tsx # Plan, Upgrade, History tabs
|
||||
│ ├── UsageAnalyticsPage.tsx # Limits, Credit History, API tabs
|
||||
│ ├── UsageLimits.tsx # Limits tab component
|
||||
│ └── CreditActivity.tsx # Credit History tab component
|
||||
├── AuthPages/
|
||||
│ ├── SignIn.tsx
|
||||
│ ├── SignUp.tsx
|
||||
│ ├── ForgotPassword.tsx
|
||||
│ ├── ResetPassword.tsx
|
||||
│ └── VerifyEmail.tsx
|
||||
├── Automation/
|
||||
│ └── 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
|
||||
├── Billing/
|
||||
│ └── CreditPurchase.tsx
|
||||
├── Dashboard/
|
||||
│ └── Home.tsx
|
||||
├── Help/
|
||||
│ ├── HelpCenter.tsx
|
||||
│ ├── Documentation.tsx # Placeholder
|
||||
│ ├── SystemTesting.tsx # Placeholder
|
||||
│ └── FunctionTesting.tsx # Placeholder
|
||||
├── Linker/
|
||||
│ ├── Content.tsx
|
||||
│ └── Dashboard.tsx # Not exposed
|
||||
├── Optimizer/
|
||||
│ ├── Content.tsx
|
||||
│ ├── AnalysisPreview.tsx # Not linked
|
||||
│ └── Dashboard.tsx # Not exposed
|
||||
├── Planner/
|
||||
│ ├── Keywords.tsx
|
||||
│ ├── Clusters.tsx
|
||||
│ ├── ClusterView.tsx
|
||||
│ ├── Ideas.tsx
|
||||
│ └── KeywordOpportunities.tsx # Not in nav
|
||||
├── Settings/
|
||||
│ └── IntegrationPage.tsx # AI Models (admin)
|
||||
├── Setup/
|
||||
│ └── AddKeywords.tsx
|
||||
├── Sites/
|
||||
│ ├── List.tsx
|
||||
│ ├── SiteDashboard.tsx
|
||||
│ ├── SiteSettings.tsx
|
||||
│ ├── SiteContent.tsx
|
||||
│ └── Manage.tsx # Possibly redundant
|
||||
├── Thinker/
|
||||
│ ├── Prompts.tsx
|
||||
│ ├── AuthorProfiles.tsx
|
||||
│ ├── Strategies.tsx # Coming Soon
|
||||
│ └── ImageTesting.tsx # Coming Soon
|
||||
└── Writer/
|
||||
├── Tasks.tsx
|
||||
├── Drafts.tsx
|
||||
├── ContentView.tsx
|
||||
├── Images.tsx
|
||||
├── Review.tsx
|
||||
└── Published.tsx
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Route Guards
|
||||
|
||||
### PrivateRoute Component
|
||||
|
||||
```typescript
|
||||
// frontend/src/components/auth/PrivateRoute.tsx
|
||||
- Checks authentication state
|
||||
- Redirects to /login if not authenticated
|
||||
### PrivateRoute
|
||||
- Checks `authStore.isAuthenticated`
|
||||
- Redirects to `/login` if not authenticated
|
||||
- Stores intended destination for post-login redirect
|
||||
```
|
||||
|
||||
### AdminRoute
|
||||
- Requires `user.role === 'admin'` or `user.is_staff === true`
|
||||
- Used for: Thinker module, AI Models page
|
||||
|
||||
### Module-Based Visibility
|
||||
|
||||
Sidebar items hidden when module disabled:
|
||||
- Controlled by `moduleStore.isModuleEnabled()`
|
||||
- Does NOT block direct URL access (pending implementation)
|
||||
- Sidebar items hidden via `moduleStore.isModuleEnabled()`
|
||||
- Routes still accessible via direct URL (no server-side blocking)
|
||||
|
||||
---
|
||||
|
||||
## Navigation Structure
|
||||
|
||||
### Main Sidebar (`AppSidebar.tsx`)
|
||||
## Navigation Structure (Sidebar)
|
||||
|
||||
```
|
||||
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
|
||||
├── SETUP
|
||||
│ ├── Add Keywords
|
||||
│ ├── Content Settings
|
||||
│ ├── Sites [if site_builder enabled]
|
||||
│ └── Thinker [admin only, if thinker enabled]
|
||||
├── WORKFLOW
|
||||
│ ├── Planner [if planner enabled]
|
||||
│ │ └── In-page: Keywords → Clusters → Ideas
|
||||
│ ├── Writer [if writer enabled]
|
||||
│ │ └── In-page: Queue → Drafts → Images → Review → Published
|
||||
│ ├── Automation [if automation enabled]
|
||||
│ ├── Linker [if linker enabled]
|
||||
│ └── Optimizer [if optimizer enabled]
|
||||
├── ACCOUNT
|
||||
│ ├── Account Settings (Account → Profile → Team)
|
||||
│ ├── Plans & Billing (Plan → Upgrade → History)
|
||||
│ ├── Usage (Limits → Credit History → API Activity)
|
||||
│ └── AI Models [admin only]
|
||||
└── HELP
|
||||
└── Help & Docs
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Layout Components
|
||||
## Known Issues (from Audit)
|
||||
|
||||
| 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 |
|
||||
1. **KeywordOpportunities** not accessible from navigation
|
||||
2. **Linker/Optimizer Dashboards** exist but not exposed
|
||||
3. **Help sub-pages** are placeholders
|
||||
4. **ContentView** is read-only (no editing capability)
|
||||
5. Legacy redirects may cause confusion
|
||||
|
||||
---
|
||||
|
||||
## 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 |
|
||||
See `/PRE-LAUNCH-AUDIT.md` for complete issue list.
|
||||
|
||||
Reference in New Issue
Block a user