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