Files
igny8/docs/plans/NAVIGATION_REFACOTR/NAVIGATION_REFACTOR_PLAN.md
2026-01-17 03:49:50 +00:00

614 lines
20 KiB
Markdown

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