502 lines
18 KiB
Markdown
502 lines
18 KiB
Markdown
# Frontend Pages & Routes
|
|
|
|
**Last Verified:** January 17, 2026
|
|
**Version:** 1.8.0
|
|
**Framework:** React 19 + TypeScript + React Router 6 + Vite
|
|
|
|
---
|
|
|
|
## Route Configuration
|
|
|
|
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 | 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 |
|
|
|
|
---
|
|
|
|
## Legal Pages (v1.3.0)
|
|
|
|
| Route | File | Description |
|
|
|-------|------|-------------|
|
|
| `/privacy` | `legal/Privacy.tsx` | Privacy Policy |
|
|
| `/terms` | `legal/Terms.tsx` | Terms of Service |
|
|
|
|
---
|
|
|
|
## Dashboard
|
|
|
|
| Route | File | Description |
|
|
|-------|------|-------------|
|
|
| `/` | `Dashboard/Home.tsx` | Main dashboard with workflow pipeline, metrics, quick actions |
|
|
|
|
**v1.2.0 Dashboard Widgets:**
|
|
- `WorkflowPipelineWidget` - Visual flow: Sites → Keywords → Clusters → Ideas → Tasks → Drafts → Published
|
|
- `AIOperationsWidget` - Operation stats (clustering, ideas, content, images) with time filter (7d/30d/90d)
|
|
- `RecentActivityWidget` - Activity feed with type-specific icons
|
|
- `ContentVelocityWidget` - Week/Month/Total metrics table
|
|
- `AutomationStatusWidget` - Status, schedule, last/next run, run controls
|
|
- `NeedsAttentionBar` - Alert bar for pending actions requiring attention
|
|
- `QuickActionsWidget` - Quick action buttons for common tasks
|
|
|
|
**Data Sources:**
|
|
- Pipeline counts from actual API calls (keywords, clusters, ideas, tasks, content)
|
|
- AI operations derived from content creation totals
|
|
- Activity generated from real data with capped display values
|
|
|
|
---
|
|
|
|
## SETUP Routes
|
|
|
|
### Onboarding Wizard (NEW v1.3.2)
|
|
|
|
| Route | File | Description |
|
|
|-------|------|-------------|
|
|
| `/setup/wizard` | `Setup/SetupWizard.tsx` | 5-step onboarding wizard for new users |
|
|
|
|
**Steps:**
|
|
1. **Welcome** - Feature overview, get started CTA
|
|
2. **Add Site** - Site name, industry/sector selection, creates site with defaults
|
|
3. **Connect Integration** - WordPress plugin installation (optional, can skip)
|
|
4. **Add Keywords** - Initial keyword entry with paste support (optional)
|
|
5. **Complete** - Success summary, next steps, go to dashboard
|
|
|
|
**Components:** `frontend/src/components/onboarding/`
|
|
- `OnboardingWizard.tsx` - Main wizard container and state
|
|
- `steps/Step1Welcome.tsx` - Welcome screen
|
|
- `steps/Step2AddSite.tsx` - Site creation with SelectDropdown + Badge sectors
|
|
- `steps/Step3ConnectIntegration.tsx` - WordPress setup
|
|
- `steps/Step4AddKeywords.tsx` - Keyword input
|
|
- `steps/Step5Complete.tsx` - Completion summary
|
|
|
|
### Add Keywords
|
|
|
|
| Route | File | Description |
|
|
|-------|------|-------------|
|
|
| `/setup/add-keywords` | `Setup/IndustriesSectorsKeywords.tsx` | Browse/add seed keywords from global database |
|
|
|
|
**Features:**
|
|
- Industry → Sector → Keywords browse hierarchy
|
|
- "Show not-added only" filter toggle
|
|
- Real-time keyword count summary (added/total)
|
|
- "Next: Plan Your Content" CTA button
|
|
- "Keyword Research" coming soon teaser
|
|
|
|
### Content Settings
|
|
|
|
| Route | File | Description |
|
|
|-------|------|-------------|
|
|
| `/account/content-settings` | `account/ContentSettingsPage.tsx` | 3 tabs: Content Generation, Publishing, Image Settings |
|
|
|
|
**API Endpoints:** Settings persisted via `/api/v1/system/settings/content/{key}/`
|
|
|
|
### Sites
|
|
|
|
| Route | File | Description |
|
|
|-------|------|-------------|
|
|
| `/sites` | `Sites/List.tsx` | Site listing with setup checklist per site |
|
|
| `/sites/:id` | `Sites/Dashboard.tsx` | Site dashboard with quick actions and widgets |
|
|
| `/sites/:id/settings` | `Sites/Settings.tsx` | Site settings (General, Automation, Integrations) |
|
|
|
|
**v1.8.0 Changes:**
|
|
- Site Settings now has 3 tabs: General, Automation, Integrations
|
|
- Automation tab consolidates all AI, Automation, and Publishing settings
|
|
- Removed separate AI Settings tab
|
|
- Uses `AIAutomationSettings.tsx` component for unified settings UI
|
|
|
|
**v1.3.2 Changes:**
|
|
- Site Dashboard redesigned with SiteInfoBar component
|
|
- Quick actions now 2-column card grid layout
|
|
- AI Operations widget loads real data from getDashboardStats API
|
|
- Fixed race condition in async loadSiteData
|
|
|
|
**Components:**
|
|
- `SiteSetupChecklist` - Shows setup progress (site created, industry/sectors, WordPress, keywords)
|
|
- `SiteInfoBar` - Reusable site info header for site-specific pages
|
|
- `AIAutomationSettings` - Unified settings component (v1.8.0)
|
|
|
|
### 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 |
|
|
|
|
---
|
|
|
|
## WORKFLOW Routes
|
|
|
|
### 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 |
|
|
|
|
### 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/approved` | `Writer/Approved.tsx` | Approved content (status=approved/published) | Approved |
|
|
|
|
**v1.2.0 Changes:**
|
|
- Renamed "Published" to "Approved" page
|
|
- Legacy route `/writer/published` redirects to `/writer/approved`
|
|
- ThreeWidgetFooter added to Tasks, Content pages
|
|
|
|
### Automation
|
|
|
|
| Route | File | Description |
|
|
|-------|------|-------------|
|
|
| `/automation` | `Automation/AutomationPage.tsx` | 7-stage pipeline, run controls |
|
|
| `/automation/overview` | `Automation/AutomationOverview.tsx` | Run history dashboard (v1.7.0) |
|
|
| `/automation/runs/:id` | `Automation/AutomationRunDetail.tsx` | Detailed run view (v1.7.0) |
|
|
|
|
**v1.8.0 Changes:**
|
|
- Removed `/automation/settings` route (merged into Site Settings → Automation tab)
|
|
- Added redirect from `/automation/settings` to `/sites/settings?tab=automation`
|
|
|
|
**v1.7.0 Changes:**
|
|
- Added AutomationOverview page with run history
|
|
- Added AutomationRunDetail page for detailed run information
|
|
|
|
---
|
|
|
|
## PUBLISHER Routes (NEW v1.3.2)
|
|
|
|
### Content Calendar
|
|
|
|
| Route | File | Description |
|
|
|-------|------|-------------|
|
|
| `/publisher` | → `/publisher/content-calendar` | Redirect |
|
|
| `/publisher/content-calendar` | `Publisher/ContentCalendar.tsx` | Content calendar with scheduling |
|
|
|
|
**Features:**
|
|
- Calendar view with month navigation
|
|
- List view with drag-and-drop reordering
|
|
- Schedule content by dragging to calendar dates
|
|
- Unschedule content from queue
|
|
- Stats: scheduled, publishing, published counts
|
|
- Filter by site (inherited from layout)
|
|
|
|
**Content Status Fields:**
|
|
- `status`: `draft | review | approved | published` (workflow status)
|
|
- `site_status`: `not_published | scheduled | publishing | published | failed` (publishing status)
|
|
- `scheduled_publish_at`: DateTime for scheduled publishing
|
|
|
|
**API Integration:**
|
|
- `POST /api/v1/writer/content/{id}/schedule/` - Schedule content
|
|
- `POST /api/v1/writer/content/{id}/unschedule/` - Remove from schedule
|
|
- `GET /api/v1/writer/content/?status__in=approved,published` - Multi-status filter
|
|
|
|
### Legacy Redirects
|
|
|
|
| Old Route | Redirects To |
|
|
|-----------|--------------|
|
|
| `/sites/:id/publishing-queue` | `/publisher/content-calendar` |
|
|
| `/automation/settings` | `/sites/settings?tab=automation` (v1.8.0) |
|
|
|
|
**Removed in v1.8.0:**
|
|
- `/publisher/settings` - No longer exists (settings in Site Settings → Automation)
|
|
|
|
### 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 |
|
|
|
|
---
|
|
|
|
## ACCOUNT Routes
|
|
|
|
### Notifications
|
|
|
|
| Route | File | Description |
|
|
|-------|------|-------------|
|
|
| `/account/notifications` | `account/NotificationsPage.tsx` | Full notifications history with filters and bulk actions |
|
|
|
|
**Features:**
|
|
- Filter by severity (info/success/warning/error)
|
|
- Filter by notification type (AI operations, WordPress sync, credits, etc.)
|
|
- Filter by read status (all/unread/read)
|
|
- Filter by site
|
|
- Filter by date range (from/to)
|
|
- Mark individual notifications as read
|
|
- Mark all as read (bulk action)
|
|
- Delete individual notifications
|
|
- Click notification to navigate to related page
|
|
- Real-time unread count badge
|
|
|
|
**v1.2.2 Changes:**
|
|
- NEW page created with full filtering capabilities
|
|
- Linked from NotificationDropdown "View All Notifications" button
|
|
- Added to sidebar under ACCOUNT section with unread badge
|
|
|
|
### 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 (password change modal)
|
|
- **Team**: Team member list, invite, remove
|
|
|
|
**v1.1.6 Changes:**
|
|
- Profile tab loads from auth store user data
|
|
- Added Change Password modal with validation
|
|
- Uses `/v1/auth/change-password/` endpoint
|
|
|
|
### 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
|
|
|
|
**v1.1.6 Changes:**
|
|
- Added cancellation confirmation modal (prevents accidental cancellations)
|
|
|
|
### 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**: Operations by type (using real analytics data)
|
|
|
|
**v1.1.6 Changes:**
|
|
- Fixed fake API Activity data - now shows real `usage_by_type` data
|
|
- Removed hardcoded placeholder values
|
|
|
|
### AI Models (Admin Only)
|
|
|
|
| Route | File | Description |
|
|
|-------|------|-------------|
|
|
| `/settings/integration` | `Settings/IntegrationPage.tsx` | OpenAI, Runware config, image testing, site integrations |
|
|
|
|
---
|
|
|
|
## HELP Routes
|
|
|
|
| Route | File | Description |
|
|
|-------|------|-------------|
|
|
| `/help` | `Help/Help.tsx` | Documentation, FAQ, support CTAs |
|
|
|
|
**v1.1.7 Changes:**
|
|
- Fixed support buttons (now mailto: links)
|
|
- Added Dashboard, Setup, Account & Billing documentation sections
|
|
- Expanded FAQ with credits, billing, WordPress, automation topics
|
|
- Deleted placeholder pages: Documentation.tsx, SystemTesting.tsx, FunctionTesting.tsx
|
|
|
|
**Documentation Sections:**
|
|
- Getting Started (Quick Start, Workflow Overview)
|
|
- Dashboard (Metrics, Pipeline, Setup Checklist)
|
|
- Setup Module (Add Keywords, Content Settings, Sites)
|
|
- Planner Module (Keywords, Clusters, Ideas)
|
|
- Writer Module (Tasks, Content, Images)
|
|
- Automation Setup
|
|
- Account & Billing (Account Settings, Plans, Usage)
|
|
- FAQ (~28 questions)
|
|
|
|
---
|
|
|
|
## Legacy Redirects
|
|
|
|
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` |
|
|
| `/billing/history` | `/account/plans` |
|
|
| `/publishing` | `/account/content-settings` |
|
|
| `/writer/published` | `/writer/approved` |
|
|
| `/sites/:id/publishing-queue` | `/publisher/content-calendar` |
|
|
|
|
---
|
|
|
|
## Internal Pages (Non-Indexed)
|
|
|
|
| Route | File | Description |
|
|
|-------|------|-------------|
|
|
| `/ui-elements` | `UIElements.tsx` | Design system reference page |
|
|
| `/components` | `Components.tsx` | Component showcase |
|
|
|
|
---
|
|
|
|
## Page File Locations
|
|
|
|
```
|
|
frontend/src/pages/
|
|
├── account/
|
|
│ ├── AccountSettingsPage.tsx # Account, Profile, Team tabs
|
|
│ ├── ContentSettingsPage.tsx # Content Gen, Publishing, Images tabs
|
|
│ ├── NotificationsPage.tsx # Full notifications with filters
|
|
│ ├── 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/
|
|
│ └── AutomationPage.tsx
|
|
├── Billing/
|
|
│ └── CreditPurchase.tsx
|
|
├── Dashboard/
|
|
│ └── Home.tsx
|
|
├── Help/
|
|
│ └── Help.tsx # Main help page with docs, FAQ
|
|
├── Linker/
|
|
│ ├── Content.tsx
|
|
│ └── Dashboard.tsx # Not exposed
|
|
├── Optimizer/
|
|
│ ├── Content.tsx
|
|
│ ├── AnalysisPreview.tsx # Not linked
|
|
│ └── Dashboard.tsx # Not exposed
|
|
├── Planner/
|
|
│ ├── Keywords.tsx
|
|
│ ├── Clusters.tsx
|
|
│ ├── ClusterDetail.tsx
|
|
│ └── Ideas.tsx
|
|
├── Publisher/ # NEW v1.3.2
|
|
│ └── ContentCalendar.tsx
|
|
├── Settings/
|
|
│ └── IntegrationPage.tsx # AI Models (admin)
|
|
├── Setup/
|
|
│ ├── IndustriesSectorsKeywords.tsx # Add Keywords page
|
|
│ └── SetupWizard.tsx # NEW v1.3.2 - Onboarding wizard
|
|
├── Sites/
|
|
│ ├── List.tsx # Site listing
|
|
│ ├── Dashboard.tsx # Site overview + quick actions
|
|
│ ├── Settings.tsx # Site config with Publishing tab
|
|
│ ├── Content.tsx # Site content listing
|
|
│ └── SyncDashboard.tsx # Sync status
|
|
├── Thinker/
|
|
│ ├── Prompts.tsx
|
|
│ ├── AuthorProfiles.tsx
|
|
│ ├── Strategies.tsx # Coming Soon
|
|
│ └── ImageTesting.tsx # Coming Soon
|
|
├── Writer/
|
|
│ ├── Tasks.tsx
|
|
│ ├── Content.tsx
|
|
│ ├── ContentView.tsx
|
|
│ ├── Images.tsx
|
|
│ ├── Review.tsx
|
|
│ └── Approved.tsx # Renamed from Published.tsx (v1.2.0)
|
|
└── UIElements.tsx # NEW v1.3.2 - Design system ref
|
|
```
|
|
|
|
---
|
|
|
|
## Route Guards
|
|
|
|
### 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 via `moduleStore.isModuleEnabled()`
|
|
- Routes still accessible via direct URL (no server-side blocking)
|
|
|
|
---
|
|
|
|
## Navigation Structure (Sidebar v1.3.2)
|
|
|
|
```
|
|
Dashboard
|
|
├── SETUP
|
|
│ ├── Setup Wizard [first-time users]
|
|
│ ├── Add Keywords
|
|
│ ├── Content Settings
|
|
│ ├── Sites
|
|
│ └── 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 → Approved
|
|
│ ├── Automation [if automation enabled]
|
|
│ ├── Publisher
|
|
│ │ └── Content Calendar
|
|
│ ├── Linker [if linker enabled]
|
|
│ └── Optimizer [if optimizer enabled]
|
|
├── ACCOUNT
|
|
│ ├── Notifications
|
|
│ ├── Account Settings (Account → Profile → Team)
|
|
│ ├── Plans & Billing (Plan → Upgrade → History)
|
|
│ ├── Usage (Limits → Credit History → API Activity)
|
|
│ └── AI Models [admin only]
|
|
└── HELP
|
|
└── Help & Docs
|
|
```
|
|
|
|
---
|
|
|
|
## Component Updates (v1.3.2)
|
|
|
|
**New Components:**
|
|
- `SiteInfoBar` - Reusable site info header for site-specific pages
|
|
- `IconButton` - Icon-only button component
|
|
- `CalendarItemTooltip` - Tooltip for calendar items
|
|
- `OnboardingWizard` + 5 step components
|
|
|
|
**Updated Components:**
|
|
- All components updated for semantic color tokens
|
|
- Badge, Button, Card use design system colors
|
|
- 100+ files with color standardization
|