igny8/docs/30-FRONTEND/PAGES.md

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

// 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