229 lines
6.4 KiB
Markdown
229 lines
6.4 KiB
Markdown
# 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 |
|