20 KiB
20 KiB
Navigation Refactoring Plan v2
Date: January 17, 2026 (Updated)
Objective: Restructure sidebar navigation + create comprehensive Automation Overview dashboard
Executive Summary
What's Changing:
- Publisher Section Created - Groups all publishing-related pages (Review → Approve → Schedule → Settings)
- Automation Reorganized - 3 focused pages (Overview dashboard, Pipeline Settings, Run Now)
- Publish Settings Moved - From Sites Settings to Publisher section (better logical fit)
- Overview Dashboard Created - NEW comprehensive automation status/metrics/history page
- Account Consolidated - 3 pages merged into 1 with card layout
- Notifications Moved - From ACCOUNT to HELP section
Key Benefits:
- Transparency: New Overview page shows complete automation details (what was processed, costs, status)
- Organization: Logical grouping of related features
- Simplification: Run Now page simplified, Account pages consolidated
- Bug Fix: Publish Settings site selector will work correctly (store-based instead of URL-based)
New Structure
DASHBOARD (standalone)
SETUP
├── Setup Wizard
├── Sites
├── Keyword Library
└── Thinker (admin only)
├── Prompts
└── Author Profiles
WORKFLOW
├── Planner
│ ├── Keywords
│ ├── Clusters
│ └── Ideas
└── Writer
├── Content Queue
├── Content Drafts
└── Content Images
PUBLISHER (NEW DROPDOWN)
├── Content Review
├── Publish / Schedule
├── Publish Settings (moved from Sites Settings)
└── Content Calendar
AUTOMATION (NEW DROPDOWN)
├── Overview (NEW comprehensive dashboard)
├── Pipeline Settings (from ConfigModal)
└── Run Now (simplified)
ACCOUNT (CONSOLIDATED)
├── Account Settings (single page with 3 cards)
├── Plans & Billing
├── Usage
└── AI Models (admin only)
HELP
├── Notifications (moved from ACCOUNT)
└── Help & Docs
Detailed Page Breakdown
1. Automation Overview Page (NEW)
Route: /automation/overview or /automation
Purpose: Comprehensive automation dashboard - similar to site dashboard and homepage
Content Sections:
A. Current Configuration Status Cards
┌─────────────┬─────────────┬─────────────┬─────────────┬─────────────┐
│ Keywords │ Clusters │ Ideas │ Tasks │ Content │
│ 265 │ 27 │ 127 │ 0 │ 127 │
│ New: 3 │ New: 0 │ New: 0 │ │ Draft: 66 │
│ Mapped:265 │ Mapped: 27 │ Queued: 0 │ │ Review: 0 │
│ │ │ Done: 127 │ │ Publish:61 │
└─────────────┴─────────────┴─────────────┴─────────────┴─────────────┘
(These are the 5 metric cards currently on Run Now page)
B. Processable Items & Cost Estimation (NEW)
Card: "Ready to Process"
- Show what items can be processed right now per stage
- Estimated output (how many items each stage will create)
- Individual cost per stage (credits)
- Total estimated cost
- Current credit balance
- Sufficient credits indicator
Example:
Stage 1: Keywords → Clusters
Input: 3 new keywords
Output: ~1-2 clusters expected
Cost: 150 credits
Status: ✓ Ready
Stage 2: Clusters → Ideas
Input: 0 new clusters
Output: 0 ideas expected
Cost: 0 credits
Status: ⊗ Nothing to process
... (continue for all 7 stages)
TOTAL COST: 450 credits
Current Balance: 3,174 credits
Status: ✓ Sufficient credits
C. Last Automation Run - Detailed View (NEW)
Card: "Last Run Details" Show complete breakdown of most recent run:
Run ID: #1234
Started: Jan 17, 2026 7:35 PM
Duration: 12 minutes
Status: Completed ✓
Trigger: Manual
┌──────────┬──────────┬──────────┬───────────┬────────┐
│ Stage │ Processed│ Created │ Credits │ Status │
├──────────┼──────────┼──────────┼───────────┼────────┤
│ Stage 1 │ 3 │ 0 │ 0 │ ✓ │
│ Stage 2 │ 0 │ 0 │ 0 │ Skip │
│ Stage 3 │ 127 │ 0 │ 0 │ ✓ │
│ Stage 4 │ 0 │ 0 │ 0 │ Skip │
│ Stage 5 │ 0 │ 0 │ 0 │ Skip │
│ Stage 6 │ 281 │ 315 │ 945 │ ✓ │
│ Stage 7 │ 0 │ 0 │ 0 │ Skip │
│ Stage 8 │ 61 │ 42 │ 0 │ ✓ │
├──────────┼──────────┼──────────┼───────────┼────────┤
│ TOTAL │ 472 │ 357 │ 945 │ ✓ │
└──────────┴──────────┴──────────┴───────────┴────────┘
Output Status Breakdown:
- Draft: 66 items
- Review: 0 items
- Approved: 16 items
- Scheduled: 42 items
- Published: 3 items
D. Run History Table (MOVED from Run Now page)
Card: "Automation Run History"
- Last 10-20 automation runs
- Columns: Run ID, Trigger (Manual/Scheduled), Started, Duration, Status, Items Processed, Credits Used
- Click row to see detailed breakdown (expand or modal)
- Filter: All / Manual / Scheduled / Failed
Example:
┌─────┬───────────┬──────────────┬──────────┬───────────┬───────────┬────────────┐
│ ID │ Trigger │ Started │ Duration │ Status │ Processed │ Credits │
├─────┼───────────┼──────────────┼──────────┼───────────┼───────────┼────────────┤
│1234 │ Manual │ Jan 17 19:35 │ 12 min │ Completed │ 472 │ 945 │
│1233 │ Scheduled │ Jan 17 19:35 │ 8 min │ Completed │ 234 │ 420 │
│1232 │ Manual │ Jan 16 14:22 │ 15 min │ Failed │ 156 │ 280 │
└─────┴───────────┴──────────────┴──────────┴───────────┴───────────┴────────────┘
Technology:
- Reuse existing metrics loading logic from AutomationPage
- Reuse RunHistory component
- Add new API endpoint or extend existing:
/api/v1/automation/overview/- Returns: metrics, cost estimation, last run details, run history
2. Automation Pipeline Settings Page (NEW)
Route: /automation/pipeline-settings or /automation/settings
Purpose: Configure 7-stage automation pipeline (extract from ConfigModal)
Content:
- Stage Processing Section (7 checkboxes for stage enable/disable)
- Batch Sizes Section (7 input fields for stage batch sizes)
- Timing Section:
- Within-stage delay
- Between-stage delay
- Schedule Section:
- Enable/Disable toggle
- Frequency dropdown (Daily/Weekly/Monthly)
- Schedule time picker
- Save button at bottom
Technology:
- Extract all content from ConfigModal component
- Use same AutomationConfig API
- Breadcrumb: "Automation / Pipeline Settings"
- Site awareness:
useSiteStore().activeSite(same as Run Now)
3. Automation Run Now Page (SIMPLIFIED)
Route: /automation/run-now
Purpose: Manual automation execution with real-time progress
What STAYS:
- Compact Schedule & Controls Panel (header banner)
- 7 Stage cards (showing pending/processed counts)
- Stage 8 card (Scheduled card - see note below)
- Processing card (when run is active)
- Activity Log component
- Run controls (Run Now, Pause, Resume buttons)
What MOVES to Overview:
- 5 Metric cards (Keywords, Clusters, Ideas, Tasks, Content)
- Run History table
Stage 8 Consistency Update:
- Change card title from "Scheduled" to "Stage 8"
- Right side text: "Approved → Scheduled" (consistent with other stages like "Review → Published")
- Keep same layout as other stage cards
4. Publish Settings Page (NEW)
Route: /publisher/publish-settings or /automation/publishing-settings
Purpose: Configure publishing automation and limits
Content (extracted from Sites/Settings.tsx Publishing tab):
- Automation Card:
- Auto-Approval toggle
- Auto-Publish toggle
- Limits Card:
- Daily publish limit
- Weekly publish limit
- Monthly publish limit
- Schedule Card:
- Publishing days (Mon-Sun checkboxes)
- Time slots (multiple time pickers)
- Timezone selector
- Save button at bottom
Site Awareness Change:
- OLD:
/sites/:id/settings?tab=publishingused URL paramsiteId - NEW:
/publisher/publish-settingsusesuseSiteStore().activeSite - BUG FIX: Site selector will now only affect current view, not all sites globally
Placement Decision:
- Location: PUBLISHER dropdown (not AUTOMATION)
- Reasoning: Publishing settings affect both manual publishing (Publish/Schedule page) and automation
- Benefit: Centralized publishing configuration accessible from publisher workflow
5. Account Settings Page (CONSOLIDATED)
Route: /account/settings (single route, no sub-routes)
Purpose: All account management in one place
Layout: Single page with 3 cards in rows:
-
Account Info Card
- Account name
- Timezone
- Plan level
- Billing status
-
Profile Card
- Name
- Avatar
- Bio/Description
-
Team Card
- Team members list
- Roles (Owner, Admin, Editor, Viewer)
- Invite button
- Remove member actions
Changes:
- Merge 3 pages into 1
- Remove tab navigation
- Remove sub-routes (
/account/settings/profile,/account/settings/team) - Remove dropdown from sidebar
6. Content Review & Publish/Schedule Pages (NO CHANGES)
Routes: /writer/review, /writer/approved
Changes: Just moved in sidebar to PUBLISHER section, pages unchanged
7. Content Calendar (NO CHANGES)
Route: /publisher/content-calendar
Changes: Just moved in sidebar to PUBLISHER section, page unchanged
System Analysis - Files Requiring Changes
CREATE NEW FILES (3):
/frontend/src/pages/Automation/AutomationOverview.tsx- NEW comprehensive dashboard/frontend/src/pages/Automation/PipelineSettings.tsx- Extract from ConfigModal/frontend/src/pages/Publisher/PublishSettings.tsx- Extract from Sites/Settings.tsx
MODIFY EXISTING FILES (6):
-
/frontend/src/pages/Automation/AutomationPage.tsx(Run Now)- Remove 5 metric cards (move to Overview)
- Remove RunHistory component (move to Overview)
- Remove ConfigModal (moved to PipelineSettings page)
- Update "Stage 8" card title and label
- Add link to Pipeline Settings
- Keep stage cards, controls, activity log
-
/frontend/src/pages/Sites/Settings.tsx- Remove "Publishing" from tabs array
- Remove publishing settings state/loading
- Remove loadPublishingSettings() function
- Remove savePublishingSettings() function
- Remove entire Publishing tab JSX (3 cards: Automation, Limits, Schedule)
-
/frontend/src/pages/account/AccountSettingsPage.tsx- Merge Account + Profile + Team into single page
- Remove tab navigation
- Create 3-card layout
- Remove sub-route handling
-
/frontend/src/App.tsx- Update routes -
/frontend/src/layout/AppSidebar.tsx- Update menu structure -
/frontend/src/layout/AppHeader.tsx- Update site selector patterns
COMPONENTS TO REUSE:
RunHistory.tsx- Move to Overview page (already exists)ConfigModal.tsx- Extract content to PipelineSettings page, then delete modal- Metric cards - Move JSX to Overview page
Implementation Steps
Phase 1: Create Automation Overview Page (Priority 1)
Time: 3-4 hours
- Create
AutomationOverview.tsx - Move 5 metric cards from AutomationPage
- Add cost estimation section (NEW)
- Add last run detailed breakdown (NEW)
- Move RunHistory component
- Add breadcrumb and header
- Test metrics loading
- Test with different site selections
API Requirements:
- May need new endpoint:
GET /api/v1/automation/overview/{site_id}/- Returns: metrics, last_run_details, cost_estimation
- Or extend existing metrics endpoint
Phase 2: Create Pipeline Settings Page (Priority 2)
Time: 1-2 hours
- Create
PipelineSettings.tsx - Extract ConfigModal content
- Convert modal layout to page layout
- Add breadcrumb: "Automation / Pipeline Settings"
- Test config save/load
- Remove ConfigModal from AutomationPage
- Add "Settings" link in Run Now page header
Phase 3: Create Publish Settings Page (Priority 1 - Bug Fix)
Time: 2-3 hours
- Create
PublishSettings.tsx - Extract Publishing tab content from Sites/Settings.tsx
- Change from URL-based siteId to store-based activeSite
- Update API calls to use activeSite.id
- Test site selector behavior (critical - verify bug is fixed)
- Remove Publishing tab from Sites/Settings.tsx
Phase 4: Simplify Run Now Page (Priority 2)
Time: 1 hour
- Remove 5 metric cards
- Remove RunHistory component
- Update Stage 8 card:
- Title: "Stage 8" (not "Scheduled")
- Right label: "Approved → Scheduled"
- Add link to Pipeline Settings in header
- Keep everything else as-is
Phase 5: Consolidate Account Settings (Priority 3)
Time: 2 hours
- Update AccountSettingsPage.tsx
- Merge 3 pages into 1
- Create 3-card layout
- Remove tab navigation
- Test all account functionality
Phase 6: Update Navigation (Priority 2)
Time: 1-2 hours
- Update App.tsx routes
- Update AppSidebar.tsx menu structure
- Update AppHeader.tsx site selector patterns
- Test all navigation paths
- Verify breadcrumbs
Updated Routes
// Automation Routes
<Route path="/automation" element={<Navigate to="/automation/overview" replace />} />
<Route path="/automation/overview" element={<AutomationOverview />} />
<Route path="/automation/pipeline-settings" element={<PipelineSettings />} />
<Route path="/automation/run-now" element={<AutomationPage />} />
// Publisher Routes
<Route path="/writer/review" element={<Review />} /> // Moved in sidebar only
<Route path="/writer/approved" element={<Approved />} /> // Moved in sidebar only
<Route path="/publisher/publish-settings" element={<PublishSettings />} />
<Route path="/publisher/content-calendar" element={<ContentCalendar />} />
// Account Routes (consolidated)
<Route path="/account/settings" element={<AccountSettingsPage />} />
// Remove: /account/settings/profile, /account/settings/team
Updated Sidebar Structure
// PUBLISHER Section (after WORKFLOW)
{
label: "PUBLISHER",
items: [
{
icon: <CalendarIcon />,
name: "Publisher",
subItems: [
{ name: "Content Review", path: "/writer/review" },
{ name: "Publish / Schedule", path: "/writer/approved" },
{ name: "Publish Settings", path: "/publisher/publish-settings" },
{ name: "Content Calendar", path: "/publisher/content-calendar" },
],
},
],
},
// AUTOMATION Section (after PUBLISHER)
{
label: "AUTOMATION",
items: [
{
icon: <BoltIcon />,
name: "Automation",
subItems: [
{ name: "Overview", path: "/automation/overview" },
{ name: "Pipeline Settings", path: "/automation/pipeline-settings" },
{ name: "Run Now", path: "/automation/run-now" },
],
},
],
},
// ACCOUNT Section (updated)
{
label: "ACCOUNT",
items: [
{
icon: <UserCircleIcon />,
name: "Account Settings",
path: "/account/settings", // No subItems
},
// ... rest of account items
],
},
// HELP Section (updated)
{
label: "HELP",
items: [
{
icon: <Bell />,
name: "Notifications",
path: "/account/notifications",
},
{
icon: <DocsIcon />,
name: "Help & Docs",
path: "/help",
},
],
},
Testing Checklist
Automation Pages:
- Overview page loads with all metrics
- Overview shows cost estimation correctly
- Overview shows last run details with all stages
- Overview run history table works
- Pipeline Settings loads config
- Pipeline Settings saves config
- Run Now page simplified (no metrics, no history)
- Run Now stage cards work
- Run Now Stage 8 shows "Stage 8" and "Approved → Scheduled"
- Run controls work (Run, Pause, Resume)
Publisher Pages:
- Publish Settings loads from activeSite (not URL)
- Publish Settings site selector changes only current view
- Publish Settings saves correctly
- Content Review accessible from Publisher menu
- Publish/Schedule accessible from Publisher menu
- Content Calendar accessible from Publisher menu
Account Page:
- Account Settings shows all 3 cards
- Account Info card works
- Profile card works
- Team card works
- No broken sub-routes
Navigation:
- All sidebar links work
- Breadcrumbs correct on all pages
- Site selector shows on correct pages
- Notifications in HELP section
- No 404 errors
Risk Assessment
LOW RISK:
- Adding Overview page (new page, no breaking changes)
- Adding Pipeline Settings page (modal to page, same functionality)
- Moving sidebar items (just navigation reorganization)
- Moving Notifications menu item
MEDIUM RISK:
- Simplifying Run Now page (removing components, need careful testing)
- Consolidating Account Settings (merging pages)
- Stage 8 label changes (need to verify no hardcoded references)
HIGH RISK:
- Moving Publish Settings from Sites to Publisher
- Changes site awareness model (URL → store)
- Multiple API calls to refactor
- Critical bug fix that needs thorough testing
- Removing Publishing tab from Sites Settings
- Ensure no broken references in codebase
MITIGATION:
- Test Publish Settings thoroughly with site selector
- Keep backup of Sites/Settings.tsx Publishing tab
- Test all automation pages with real data
- Verify cost calculations are accurate
- Test with different credit balance scenarios
Implementation Priority
Must Have (Phase 1):
- Automation Overview page - Transparency & visibility
- Publish Settings page - Bug fix
- Update Routes & Sidebar - Navigation
Should Have (Phase 2):
- Pipeline Settings page - Better UX
- Simplify Run Now page - Cleaner interface
- Stage 8 consistency - Polish
Nice to Have (Phase 3):
- Consolidate Account Settings - Simplification
- Move Notifications to HELP - Better organization
Estimated Timeline
- Phase 1 (Must Have): 6-8 hours
- Phase 2 (Should Have): 3-4 hours
- Phase 3 (Nice to Have): 2-3 hours
- Total: 11-15 hours
Can be split across multiple sessions:
- Session 1: Overview page (3-4 hours)
- Session 2: Publish Settings + Navigation (3-4 hours)
- Session 3: Pipeline Settings + Run Now simplification (2-3 hours)
- Session 4: Account consolidation + Polish (2-3 hours)
Ready to Begin?
Status: ✅ Plan reviewed and updated with new requirements
Next Steps:
- Approve this plan
- Start with Phase 1 (Automation Overview page)
- Test thoroughly
- Move to Phase 2
Questions to confirm:
- Cost estimation logic - should we use existing estimate API or create new?
- Last run details - extend existing API or create new endpoint?
- Stage 8 - any other places where "Scheduled" label is used?
- Account consolidation - any concerns about merging 3 pages?