NAVIGATION_REFACTOR COMPLETED

2026-01-17 03:49:50 +00:00
parent 47a00e8875
commit 501a269450
29 changed files with 3839 additions and 2103 deletions
--- a/docs/plans/NAVIGATION_REFACOTR/NAVIGATION_REFACTOR_PLAN.md
+++ b/docs/plans/NAVIGATION_REFACOTR/NAVIGATION_REFACTOR_PLAN.md
@@ -0,0 +1,613 @@
+# Navigation Refactoring Plan v2
+**Date:** January 17, 2026 (Updated)  
+**Objective:** Restructure sidebar navigation + create comprehensive Automation Overview dashboard
+
+---
+
+## Executive Summary
+
+### What's Changing:
+1. **Publisher Section Created** - Groups all publishing-related pages (Review → Approve → Schedule → Settings)
+2. **Automation Reorganized** - 3 focused pages (Overview dashboard, Pipeline Settings, Run Now)
+3. **Publish Settings Moved** - From Sites Settings to Publisher section (better logical fit)
+4. **Overview Dashboard Created** - NEW comprehensive automation status/metrics/history page
+5. **Account Consolidated** - 3 pages merged into 1 with card layout
+6. **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=publishing` used URL param `siteId`
+- **NEW**: `/publisher/publish-settings` uses `useSiteStore().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:
+1. **Account Info Card**
+   - Account name
+   - Timezone
+   - Plan level
+   - Billing status
+  
+2. **Profile Card**
+   - Name
+   - Email
+   - Avatar
+   - Bio/Description
+   
+3. **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):
+1. **`/frontend/src/pages/Automation/AutomationOverview.tsx`** - NEW comprehensive dashboard
+2. **`/frontend/src/pages/Automation/PipelineSettings.tsx`** - Extract from ConfigModal
+3. **`/frontend/src/pages/Publisher/PublishSettings.tsx`** - Extract from Sites/Settings.tsx
+
+### MODIFY EXISTING FILES (6):
+4. **`/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
+
+5. **`/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)
+
+6. **`/frontend/src/pages/account/AccountSettingsPage.tsx`**
+   - Merge Account + Profile + Team into single page
+   - Remove tab navigation
+   - Create 3-card layout
+   - Remove sub-route handling
+
+7. **`/frontend/src/App.tsx`** - Update routes
+8. **`/frontend/src/layout/AppSidebar.tsx`** - Update menu structure
+9. **`/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**
+
+1. Create `AutomationOverview.tsx`
+2. Move 5 metric cards from AutomationPage
+3. Add cost estimation section (NEW)
+4. Add last run detailed breakdown (NEW)
+5. Move RunHistory component
+6. Add breadcrumb and header
+7. Test metrics loading
+8. 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**
+
+1. Create `PipelineSettings.tsx`
+2. Extract ConfigModal content
+3. Convert modal layout to page layout
+4. Add breadcrumb: "Automation / Pipeline Settings"
+5. Test config save/load
+6. Remove ConfigModal from AutomationPage
+7. Add "Settings" link in Run Now page header
+
+### Phase 3: Create Publish Settings Page (Priority 1 - Bug Fix)
+**Time: 2-3 hours**
+
+1. Create `PublishSettings.tsx`
+2. Extract Publishing tab content from Sites/Settings.tsx
+3. Change from URL-based siteId to store-based activeSite
+4. Update API calls to use activeSite.id
+5. Test site selector behavior (critical - verify bug is fixed)
+6. Remove Publishing tab from Sites/Settings.tsx
+
+### Phase 4: Simplify Run Now Page (Priority 2)
+**Time: 1 hour**
+
+1. Remove 5 metric cards
+2. Remove RunHistory component
+3. Update Stage 8 card:
+   - Title: "Stage 8" (not "Scheduled")
+   - Right label: "Approved → Scheduled"
+4. Add link to Pipeline Settings in header
+5. Keep everything else as-is
+
+### Phase 5: Consolidate Account Settings (Priority 3)
+**Time: 2 hours**
+
+1. Update AccountSettingsPage.tsx
+2. Merge 3 pages into 1
+3. Create 3-card layout
+4. Remove tab navigation
+5. Test all account functionality
+
+### Phase 6: Update Navigation (Priority 2)
+**Time: 1-2 hours**
+
+1. Update App.tsx routes
+2. Update AppSidebar.tsx menu structure
+3. Update AppHeader.tsx site selector patterns
+4. Test all navigation paths
+5. Verify breadcrumbs
+
+---
+
+## Updated Routes
+
+```tsx
+// 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
+
+```tsx
+// 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):
+1. Automation Overview page - **Transparency & visibility**
+2. Publish Settings page - **Bug fix**
+3. Update Routes & Sidebar - **Navigation**
+
+### Should Have (Phase 2):
+4. Pipeline Settings page - **Better UX**
+5. Simplify Run Now page - **Cleaner interface**
+6. Stage 8 consistency - **Polish**
+
+### Nice to Have (Phase 3):
+7. Consolidate Account Settings - **Simplification**
+8. 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:**
+1. Approve this plan
+2. Start with Phase 1 (Automation Overview page)
+3. Test thoroughly
+4. Move to Phase 2
+
+**Questions to confirm:**
+1. Cost estimation logic - should we use existing estimate API or create new?
+2. Last run details - extend existing API or create new endpoint?
+3. Stage 8 - any other places where "Scheduled" label is used?
+4. Account consolidation - any concerns about merging 3 pages?
+