igny8/docs/30-FRONTEND/PAGES.md

Frontend Pages & Routes

Last Verified: January 3, 2026
Version: 1.3.2
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, Integrations, Publishing, Content Types)

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
• Settings page has new Publishing Settings tab

Components:

• SiteSetupChecklist - Shows setup progress (site created, industry/sectors, WordPress, keywords)
• SiteInfoBar - Reusable site info header for site-specific pages

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, schedule config, run controls

---

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

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