minor atuoamtion page fix, and plan for compelte resuteurce of publishsign and scheduling
This commit is contained in:
IGNY8 VPS (Salman)
630
NAVIGATION_REFACTOR_PLAN.md
Normal file
630
NAVIGATION_REFACTOR_PLAN.md
Normal file
@@ -0,0 +1,630 @@
|
|||||||
|
# Navigation Refactoring Plan
|
||||||
|
**Date:** January 17, 2026
|
||||||
|
**Objective:** Restructure sidebar navigation to better organize Publisher and Automation features
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Current 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
|
||||||
|
│ ├── Content Review
|
||||||
|
│ └── Content Approved
|
||||||
|
├── Automation (single page)
|
||||||
|
└── Content Calendar (single page)
|
||||||
|
|
||||||
|
ACCOUNT
|
||||||
|
├── Notifications
|
||||||
|
├── Account Settings
|
||||||
|
│ ├── Account
|
||||||
|
│ ├── Profile
|
||||||
|
│ └── Team
|
||||||
|
├── Plans & Billing
|
||||||
|
├── Usage
|
||||||
|
└── AI Models (admin only)
|
||||||
|
|
||||||
|
HELP
|
||||||
|
└── Help & Docs
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## New Structure (UPDATED v2)
|
||||||
|
|
||||||
|
```
|
||||||
|
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 (formerly "Content Approved")
|
||||||
|
├── Publish Settings (moved from Sites Settings Publishing tab + works with automation)
|
||||||
|
└── Content Calendar
|
||||||
|
|
||||||
|
AUTOMATION (NEW DROPDOWN)
|
||||||
|
├── Overview (NEW - comprehensive dashboard with metrics, costing, run history)
|
||||||
|
├── Pipeline Settings (new page from ConfigModal - 7 stage toggles + batch config)
|
||||||
|
└── Run Now (simplified - only stage cards + run controls)
|
||||||
|
|
||||||
|
ACCOUNT (CONSOLIDATED)
|
||||||
|
├── Account Settings (single page, multiple cards: Account Info, Profile, Team)
|
||||||
|
├── Plans & Billing
|
||||||
|
├── Usage
|
||||||
|
└── AI Models (admin only)
|
||||||
|
|
||||||
|
HELP
|
||||||
|
├── Notifications (moved from ACCOUNT)
|
||||||
|
└── Help & Docs
|
||||||
|
```
|
||||||
|
|
||||||
|
**Key Changes from v1:**
|
||||||
|
1. "Publish Settings" moved to PUBLISHER section (better fit - used by both manual publish and automation)
|
||||||
|
2. "Status" renamed to "Overview" (clearer purpose - comprehensive automation dashboard)
|
||||||
|
3. "Automation Settings" renamed to "Pipeline Settings" (more descriptive of 7-stage configuration)
|
||||||
|
4. "AUTOMATION & SCHEDULING" simplified to "AUTOMATION" (shorter, clearer)
|
||||||
|
5. "Overview" is new comprehensive page similar to site dashboard and homepage
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Changes Required (UPDATED)
|
||||||
|
|
||||||
|
### 1. **AppSidebar.tsx**
|
||||||
|
- Add new "PUBLISHER" section after WORKFLOW
|
||||||
|
- Add new "AUTOMATION & SCHEDULING" dropdown section after PUBLISHER
|
||||||
|
- Move "Content Review" from Writer to Publisher
|
||||||
|
- Rename "Content Approved" to "Publish / Schedule" and move to Publisher
|
||||||
|
- Move "Content Calendar" to Publisher dropdown
|
||||||
|
- Create new Automation & Scheduling dropdown with 3 items:
|
||||||
|
- "Publish/Schedule Settings" (new page)
|
||||||
|
- "Automation Settings" (new page from modal)
|
||||||
|
- "Run Now" (renamed from Automation)
|
||||||
|
- **Consolidate Account Settings**: Remove dropdown, make single page
|
||||||
|
- **Move Notifications**: From ACCOUNT to HELP section
|
||||||
|
|
||||||
|
### 2. **App.tsx Routes**
|
||||||
|
- Add route: `/automation` → redirect to `/automation/run-now`
|
||||||
|
- Add route: `/automation/run-now` → AutomationPage.tsx (rename from /automation)
|
||||||
|
- Add route: `/automation/settings` → new AutomationSettings.tsx page
|
||||||
|
- Add route: `/automation/publishing-settings` → new PublishingSettingsPage.tsx
|
||||||
|
- Update route: `/account/settings` → consolidated AccountSettings.tsx (no sub-routes)
|
||||||
|
- Remove routes: `/account/settings/profile`, `/account/settings/team` (consolidated)
|
||||||
|
- Keep existing Writer routes (Content Review and Approved stay as-is)
|
||||||
|
- Keep existing Publisher route (Content Calendar stays as-is)
|
||||||
|
|
||||||
|
### 3. **New Page: PublishingSettingsPage.tsx**
|
||||||
|
- Extract Publishing tab content from Sites/Settings.tsx
|
||||||
|
- **Site Awareness**: Use `SingleSiteSelector` from AppHeader (like Automation)
|
||||||
|
- Gets site from `useSiteStore().activeSite` (NO URL param)
|
||||||
|
- Show Publishing Settings form:
|
||||||
|
- Automation toggles (Auto-Approval, Auto-Publish)
|
||||||
|
- Limits (Daily, Weekly, Monthly)
|
||||||
|
- Schedule (Publishing Days, Time Slots, Timezone)
|
||||||
|
- Save button at bottom
|
||||||
|
- Breadcrumb: "Automation / Publish Settings"
|
||||||
|
- Route: `/automation/publishing-settings`
|
||||||
|
|
||||||
|
### 4. **New Page: AutomationSettings.tsx**
|
||||||
|
- Extract ConfigModal content to standalone page
|
||||||
|
- Use same layout as other settings pages
|
||||||
|
- Show AutomationConfig form fields
|
||||||
|
- Include all 7 stage toggle switches
|
||||||
|
- Include batch sizes, delays, and schedule settings
|
||||||
|
- Save button at bottom
|
||||||
|
- Breadcrumb: "Automation / Settings"
|
||||||
|
- Route: `/automation/settings`
|
||||||
|
|
||||||
|
### 5. **Update AccountSettings.tsx** (Consolidation)
|
||||||
|
- Merge Account, Profile, and Team into single page
|
||||||
|
- Use card-based layout with 3 cards in rows:
|
||||||
|
- **Account Info Card**: Account name, timezone, plan level
|
||||||
|
- **Profile Card**: Name, email, avatar, bio
|
||||||
|
- **Team Card**: Team members list with roles
|
||||||
|
- Remove tab navigation (no more sub-routes)
|
||||||
|
- Single route: `/account/settings`
|
||||||
|
- Breadcrumb: "Account / Settings"
|
||||||
|
|
||||||
|
### 6. **Update Sites/Settings.tsx**
|
||||||
|
- Remove "Publishing" tab completely
|
||||||
|
- Keep only: General, Integrations, AI Settings tabs
|
||||||
|
- Update tab navigation to exclude Publishing
|
||||||
|
- Remove all Publishing Settings form code (moved to new page)
|
||||||
|
|
||||||
|
### 7. **Site Awareness Analysis (UPDATED)**
|
||||||
|
|
||||||
|
#### Current Implementation:
|
||||||
|
- **Automation Pages**: Use `SingleSiteSelector` from AppHeader
|
||||||
|
- Gets site from `useSiteStore().activeSite`
|
||||||
|
- No URL parameter needed
|
||||||
|
- Header shows site selector
|
||||||
|
|
||||||
|
- **Publishing Tab (in Site Settings)**: Uses URL parameter + site selector
|
||||||
|
- Gets site from URL: `/sites/:id/settings`
|
||||||
|
- Also has `SingleSiteSelector` in header for switching
|
||||||
|
- Tab content within SiteSettings.tsx
|
||||||
|
- **ISSUE**: Changing site selector changes all sites' settings (bug)
|
||||||
|
|
||||||
|
- **Content Review & Approved Pages**: Use `SiteAndSectorSelector`
|
||||||
|
- Gets site AND sector from store
|
||||||
|
- Different selector component than automation
|
||||||
|
|
||||||
|
#### New Site Awareness Strategy:
|
||||||
|
|
||||||
|
**Pages Moving to Automation & Scheduling:**
|
||||||
|
1. **Publishing Settings** (`/automation/publishing-settings`)
|
||||||
|
- **CHANGE**: From URL-based (`/sites/:id/settings`) to store-based
|
||||||
|
- Use `SingleSiteSelector` in header (like Automation Run Now)
|
||||||
|
- Gets site from `useSiteStore().activeSite`
|
||||||
|
- **BENEFIT**: Fixes the bug where changing site in selector affected all sites
|
||||||
|
- API call: `fetchAPI(\`/v1/integration/sites/\${activeSite.id}/publishing-settings/\`)`
|
||||||
|
|
||||||
|
2. **Automation Settings** (`/automation/settings`)
|
||||||
|
- Use `SingleSiteSelector` in header (same as Run Now)
|
||||||
|
- Gets site from `useSiteStore().activeSite`
|
||||||
|
- API call: `automationService.getConfig(activeSite.id)`
|
||||||
|
|
||||||
|
3. **Automation Run Now** (`/automation/run-now`)
|
||||||
|
- **NO CHANGE**: Already uses `SingleSiteSelector`
|
||||||
|
- Gets site from `useSiteStore().activeSite`
|
||||||
|
|
||||||
|
**Pages Staying in Current Location:**
|
||||||
|
- Content Review (`/writer/review`) - keeps `SiteAndSectorSelector`
|
||||||
|
- Publish/Schedule (`/writer/approved`) - keeps `SiteAndSectorSelector`
|
||||||
|
- Content Calendar (`/publisher/content-calendar`) - keeps `SingleSiteSelector`
|
||||||
|
|
||||||
|
**Summary of Site Selector Usage:**
|
||||||
|
- `SingleSiteSelector`: Automation pages, Content Calendar
|
||||||
|
- `SiteAndSectorSelector`: Writer pages (Review, Approved)
|
||||||
|
- No selector: Account pages (no site context)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Revised Plan (UPDATED)
|
||||||
|
|
||||||
|
### What Actually Moves:
|
||||||
|
|
||||||
|
1. **Publishing Settings Tab → PublishingSettingsPage.tsx**
|
||||||
|
- Extract entire Publishing tab from `/sites/:id/settings`
|
||||||
|
- New route: `/automation/publishing-settings`
|
||||||
|
- Change from URL-based to store-based site awareness
|
||||||
|
- **FIXES BUG**: Site selector will now only affect current view
|
||||||
|
- Includes: Auto-Approval, Auto-Publish toggles, Limits, Schedule settings
|
||||||
|
|
||||||
|
2. **ConfigModal → AutomationSettings.tsx**
|
||||||
|
- Extract modal content from AutomationPage
|
||||||
|
- New route: `/automation/settings`
|
||||||
|
- Store-based site awareness (like Run Now page)
|
||||||
|
- Includes: 7 stage toggles, batch sizes, delays, schedule time
|
||||||
|
|
||||||
|
3. **Account Settings Pages → Consolidated AccountSettings.tsx**
|
||||||
|
- Merge 3 pages (Account, Profile, Team) into 1
|
||||||
|
- Remove sub-routes and dropdown
|
||||||
|
- Use card-based layout (3 cards total)
|
||||||
|
- Single route: `/account/settings`
|
||||||
|
|
||||||
|
4. **Notifications Menu Item**
|
||||||
|
- Move from ACCOUNT section to HELP section
|
||||||
|
- No page changes, just sidebar reorganization
|
||||||
|
|
||||||
|
### What Gets Reorganized in Sidebar:
|
||||||
|
|
||||||
|
**New "PUBLISHER" Section:**
|
||||||
|
- Content Review (from Writer)
|
||||||
|
- Publish / Schedule (from Writer, renamed from "Content Approved")
|
||||||
|
- Content Calendar (from standalone)
|
||||||
|
|
||||||
|
**New "AUTOMATION & SCHEDULING" Section:**
|
||||||
|
- Publish/Schedule Settings (new page from Sites Settings Publishing tab)
|
||||||
|
- Automation Settings (new page from ConfigModal)
|
||||||
|
- Run Now (renamed from "Automation")
|
||||||
|
|
||||||
|
**Updated "ACCOUNT" Section:**
|
||||||
|
- Account Settings (consolidated, no dropdown)
|
||||||
|
- Plans & Billing
|
||||||
|
- Usage
|
||||||
|
- AI Models (admin only)
|
||||||
|
|
||||||
|
**Updated "HELP" Section:**
|
||||||
|
- Notifications (moved from ACCOUNT)
|
||||||
|
- Help & Docs
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Implementation Steps (UPDATED)
|
||||||
|
|
||||||
|
### Step 1: Create PublishingSettingsPage.tsx
|
||||||
|
```tsx
|
||||||
|
// frontend/src/pages/Automation/PublishingSettingsPage.tsx
|
||||||
|
// Extract Publishing tab content from Sites/Settings.tsx (lines ~1000-1200)
|
||||||
|
// Change from URL-based siteId to store-based activeSite
|
||||||
|
// Use activeSite from useSiteStore()
|
||||||
|
// Breadcrumb: "Automation / Publish Settings"
|
||||||
|
// Include: Automation toggles, Limits cards, Schedule card
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 2: Create AutomationSettings.tsx
|
||||||
|
```tsx
|
||||||
|
// frontend/src/pages/Automation/AutomationSettings.tsx
|
||||||
|
// Extract ConfigModal content
|
||||||
|
// Use activeSite from store
|
||||||
|
// Breadcrumb: "Automation / Settings"
|
||||||
|
// Include: 7 stage toggles, batch sizes, delays, schedule time
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 3: Consolidate AccountSettings.tsx
|
||||||
|
```tsx
|
||||||
|
// frontend/src/pages/account/AccountSettingsPage.tsx
|
||||||
|
// Merge Account, Profile, Team into single page
|
||||||
|
// Remove tab navigation
|
||||||
|
// Create 3-card layout in rows:
|
||||||
|
// - Account Info Card (account name, timezone, plan)
|
||||||
|
// - Profile Card (name, email, avatar, bio)
|
||||||
|
// - Team Card (members list with roles)
|
||||||
|
// Single route, no sub-routes
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 4: Update Sites/Settings.tsx
|
||||||
|
- Remove "Publishing" tab from tabs array
|
||||||
|
- Remove PublishingSettings state and loading
|
||||||
|
- Remove loadPublishingSettings() function
|
||||||
|
- Remove savePublishingSettings() function
|
||||||
|
- Remove entire Publishing tab JSX (Automation, Limits, Schedule cards)
|
||||||
|
- Keep only: General, Integrations, AI Settings tabs
|
||||||
|
|
||||||
|
### Step 5: Update AutomationPage.tsx
|
||||||
|
- Remove ConfigModal import and state
|
||||||
|
- Remove showConfigModal state
|
||||||
|
- Remove setShowConfigModal
|
||||||
|
- Remove "Configure" button from header
|
||||||
|
- Add "Settings" link/button that navigates to `/automation/settings`
|
||||||
|
- Keep all existing automation run functionality
|
||||||
|
|
||||||
|
### Step 6: Update App.tsx Routes
|
||||||
|
```tsx
|
||||||
|
// Add new Automation routes
|
||||||
|
<Route path="/automation" element={<Navigate to="/automation/run-now" replace />} />
|
||||||
|
<Route path="/automation/run-now" element={<AutomationPage />} />
|
||||||
|
<Route path="/automation/settings" element={<AutomationSettings />} />
|
||||||
|
<Route path="/automation/publishing-settings" element={<PublishingSettingsPage />} />
|
||||||
|
|
||||||
|
// Update Account Settings route (remove sub-routes)
|
||||||
|
<Route path="/account/settings" element={<AccountSettingsPage />} />
|
||||||
|
// Remove these:
|
||||||
|
// <Route path="/account/settings/profile" element={<AccountSettingsPage />} />
|
||||||
|
// <Route path="/account/settings/team" element={<AccountSettingsPage />} />
|
||||||
|
|
||||||
|
// Existing routes stay as-is
|
||||||
|
<Route path="/writer/review" element={<Review />} />
|
||||||
|
<Route path="/writer/approved" element={<Approved />} />
|
||||||
|
<Route path="/publisher/content-calendar" element={<ContentCalendar />} />
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 7: Update AppSidebar.tsx
|
||||||
|
```tsx
|
||||||
|
// Add 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: "Content Calendar", path: "/publisher/content-calendar" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Add Automation & Scheduling section after Publisher
|
||||||
|
{
|
||||||
|
label: "AUTOMATION & SCHEDULING",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
icon: <BoltIcon />,
|
||||||
|
name: "Automation",
|
||||||
|
subItems: [
|
||||||
|
{ name: "Publish/Schedule Settings", path: "/automation/publishing-settings" },
|
||||||
|
{ name: "Automation Settings", path: "/automation/settings" },
|
||||||
|
{ name: "Run Now", path: "/automation/run-now" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Update Account section - remove dropdown
|
||||||
|
{
|
||||||
|
label: "ACCOUNT",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
icon: <UserCircleIcon />,
|
||||||
|
name: "Account Settings",
|
||||||
|
path: "/account/settings", // No subItems
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <DollarLineIcon />,
|
||||||
|
name: "Plans & Billing",
|
||||||
|
path: "/account/plans",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <PieChartIcon />,
|
||||||
|
name: "Usage",
|
||||||
|
path: "/account/usage",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <PlugInIcon />,
|
||||||
|
name: "AI Models",
|
||||||
|
path: "/settings/integration",
|
||||||
|
adminOnly: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Update Help section - add Notifications
|
||||||
|
{
|
||||||
|
label: "HELP",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
icon: <Bell />,
|
||||||
|
name: "Notifications",
|
||||||
|
path: "/account/notifications",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <DocsIcon />,
|
||||||
|
name: "Help & Docs",
|
||||||
|
path: "/help",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 8: Update AppHeader.tsx
|
||||||
|
```tsx
|
||||||
|
// Add new automation routes to SINGLE_SITE_ROUTES
|
||||||
|
const SINGLE_SITE_ROUTES = [
|
||||||
|
'/automation', // All automation pages
|
||||||
|
'/publisher', // Content Calendar page
|
||||||
|
'/account/content-settings', // Content settings and sub-pages
|
||||||
|
'/sites', // Site dashboard (matches /sites/21, etc.)
|
||||||
|
];
|
||||||
|
|
||||||
|
// Remove /account/settings from any site-aware routes (no site context needed)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Testing Checklist (UPDATED)
|
||||||
|
|
||||||
|
- [ ] Syntax error fixed in AutomationPage.tsx
|
||||||
|
- [ ] PublishingSettingsPage created and loads settings from activeSite
|
||||||
|
- [ ] PublishingSettingsPage: Site selector changes only current view (bug fixed)
|
||||||
|
- [ ] AutomationSettings page created and loads config
|
||||||
|
- [ ] AccountSettings page consolidated (3 cards in single page)
|
||||||
|
- [ ] Automation Run Now page works without ConfigModal
|
||||||
|
- [ ] Sites Settings page: Publishing tab removed
|
||||||
|
- [ ] Sidebar shows Publisher dropdown with 3 items
|
||||||
|
- [ ] Sidebar shows Automation & Scheduling dropdown with 3 items
|
||||||
|
- [ ] Sidebar shows Notifications in HELP section
|
||||||
|
- [ ] Sidebar shows Account Settings without dropdown
|
||||||
|
- [ ] Content Review accessible from Publisher menu
|
||||||
|
- [ ] Publish/Schedule accessible from Publisher menu
|
||||||
|
- [ ] Content Calendar accessible from Publisher menu
|
||||||
|
- [ ] Publish/Schedule Settings accessible from Automation menu
|
||||||
|
- [ ] Automation Settings accessible from Automation menu
|
||||||
|
- [ ] Automation Run Now accessible from Automation menu
|
||||||
|
- [ ] Account Settings shows all 3 sections in one page
|
||||||
|
- [ ] All pages retain correct site awareness
|
||||||
|
- [ ] No broken links or navigation issues
|
||||||
|
- [ ] Publishing Settings moved successfully from Sites Settings
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Files to Modify (UPDATED)
|
||||||
|
|
||||||
|
### CREATE NEW:
|
||||||
|
1. `/data/app/igny8/frontend/src/pages/Automation/PublishingSettingsPage.tsx`
|
||||||
|
2. `/data/app/igny8/frontend/src/pages/Automation/AutomationSettings.tsx`
|
||||||
|
|
||||||
|
### MODIFY:
|
||||||
|
3. `/data/app/igny8/frontend/src/pages/Automation/AutomationPage.tsx` (remove ConfigModal)
|
||||||
|
4. `/data/app/igny8/frontend/src/pages/Sites/Settings.tsx` (remove Publishing tab)
|
||||||
|
5. `/data/app/igny8/frontend/src/pages/account/AccountSettingsPage.tsx` (consolidate 3 pages)
|
||||||
|
6. `/data/app/igny8/frontend/src/App.tsx` (update routes)
|
||||||
|
7. `/data/app/igny8/frontend/src/layout/AppSidebar.tsx` (restructure menu)
|
||||||
|
8. `/data/app/igny8/frontend/src/layout/AppHeader.tsx` (update route patterns)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Risk Assessment (UPDATED)
|
||||||
|
|
||||||
|
**Low Risk:**
|
||||||
|
- Adding new routes
|
||||||
|
- Adding sidebar sections
|
||||||
|
- Moving Notifications menu item
|
||||||
|
- Creating AutomationSettings page
|
||||||
|
|
||||||
|
**Medium Risk:**
|
||||||
|
- Removing ConfigModal from AutomationPage
|
||||||
|
- Updating navigation structure
|
||||||
|
- Consolidating Account Settings pages
|
||||||
|
|
||||||
|
**High Risk:**
|
||||||
|
- **Moving Publishing Settings from Site Settings to new page**
|
||||||
|
- Changes site awareness from URL-based to store-based
|
||||||
|
- Affects how site selector behaves
|
||||||
|
- Multiple API calls to refactor
|
||||||
|
- Tab removal from Sites Settings
|
||||||
|
- **Removing Publishing tab from Sites/Settings.tsx**
|
||||||
|
- Need to ensure no broken references
|
||||||
|
- State management changes
|
||||||
|
|
||||||
|
**Mitigation:**
|
||||||
|
- Test Publishing Settings thoroughly with site selector
|
||||||
|
- Verify site selector only affects current view (not all sites)
|
||||||
|
- Keep backup of Sites/Settings.tsx Publishing tab code
|
||||||
|
- Test all Account Settings cards render correctly
|
||||||
|
- Ensure all navigation paths work
|
||||||
|
- Test site awareness on all moved pages
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Rollback Plan (UPDATED)
|
||||||
|
|
||||||
|
If critical issues occur:
|
||||||
|
|
||||||
|
1. **Publishing Settings Issues:**
|
||||||
|
- Revert Sites/Settings.tsx to restore Publishing tab
|
||||||
|
- Delete PublishingSettingsPage.tsx
|
||||||
|
- Revert AppSidebar.tsx Automation & Scheduling section
|
||||||
|
- Remove `/automation/publishing-settings` route from App.tsx
|
||||||
|
|
||||||
|
2. **Account Settings Issues:**
|
||||||
|
- Revert AccountSettingsPage.tsx to tabbed version
|
||||||
|
- Restore sub-routes in App.tsx
|
||||||
|
- Restore Account Settings dropdown in AppSidebar.tsx
|
||||||
|
|
||||||
|
3. **Navigation Issues:**
|
||||||
|
- Revert App.tsx routes to original
|
||||||
|
- Revert AppSidebar.tsx to original structure
|
||||||
|
- Re-add ConfigModal to AutomationPage
|
||||||
|
|
||||||
|
4. **Complete Rollback:**
|
||||||
|
- Revert all 8 modified files
|
||||||
|
- Delete 2 new files
|
||||||
|
- Restart frontend dev server
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Additional Considerations
|
||||||
|
|
||||||
|
### API Endpoints to Verify:
|
||||||
|
1. `/v1/integration/sites/{site_id}/publishing-settings/` (GET, PATCH)
|
||||||
|
2. `/v1/automation/config/` (GET, PUT)
|
||||||
|
3. Account settings endpoints (verify no breaking changes)
|
||||||
|
|
||||||
|
### UI/UX Improvements:
|
||||||
|
1. Add "Settings" link in Automation Run Now page header
|
||||||
|
2. Add navigation helper text in Publishing Settings
|
||||||
|
3. Ensure breadcrumbs are consistent
|
||||||
|
4. Add loading states for all new pages
|
||||||
|
|
||||||
|
### Documentation Updates Needed:
|
||||||
|
1. Update PAGES.md with new routes
|
||||||
|
2. Update navigation screenshots
|
||||||
|
3. Document site awareness changes
|
||||||
|
4. Update CHANGELOG.md with v1.3.3 changes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Summary of Key Changes
|
||||||
|
|
||||||
|
### 1. **Publishing Settings Liberation**
|
||||||
|
- **Problem Fixed**: Site selector in `/sites/:id/settings?tab=publishing` was changing settings for ALL sites
|
||||||
|
- **Solution**: Move to `/automation/publishing-settings` with store-based site awareness
|
||||||
|
- **Benefit**: Site selector now only affects current view, not all sites globally
|
||||||
|
|
||||||
|
### 2. **Automation Organization**
|
||||||
|
- **Before**: Single "Automation" page with config modal
|
||||||
|
- **After**: Dropdown with 3 pages:
|
||||||
|
- Publish/Schedule Settings (publishing automation)
|
||||||
|
- Automation Settings (pipeline config)
|
||||||
|
- Run Now (manual execution)
|
||||||
|
|
||||||
|
### 3. **Publisher Centralization**
|
||||||
|
- **Concept**: Group all publishing-related pages together
|
||||||
|
- **Pages**: Content Review, Publish/Schedule, Content Calendar
|
||||||
|
- **Benefit**: Clearer workflow from review → approve → schedule → publish
|
||||||
|
|
||||||
|
### 4. **Account Simplification**
|
||||||
|
- **Before**: 3 separate pages (Account, Profile, Team) with dropdown
|
||||||
|
- **After**: 1 consolidated page with 3 cards
|
||||||
|
- **Benefit**: Faster access, less navigation overhead
|
||||||
|
|
||||||
|
### 5. **Notifications Relocation**
|
||||||
|
- **Move**: From ACCOUNT to HELP section
|
||||||
|
- **Reasoning**: Notifications are more of a communication/help tool than account management
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Implementation Priority
|
||||||
|
|
||||||
|
### Phase 1 (Critical - Fix Publishing Settings Bug):
|
||||||
|
1. Create PublishingSettingsPage.tsx
|
||||||
|
2. Remove Publishing tab from Sites/Settings.tsx
|
||||||
|
3. Update routes in App.tsx
|
||||||
|
4. Update sidebar with Automation & Scheduling section
|
||||||
|
5. Test site selector behavior
|
||||||
|
|
||||||
|
### Phase 2 (Important - Automation Organization):
|
||||||
|
1. Create AutomationSettings.tsx
|
||||||
|
2. Update AutomationPage.tsx (remove modal)
|
||||||
|
3. Update routes and sidebar
|
||||||
|
4. Test all automation pages
|
||||||
|
|
||||||
|
### Phase 3 (Enhancement - Account Consolidation):
|
||||||
|
1. Update AccountSettingsPage.tsx (merge 3 pages)
|
||||||
|
2. Remove sub-routes
|
||||||
|
3. Update sidebar (remove dropdown)
|
||||||
|
4. Test all account functionality
|
||||||
|
|
||||||
|
### Phase 4 (Polish - Navigation Refinement):
|
||||||
|
1. Move Notifications to HELP
|
||||||
|
2. Add Publisher dropdown
|
||||||
|
3. Test complete navigation flow
|
||||||
|
4. Update documentation
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ready to Implement?
|
||||||
|
|
||||||
|
**Review Checklist:**
|
||||||
|
- [x] Plan reviewed and updated
|
||||||
|
- [x] Site awareness strategy clarified
|
||||||
|
- [x] Risk assessment complete
|
||||||
|
- [x] Rollback plan documented
|
||||||
|
- [ ] **Awaiting approval to begin implementation**
|
||||||
|
|
||||||
|
**Estimated Implementation Time:**
|
||||||
|
- Phase 1: 2-3 hours
|
||||||
|
- Phase 2: 1-2 hours
|
||||||
|
- Phase 3: 1-2 hours
|
||||||
|
- Phase 4: 30 minutes
|
||||||
|
- **Total: 5-8 hours**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
630
NAVIGATION_REFACTOR_PLAN_BACKUP.md
Normal file
630
NAVIGATION_REFACTOR_PLAN_BACKUP.md
Normal file
@@ -0,0 +1,630 @@
|
|||||||
|
# Navigation Refactoring Plan
|
||||||
|
**Date:** January 17, 2026
|
||||||
|
**Objective:** Restructure sidebar navigation to better organize Publisher and Automation features
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Current 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
|
||||||
|
│ ├── Content Review
|
||||||
|
│ └── Content Approved
|
||||||
|
├── Automation (single page)
|
||||||
|
└── Content Calendar (single page)
|
||||||
|
|
||||||
|
ACCOUNT
|
||||||
|
├── Notifications
|
||||||
|
├── Account Settings
|
||||||
|
│ ├── Account
|
||||||
|
│ ├── Profile
|
||||||
|
│ └── Team
|
||||||
|
├── Plans & Billing
|
||||||
|
├── Usage
|
||||||
|
└── AI Models (admin only)
|
||||||
|
|
||||||
|
HELP
|
||||||
|
└── Help & Docs
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## New Structure (UPDATED v2)
|
||||||
|
|
||||||
|
```
|
||||||
|
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 (formerly "Content Approved")
|
||||||
|
├── Publish Settings (moved from Sites Settings Publishing tab + works with automation)
|
||||||
|
└── Content Calendar
|
||||||
|
|
||||||
|
AUTOMATION (NEW DROPDOWN)
|
||||||
|
├── Overview (NEW - comprehensive dashboard with metrics, costing, run history)
|
||||||
|
├── Pipeline Settings (new page from ConfigModal - 7 stage toggles + batch config)
|
||||||
|
└── Run Now (simplified - only stage cards + run controls)
|
||||||
|
|
||||||
|
ACCOUNT (CONSOLIDATED)
|
||||||
|
├── Account Settings (single page, multiple cards: Account Info, Profile, Team)
|
||||||
|
├── Plans & Billing
|
||||||
|
├── Usage
|
||||||
|
└── AI Models (admin only)
|
||||||
|
|
||||||
|
HELP
|
||||||
|
├── Notifications (moved from ACCOUNT)
|
||||||
|
└── Help & Docs
|
||||||
|
```
|
||||||
|
|
||||||
|
**Key Changes from v1:**
|
||||||
|
1. "Publish Settings" moved to PUBLISHER section (better fit - used by both manual publish and automation)
|
||||||
|
2. "Status" renamed to "Overview" (clearer purpose - comprehensive automation dashboard)
|
||||||
|
3. "Automation Settings" renamed to "Pipeline Settings" (more descriptive of 7-stage configuration)
|
||||||
|
4. "AUTOMATION & SCHEDULING" simplified to "AUTOMATION" (shorter, clearer)
|
||||||
|
5. "Overview" is new comprehensive page similar to site dashboard and homepage
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Changes Required (UPDATED)
|
||||||
|
|
||||||
|
### 1. **AppSidebar.tsx**
|
||||||
|
- Add new "PUBLISHER" section after WORKFLOW
|
||||||
|
- Add new "AUTOMATION & SCHEDULING" dropdown section after PUBLISHER
|
||||||
|
- Move "Content Review" from Writer to Publisher
|
||||||
|
- Rename "Content Approved" to "Publish / Schedule" and move to Publisher
|
||||||
|
- Move "Content Calendar" to Publisher dropdown
|
||||||
|
- Create new Automation & Scheduling dropdown with 3 items:
|
||||||
|
- "Publish/Schedule Settings" (new page)
|
||||||
|
- "Automation Settings" (new page from modal)
|
||||||
|
- "Run Now" (renamed from Automation)
|
||||||
|
- **Consolidate Account Settings**: Remove dropdown, make single page
|
||||||
|
- **Move Notifications**: From ACCOUNT to HELP section
|
||||||
|
|
||||||
|
### 2. **App.tsx Routes**
|
||||||
|
- Add route: `/automation` → redirect to `/automation/run-now`
|
||||||
|
- Add route: `/automation/run-now` → AutomationPage.tsx (rename from /automation)
|
||||||
|
- Add route: `/automation/settings` → new AutomationSettings.tsx page
|
||||||
|
- Add route: `/automation/publishing-settings` → new PublishingSettingsPage.tsx
|
||||||
|
- Update route: `/account/settings` → consolidated AccountSettings.tsx (no sub-routes)
|
||||||
|
- Remove routes: `/account/settings/profile`, `/account/settings/team` (consolidated)
|
||||||
|
- Keep existing Writer routes (Content Review and Approved stay as-is)
|
||||||
|
- Keep existing Publisher route (Content Calendar stays as-is)
|
||||||
|
|
||||||
|
### 3. **New Page: PublishingSettingsPage.tsx**
|
||||||
|
- Extract Publishing tab content from Sites/Settings.tsx
|
||||||
|
- **Site Awareness**: Use `SingleSiteSelector` from AppHeader (like Automation)
|
||||||
|
- Gets site from `useSiteStore().activeSite` (NO URL param)
|
||||||
|
- Show Publishing Settings form:
|
||||||
|
- Automation toggles (Auto-Approval, Auto-Publish)
|
||||||
|
- Limits (Daily, Weekly, Monthly)
|
||||||
|
- Schedule (Publishing Days, Time Slots, Timezone)
|
||||||
|
- Save button at bottom
|
||||||
|
- Breadcrumb: "Automation / Publish Settings"
|
||||||
|
- Route: `/automation/publishing-settings`
|
||||||
|
|
||||||
|
### 4. **New Page: AutomationSettings.tsx**
|
||||||
|
- Extract ConfigModal content to standalone page
|
||||||
|
- Use same layout as other settings pages
|
||||||
|
- Show AutomationConfig form fields
|
||||||
|
- Include all 7 stage toggle switches
|
||||||
|
- Include batch sizes, delays, and schedule settings
|
||||||
|
- Save button at bottom
|
||||||
|
- Breadcrumb: "Automation / Settings"
|
||||||
|
- Route: `/automation/settings`
|
||||||
|
|
||||||
|
### 5. **Update AccountSettings.tsx** (Consolidation)
|
||||||
|
- Merge Account, Profile, and Team into single page
|
||||||
|
- Use card-based layout with 3 cards in rows:
|
||||||
|
- **Account Info Card**: Account name, timezone, plan level
|
||||||
|
- **Profile Card**: Name, email, avatar, bio
|
||||||
|
- **Team Card**: Team members list with roles
|
||||||
|
- Remove tab navigation (no more sub-routes)
|
||||||
|
- Single route: `/account/settings`
|
||||||
|
- Breadcrumb: "Account / Settings"
|
||||||
|
|
||||||
|
### 6. **Update Sites/Settings.tsx**
|
||||||
|
- Remove "Publishing" tab completely
|
||||||
|
- Keep only: General, Integrations, AI Settings tabs
|
||||||
|
- Update tab navigation to exclude Publishing
|
||||||
|
- Remove all Publishing Settings form code (moved to new page)
|
||||||
|
|
||||||
|
### 7. **Site Awareness Analysis (UPDATED)**
|
||||||
|
|
||||||
|
#### Current Implementation:
|
||||||
|
- **Automation Pages**: Use `SingleSiteSelector` from AppHeader
|
||||||
|
- Gets site from `useSiteStore().activeSite`
|
||||||
|
- No URL parameter needed
|
||||||
|
- Header shows site selector
|
||||||
|
|
||||||
|
- **Publishing Tab (in Site Settings)**: Uses URL parameter + site selector
|
||||||
|
- Gets site from URL: `/sites/:id/settings`
|
||||||
|
- Also has `SingleSiteSelector` in header for switching
|
||||||
|
- Tab content within SiteSettings.tsx
|
||||||
|
- **ISSUE**: Changing site selector changes all sites' settings (bug)
|
||||||
|
|
||||||
|
- **Content Review & Approved Pages**: Use `SiteAndSectorSelector`
|
||||||
|
- Gets site AND sector from store
|
||||||
|
- Different selector component than automation
|
||||||
|
|
||||||
|
#### New Site Awareness Strategy:
|
||||||
|
|
||||||
|
**Pages Moving to Automation & Scheduling:**
|
||||||
|
1. **Publishing Settings** (`/automation/publishing-settings`)
|
||||||
|
- **CHANGE**: From URL-based (`/sites/:id/settings`) to store-based
|
||||||
|
- Use `SingleSiteSelector` in header (like Automation Run Now)
|
||||||
|
- Gets site from `useSiteStore().activeSite`
|
||||||
|
- **BENEFIT**: Fixes the bug where changing site in selector affected all sites
|
||||||
|
- API call: `fetchAPI(\`/v1/integration/sites/\${activeSite.id}/publishing-settings/\`)`
|
||||||
|
|
||||||
|
2. **Automation Settings** (`/automation/settings`)
|
||||||
|
- Use `SingleSiteSelector` in header (same as Run Now)
|
||||||
|
- Gets site from `useSiteStore().activeSite`
|
||||||
|
- API call: `automationService.getConfig(activeSite.id)`
|
||||||
|
|
||||||
|
3. **Automation Run Now** (`/automation/run-now`)
|
||||||
|
- **NO CHANGE**: Already uses `SingleSiteSelector`
|
||||||
|
- Gets site from `useSiteStore().activeSite`
|
||||||
|
|
||||||
|
**Pages Staying in Current Location:**
|
||||||
|
- Content Review (`/writer/review`) - keeps `SiteAndSectorSelector`
|
||||||
|
- Publish/Schedule (`/writer/approved`) - keeps `SiteAndSectorSelector`
|
||||||
|
- Content Calendar (`/publisher/content-calendar`) - keeps `SingleSiteSelector`
|
||||||
|
|
||||||
|
**Summary of Site Selector Usage:**
|
||||||
|
- `SingleSiteSelector`: Automation pages, Content Calendar
|
||||||
|
- `SiteAndSectorSelector`: Writer pages (Review, Approved)
|
||||||
|
- No selector: Account pages (no site context)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Revised Plan (UPDATED)
|
||||||
|
|
||||||
|
### What Actually Moves:
|
||||||
|
|
||||||
|
1. **Publishing Settings Tab → PublishingSettingsPage.tsx**
|
||||||
|
- Extract entire Publishing tab from `/sites/:id/settings`
|
||||||
|
- New route: `/automation/publishing-settings`
|
||||||
|
- Change from URL-based to store-based site awareness
|
||||||
|
- **FIXES BUG**: Site selector will now only affect current view
|
||||||
|
- Includes: Auto-Approval, Auto-Publish toggles, Limits, Schedule settings
|
||||||
|
|
||||||
|
2. **ConfigModal → AutomationSettings.tsx**
|
||||||
|
- Extract modal content from AutomationPage
|
||||||
|
- New route: `/automation/settings`
|
||||||
|
- Store-based site awareness (like Run Now page)
|
||||||
|
- Includes: 7 stage toggles, batch sizes, delays, schedule time
|
||||||
|
|
||||||
|
3. **Account Settings Pages → Consolidated AccountSettings.tsx**
|
||||||
|
- Merge 3 pages (Account, Profile, Team) into 1
|
||||||
|
- Remove sub-routes and dropdown
|
||||||
|
- Use card-based layout (3 cards total)
|
||||||
|
- Single route: `/account/settings`
|
||||||
|
|
||||||
|
4. **Notifications Menu Item**
|
||||||
|
- Move from ACCOUNT section to HELP section
|
||||||
|
- No page changes, just sidebar reorganization
|
||||||
|
|
||||||
|
### What Gets Reorganized in Sidebar:
|
||||||
|
|
||||||
|
**New "PUBLISHER" Section:**
|
||||||
|
- Content Review (from Writer)
|
||||||
|
- Publish / Schedule (from Writer, renamed from "Content Approved")
|
||||||
|
- Content Calendar (from standalone)
|
||||||
|
|
||||||
|
**New "AUTOMATION & SCHEDULING" Section:**
|
||||||
|
- Publish/Schedule Settings (new page from Sites Settings Publishing tab)
|
||||||
|
- Automation Settings (new page from ConfigModal)
|
||||||
|
- Run Now (renamed from "Automation")
|
||||||
|
|
||||||
|
**Updated "ACCOUNT" Section:**
|
||||||
|
- Account Settings (consolidated, no dropdown)
|
||||||
|
- Plans & Billing
|
||||||
|
- Usage
|
||||||
|
- AI Models (admin only)
|
||||||
|
|
||||||
|
**Updated "HELP" Section:**
|
||||||
|
- Notifications (moved from ACCOUNT)
|
||||||
|
- Help & Docs
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Implementation Steps (UPDATED)
|
||||||
|
|
||||||
|
### Step 1: Create PublishingSettingsPage.tsx
|
||||||
|
```tsx
|
||||||
|
// frontend/src/pages/Automation/PublishingSettingsPage.tsx
|
||||||
|
// Extract Publishing tab content from Sites/Settings.tsx (lines ~1000-1200)
|
||||||
|
// Change from URL-based siteId to store-based activeSite
|
||||||
|
// Use activeSite from useSiteStore()
|
||||||
|
// Breadcrumb: "Automation / Publish Settings"
|
||||||
|
// Include: Automation toggles, Limits cards, Schedule card
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 2: Create AutomationSettings.tsx
|
||||||
|
```tsx
|
||||||
|
// frontend/src/pages/Automation/AutomationSettings.tsx
|
||||||
|
// Extract ConfigModal content
|
||||||
|
// Use activeSite from store
|
||||||
|
// Breadcrumb: "Automation / Settings"
|
||||||
|
// Include: 7 stage toggles, batch sizes, delays, schedule time
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 3: Consolidate AccountSettings.tsx
|
||||||
|
```tsx
|
||||||
|
// frontend/src/pages/account/AccountSettingsPage.tsx
|
||||||
|
// Merge Account, Profile, Team into single page
|
||||||
|
// Remove tab navigation
|
||||||
|
// Create 3-card layout in rows:
|
||||||
|
// - Account Info Card (account name, timezone, plan)
|
||||||
|
// - Profile Card (name, email, avatar, bio)
|
||||||
|
// - Team Card (members list with roles)
|
||||||
|
// Single route, no sub-routes
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 4: Update Sites/Settings.tsx
|
||||||
|
- Remove "Publishing" tab from tabs array
|
||||||
|
- Remove PublishingSettings state and loading
|
||||||
|
- Remove loadPublishingSettings() function
|
||||||
|
- Remove savePublishingSettings() function
|
||||||
|
- Remove entire Publishing tab JSX (Automation, Limits, Schedule cards)
|
||||||
|
- Keep only: General, Integrations, AI Settings tabs
|
||||||
|
|
||||||
|
### Step 5: Update AutomationPage.tsx
|
||||||
|
- Remove ConfigModal import and state
|
||||||
|
- Remove showConfigModal state
|
||||||
|
- Remove setShowConfigModal
|
||||||
|
- Remove "Configure" button from header
|
||||||
|
- Add "Settings" link/button that navigates to `/automation/settings`
|
||||||
|
- Keep all existing automation run functionality
|
||||||
|
|
||||||
|
### Step 6: Update App.tsx Routes
|
||||||
|
```tsx
|
||||||
|
// Add new Automation routes
|
||||||
|
<Route path="/automation" element={<Navigate to="/automation/run-now" replace />} />
|
||||||
|
<Route path="/automation/run-now" element={<AutomationPage />} />
|
||||||
|
<Route path="/automation/settings" element={<AutomationSettings />} />
|
||||||
|
<Route path="/automation/publishing-settings" element={<PublishingSettingsPage />} />
|
||||||
|
|
||||||
|
// Update Account Settings route (remove sub-routes)
|
||||||
|
<Route path="/account/settings" element={<AccountSettingsPage />} />
|
||||||
|
// Remove these:
|
||||||
|
// <Route path="/account/settings/profile" element={<AccountSettingsPage />} />
|
||||||
|
// <Route path="/account/settings/team" element={<AccountSettingsPage />} />
|
||||||
|
|
||||||
|
// Existing routes stay as-is
|
||||||
|
<Route path="/writer/review" element={<Review />} />
|
||||||
|
<Route path="/writer/approved" element={<Approved />} />
|
||||||
|
<Route path="/publisher/content-calendar" element={<ContentCalendar />} />
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 7: Update AppSidebar.tsx
|
||||||
|
```tsx
|
||||||
|
// Add 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: "Content Calendar", path: "/publisher/content-calendar" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Add Automation & Scheduling section after Publisher
|
||||||
|
{
|
||||||
|
label: "AUTOMATION & SCHEDULING",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
icon: <BoltIcon />,
|
||||||
|
name: "Automation",
|
||||||
|
subItems: [
|
||||||
|
{ name: "Publish/Schedule Settings", path: "/automation/publishing-settings" },
|
||||||
|
{ name: "Automation Settings", path: "/automation/settings" },
|
||||||
|
{ name: "Run Now", path: "/automation/run-now" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Update Account section - remove dropdown
|
||||||
|
{
|
||||||
|
label: "ACCOUNT",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
icon: <UserCircleIcon />,
|
||||||
|
name: "Account Settings",
|
||||||
|
path: "/account/settings", // No subItems
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <DollarLineIcon />,
|
||||||
|
name: "Plans & Billing",
|
||||||
|
path: "/account/plans",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <PieChartIcon />,
|
||||||
|
name: "Usage",
|
||||||
|
path: "/account/usage",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <PlugInIcon />,
|
||||||
|
name: "AI Models",
|
||||||
|
path: "/settings/integration",
|
||||||
|
adminOnly: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Update Help section - add Notifications
|
||||||
|
{
|
||||||
|
label: "HELP",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
icon: <Bell />,
|
||||||
|
name: "Notifications",
|
||||||
|
path: "/account/notifications",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <DocsIcon />,
|
||||||
|
name: "Help & Docs",
|
||||||
|
path: "/help",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 8: Update AppHeader.tsx
|
||||||
|
```tsx
|
||||||
|
// Add new automation routes to SINGLE_SITE_ROUTES
|
||||||
|
const SINGLE_SITE_ROUTES = [
|
||||||
|
'/automation', // All automation pages
|
||||||
|
'/publisher', // Content Calendar page
|
||||||
|
'/account/content-settings', // Content settings and sub-pages
|
||||||
|
'/sites', // Site dashboard (matches /sites/21, etc.)
|
||||||
|
];
|
||||||
|
|
||||||
|
// Remove /account/settings from any site-aware routes (no site context needed)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Testing Checklist (UPDATED)
|
||||||
|
|
||||||
|
- [ ] Syntax error fixed in AutomationPage.tsx
|
||||||
|
- [ ] PublishingSettingsPage created and loads settings from activeSite
|
||||||
|
- [ ] PublishingSettingsPage: Site selector changes only current view (bug fixed)
|
||||||
|
- [ ] AutomationSettings page created and loads config
|
||||||
|
- [ ] AccountSettings page consolidated (3 cards in single page)
|
||||||
|
- [ ] Automation Run Now page works without ConfigModal
|
||||||
|
- [ ] Sites Settings page: Publishing tab removed
|
||||||
|
- [ ] Sidebar shows Publisher dropdown with 3 items
|
||||||
|
- [ ] Sidebar shows Automation & Scheduling dropdown with 3 items
|
||||||
|
- [ ] Sidebar shows Notifications in HELP section
|
||||||
|
- [ ] Sidebar shows Account Settings without dropdown
|
||||||
|
- [ ] Content Review accessible from Publisher menu
|
||||||
|
- [ ] Publish/Schedule accessible from Publisher menu
|
||||||
|
- [ ] Content Calendar accessible from Publisher menu
|
||||||
|
- [ ] Publish/Schedule Settings accessible from Automation menu
|
||||||
|
- [ ] Automation Settings accessible from Automation menu
|
||||||
|
- [ ] Automation Run Now accessible from Automation menu
|
||||||
|
- [ ] Account Settings shows all 3 sections in one page
|
||||||
|
- [ ] All pages retain correct site awareness
|
||||||
|
- [ ] No broken links or navigation issues
|
||||||
|
- [ ] Publishing Settings moved successfully from Sites Settings
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Files to Modify (UPDATED)
|
||||||
|
|
||||||
|
### CREATE NEW:
|
||||||
|
1. `/data/app/igny8/frontend/src/pages/Automation/PublishingSettingsPage.tsx`
|
||||||
|
2. `/data/app/igny8/frontend/src/pages/Automation/AutomationSettings.tsx`
|
||||||
|
|
||||||
|
### MODIFY:
|
||||||
|
3. `/data/app/igny8/frontend/src/pages/Automation/AutomationPage.tsx` (remove ConfigModal)
|
||||||
|
4. `/data/app/igny8/frontend/src/pages/Sites/Settings.tsx` (remove Publishing tab)
|
||||||
|
5. `/data/app/igny8/frontend/src/pages/account/AccountSettingsPage.tsx` (consolidate 3 pages)
|
||||||
|
6. `/data/app/igny8/frontend/src/App.tsx` (update routes)
|
||||||
|
7. `/data/app/igny8/frontend/src/layout/AppSidebar.tsx` (restructure menu)
|
||||||
|
8. `/data/app/igny8/frontend/src/layout/AppHeader.tsx` (update route patterns)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Risk Assessment (UPDATED)
|
||||||
|
|
||||||
|
**Low Risk:**
|
||||||
|
- Adding new routes
|
||||||
|
- Adding sidebar sections
|
||||||
|
- Moving Notifications menu item
|
||||||
|
- Creating AutomationSettings page
|
||||||
|
|
||||||
|
**Medium Risk:**
|
||||||
|
- Removing ConfigModal from AutomationPage
|
||||||
|
- Updating navigation structure
|
||||||
|
- Consolidating Account Settings pages
|
||||||
|
|
||||||
|
**High Risk:**
|
||||||
|
- **Moving Publishing Settings from Site Settings to new page**
|
||||||
|
- Changes site awareness from URL-based to store-based
|
||||||
|
- Affects how site selector behaves
|
||||||
|
- Multiple API calls to refactor
|
||||||
|
- Tab removal from Sites Settings
|
||||||
|
- **Removing Publishing tab from Sites/Settings.tsx**
|
||||||
|
- Need to ensure no broken references
|
||||||
|
- State management changes
|
||||||
|
|
||||||
|
**Mitigation:**
|
||||||
|
- Test Publishing Settings thoroughly with site selector
|
||||||
|
- Verify site selector only affects current view (not all sites)
|
||||||
|
- Keep backup of Sites/Settings.tsx Publishing tab code
|
||||||
|
- Test all Account Settings cards render correctly
|
||||||
|
- Ensure all navigation paths work
|
||||||
|
- Test site awareness on all moved pages
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Rollback Plan (UPDATED)
|
||||||
|
|
||||||
|
If critical issues occur:
|
||||||
|
|
||||||
|
1. **Publishing Settings Issues:**
|
||||||
|
- Revert Sites/Settings.tsx to restore Publishing tab
|
||||||
|
- Delete PublishingSettingsPage.tsx
|
||||||
|
- Revert AppSidebar.tsx Automation & Scheduling section
|
||||||
|
- Remove `/automation/publishing-settings` route from App.tsx
|
||||||
|
|
||||||
|
2. **Account Settings Issues:**
|
||||||
|
- Revert AccountSettingsPage.tsx to tabbed version
|
||||||
|
- Restore sub-routes in App.tsx
|
||||||
|
- Restore Account Settings dropdown in AppSidebar.tsx
|
||||||
|
|
||||||
|
3. **Navigation Issues:**
|
||||||
|
- Revert App.tsx routes to original
|
||||||
|
- Revert AppSidebar.tsx to original structure
|
||||||
|
- Re-add ConfigModal to AutomationPage
|
||||||
|
|
||||||
|
4. **Complete Rollback:**
|
||||||
|
- Revert all 8 modified files
|
||||||
|
- Delete 2 new files
|
||||||
|
- Restart frontend dev server
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Additional Considerations
|
||||||
|
|
||||||
|
### API Endpoints to Verify:
|
||||||
|
1. `/v1/integration/sites/{site_id}/publishing-settings/` (GET, PATCH)
|
||||||
|
2. `/v1/automation/config/` (GET, PUT)
|
||||||
|
3. Account settings endpoints (verify no breaking changes)
|
||||||
|
|
||||||
|
### UI/UX Improvements:
|
||||||
|
1. Add "Settings" link in Automation Run Now page header
|
||||||
|
2. Add navigation helper text in Publishing Settings
|
||||||
|
3. Ensure breadcrumbs are consistent
|
||||||
|
4. Add loading states for all new pages
|
||||||
|
|
||||||
|
### Documentation Updates Needed:
|
||||||
|
1. Update PAGES.md with new routes
|
||||||
|
2. Update navigation screenshots
|
||||||
|
3. Document site awareness changes
|
||||||
|
4. Update CHANGELOG.md with v1.3.3 changes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Summary of Key Changes
|
||||||
|
|
||||||
|
### 1. **Publishing Settings Liberation**
|
||||||
|
- **Problem Fixed**: Site selector in `/sites/:id/settings?tab=publishing` was changing settings for ALL sites
|
||||||
|
- **Solution**: Move to `/automation/publishing-settings` with store-based site awareness
|
||||||
|
- **Benefit**: Site selector now only affects current view, not all sites globally
|
||||||
|
|
||||||
|
### 2. **Automation Organization**
|
||||||
|
- **Before**: Single "Automation" page with config modal
|
||||||
|
- **After**: Dropdown with 3 pages:
|
||||||
|
- Publish/Schedule Settings (publishing automation)
|
||||||
|
- Automation Settings (pipeline config)
|
||||||
|
- Run Now (manual execution)
|
||||||
|
|
||||||
|
### 3. **Publisher Centralization**
|
||||||
|
- **Concept**: Group all publishing-related pages together
|
||||||
|
- **Pages**: Content Review, Publish/Schedule, Content Calendar
|
||||||
|
- **Benefit**: Clearer workflow from review → approve → schedule → publish
|
||||||
|
|
||||||
|
### 4. **Account Simplification**
|
||||||
|
- **Before**: 3 separate pages (Account, Profile, Team) with dropdown
|
||||||
|
- **After**: 1 consolidated page with 3 cards
|
||||||
|
- **Benefit**: Faster access, less navigation overhead
|
||||||
|
|
||||||
|
### 5. **Notifications Relocation**
|
||||||
|
- **Move**: From ACCOUNT to HELP section
|
||||||
|
- **Reasoning**: Notifications are more of a communication/help tool than account management
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Implementation Priority
|
||||||
|
|
||||||
|
### Phase 1 (Critical - Fix Publishing Settings Bug):
|
||||||
|
1. Create PublishingSettingsPage.tsx
|
||||||
|
2. Remove Publishing tab from Sites/Settings.tsx
|
||||||
|
3. Update routes in App.tsx
|
||||||
|
4. Update sidebar with Automation & Scheduling section
|
||||||
|
5. Test site selector behavior
|
||||||
|
|
||||||
|
### Phase 2 (Important - Automation Organization):
|
||||||
|
1. Create AutomationSettings.tsx
|
||||||
|
2. Update AutomationPage.tsx (remove modal)
|
||||||
|
3. Update routes and sidebar
|
||||||
|
4. Test all automation pages
|
||||||
|
|
||||||
|
### Phase 3 (Enhancement - Account Consolidation):
|
||||||
|
1. Update AccountSettingsPage.tsx (merge 3 pages)
|
||||||
|
2. Remove sub-routes
|
||||||
|
3. Update sidebar (remove dropdown)
|
||||||
|
4. Test all account functionality
|
||||||
|
|
||||||
|
### Phase 4 (Polish - Navigation Refinement):
|
||||||
|
1. Move Notifications to HELP
|
||||||
|
2. Add Publisher dropdown
|
||||||
|
3. Test complete navigation flow
|
||||||
|
4. Update documentation
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ready to Implement?
|
||||||
|
|
||||||
|
**Review Checklist:**
|
||||||
|
- [x] Plan reviewed and updated
|
||||||
|
- [x] Site awareness strategy clarified
|
||||||
|
- [x] Risk assessment complete
|
||||||
|
- [x] Rollback plan documented
|
||||||
|
- [ ] **Awaiting approval to begin implementation**
|
||||||
|
|
||||||
|
**Estimated Implementation Time:**
|
||||||
|
- Phase 1: 2-3 hours
|
||||||
|
- Phase 2: 1-2 hours
|
||||||
|
- Phase 3: 1-2 hours
|
||||||
|
- Phase 4: 30 minutes
|
||||||
|
- **Total: 5-8 hours**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
613
NAVIGATION_REFACTOR_PLAN_V2.md
Normal file
613
NAVIGATION_REFACTOR_PLAN_V2.md
Normal file
@@ -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?
|
||||||
|
|
||||||
161
REFACTOR_SUMMARY.md
Normal file
161
REFACTOR_SUMMARY.md
Normal file
@@ -0,0 +1,161 @@
|
|||||||
|
# Navigation Refactoring - Quick Summary
|
||||||
|
|
||||||
|
## What's Changing?
|
||||||
|
|
||||||
|
### 1. **New Automation Overview Page** 📊
|
||||||
|
- **Comprehensive dashboard** showing everything about automation
|
||||||
|
- Current site data status (keywords, clusters, ideas, etc.)
|
||||||
|
- **Cost estimation** - what will be processed & how much it costs
|
||||||
|
- **Last run details** - complete breakdown per stage (items processed, created, credits used)
|
||||||
|
- **Run history table** - last 10-20 runs with details
|
||||||
|
- Similar to site dashboard and homepage design
|
||||||
|
|
||||||
|
### 2. **Publish Settings Moved** 🔧
|
||||||
|
- **From:** `/sites/:id/settings?tab=publishing`
|
||||||
|
- **To:** `/publisher/publish-settings` (in PUBLISHER dropdown)
|
||||||
|
- **Why:** Makes more sense with publisher workflow + **fixes bug** where site selector changed all sites
|
||||||
|
- **New:** Uses store-based site awareness (only affects current view)
|
||||||
|
|
||||||
|
### 3. **Automation Reorganized** ⚡
|
||||||
|
**3 focused pages:**
|
||||||
|
- **Overview** - Comprehensive dashboard (NEW)
|
||||||
|
- **Pipeline Settings** - 7 stage toggles + batch config (from ConfigModal)
|
||||||
|
- **Run Now** - Simplified, just stage cards + controls (metrics & history moved to Overview)
|
||||||
|
|
||||||
|
### 4. **Publisher Section Created** 📅
|
||||||
|
**Groups all publishing workflow:**
|
||||||
|
- Content Review
|
||||||
|
- Publish / Schedule
|
||||||
|
- Publish Settings (NEW here)
|
||||||
|
- Content Calendar
|
||||||
|
|
||||||
|
### 5. **Account Consolidated** 👤
|
||||||
|
- **From:** 3 separate pages with tabs
|
||||||
|
- **To:** 1 page with 3 cards (Account Info, Profile, Team)
|
||||||
|
- **Benefit:** Less clicking, faster access
|
||||||
|
|
||||||
|
### 6. **Stage 8 Consistency** 🎯
|
||||||
|
- Card title: "Stage 8" (instead of "Scheduled")
|
||||||
|
- Right label: "Approved → Scheduled" (consistent with other stages)
|
||||||
|
|
||||||
|
### 7. **Notifications Moved** 🔔
|
||||||
|
- From ACCOUNT section → HELP section
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## New Sidebar Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
PUBLISHER (NEW)
|
||||||
|
├── Content Review
|
||||||
|
├── Publish / Schedule
|
||||||
|
├── Publish Settings ← NEW HERE
|
||||||
|
└── Content Calendar
|
||||||
|
|
||||||
|
AUTOMATION (REORGANIZED)
|
||||||
|
├── Overview ← NEW DASHBOARD
|
||||||
|
├── Pipeline Settings ← FROM MODAL
|
||||||
|
└── Run Now ← SIMPLIFIED
|
||||||
|
|
||||||
|
ACCOUNT (SIMPLIFIED)
|
||||||
|
├── Account Settings ← SINGLE PAGE NOW
|
||||||
|
├── Plans & Billing
|
||||||
|
├── Usage
|
||||||
|
└── AI Models
|
||||||
|
|
||||||
|
HELP (UPDATED)
|
||||||
|
├── Notifications ← MOVED HERE
|
||||||
|
└── Help & Docs
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Files to Create (3)
|
||||||
|
|
||||||
|
1. `AutomationOverview.tsx` - NEW comprehensive dashboard
|
||||||
|
2. `PipelineSettings.tsx` - Extract from ConfigModal
|
||||||
|
3. `PublishSettings.tsx` - Extract from Sites/Settings.tsx
|
||||||
|
|
||||||
|
## Files to Modify (6)
|
||||||
|
|
||||||
|
4. `AutomationPage.tsx` - Simplify (remove metrics & history)
|
||||||
|
5. `Sites/Settings.tsx` - Remove Publishing tab
|
||||||
|
6. `AccountSettingsPage.tsx` - Consolidate 3 pages
|
||||||
|
7. `App.tsx` - Update routes
|
||||||
|
8. `AppSidebar.tsx` - Update menu
|
||||||
|
9. `AppHeader.tsx` - Update site selector
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Key Benefits
|
||||||
|
|
||||||
|
### For Users:
|
||||||
|
- **Transparency**: See exactly what automation did (items processed, credits used, output status)
|
||||||
|
- **Better Organization**: Related features grouped logically
|
||||||
|
- **Simpler Navigation**: Less drilling down through menus
|
||||||
|
- **Bug Fix**: Publish Settings site selector works correctly now
|
||||||
|
|
||||||
|
### For Development:
|
||||||
|
- **Clearer Code**: Separated concerns (Overview vs Run Now vs Settings)
|
||||||
|
- **Easier Maintenance**: Each page has focused purpose
|
||||||
|
- **Better Testing**: Isolated functionality easier to test
|
||||||
|
- **Future-Proof**: Easier to add features to appropriate sections
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Implementation Order
|
||||||
|
|
||||||
|
### Phase 1: Core Features (6-8 hours)
|
||||||
|
1. Create Automation Overview page
|
||||||
|
2. Create Publish Settings page (fixes bug)
|
||||||
|
3. Update routes and sidebar navigation
|
||||||
|
|
||||||
|
### Phase 2: Refinement (3-4 hours)
|
||||||
|
4. Create Pipeline Settings page
|
||||||
|
5. Simplify Run Now page
|
||||||
|
6. Update Stage 8 labels
|
||||||
|
|
||||||
|
### Phase 3: Polish (2-3 hours)
|
||||||
|
7. Consolidate Account Settings
|
||||||
|
8. Move Notifications to HELP
|
||||||
|
9. Final testing and documentation
|
||||||
|
|
||||||
|
**Total: 11-15 hours** (can be split across multiple sessions)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Testing Focus Areas
|
||||||
|
|
||||||
|
### Critical:
|
||||||
|
- ✅ Publish Settings site selector (must fix bug)
|
||||||
|
- ✅ Automation Overview metrics accuracy
|
||||||
|
- ✅ Cost estimation calculations
|
||||||
|
- ✅ Last run details per stage
|
||||||
|
|
||||||
|
### Important:
|
||||||
|
- ✅ All navigation links work
|
||||||
|
- ✅ No broken routes
|
||||||
|
- ✅ Run Now controls still work
|
||||||
|
- ✅ Stage cards update correctly
|
||||||
|
|
||||||
|
### Nice to Have:
|
||||||
|
- ✅ Breadcrumbs consistent
|
||||||
|
- ✅ Loading states smooth
|
||||||
|
- ✅ Responsive design
|
||||||
|
- ✅ Dark mode
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Questions Before Starting?
|
||||||
|
|
||||||
|
1. **Cost estimation** - Use existing API or create new endpoint?
|
||||||
|
2. **Last run details** - Extend API or new endpoint for per-stage breakdown?
|
||||||
|
3. **Timeline** - Prefer doing all at once or phase by phase?
|
||||||
|
4. **Testing** - Any specific scenarios to test?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Status:** 📋 **Plan complete and ready for implementation**
|
||||||
|
|
||||||
|
**Next Step:** Approve plan and start Phase 1 (Automation Overview + Publish Settings)
|
||||||
|
|
||||||
@@ -57,7 +57,7 @@ const STAGE_CONFIG = [
|
|||||||
{ icon: CheckCircleIcon, color: 'from-gray-700 to-gray-800', textColor: 'text-gray-700 dark:text-gray-300', bgColor: 'bg-gray-100 dark:bg-gray-800/30', hoverColor: 'hover:border-gray-500', name: 'Tasks → Content' },
|
{ icon: CheckCircleIcon, color: 'from-gray-700 to-gray-800', textColor: 'text-gray-700 dark:text-gray-300', bgColor: 'bg-gray-100 dark:bg-gray-800/30', hoverColor: 'hover:border-gray-500', name: 'Tasks → Content' },
|
||||||
{ icon: PencilIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Content → Image Prompts' },
|
{ icon: PencilIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Content → Image Prompts' },
|
||||||
{ icon: FileIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/30', hoverColor: 'hover:border-purple-500', name: 'Image Prompts → Images' },
|
{ icon: FileIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/30', hoverColor: 'hover:border-purple-500', name: 'Image Prompts → Images' },
|
||||||
{ icon: PaperPlaneIcon, color: 'from-success-500 to-success-600', textColor: 'text-success-600 dark:text-success-400', bgColor: 'bg-success-100 dark:bg-success-900/30', hoverColor: 'hover:border-success-500', name: 'Review → Published' },
|
{ icon: PaperPlaneIcon, color: 'from-success-500 to-success-600', textColor: 'text-success-600 dark:text-success-400', bgColor: 'bg-success-100 dark:bg-success-900/30', hoverColor: 'hover:border-success-500', name: 'In Review → Approved' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const AutomationPage: React.FC = () => {
|
const AutomationPage: React.FC = () => {
|
||||||
@@ -215,6 +215,8 @@ const AutomationPage: React.FC = () => {
|
|||||||
contentDraftRes,
|
contentDraftRes,
|
||||||
contentReviewRes,
|
contentReviewRes,
|
||||||
contentPublishedRes,
|
contentPublishedRes,
|
||||||
|
contentNotPublishedRes,
|
||||||
|
contentScheduledRes,
|
||||||
imagesTotalRes,
|
imagesTotalRes,
|
||||||
imagesPendingRes,
|
imagesPendingRes,
|
||||||
] = await Promise.all([
|
] = await Promise.all([
|
||||||
@@ -233,6 +235,8 @@ const AutomationPage: React.FC = () => {
|
|||||||
fetchContent({ page_size: 1, site_id: siteId, status: 'draft' }),
|
fetchContent({ page_size: 1, site_id: siteId, status: 'draft' }),
|
||||||
fetchContent({ page_size: 1, site_id: siteId, status: 'review' }),
|
fetchContent({ page_size: 1, site_id: siteId, status: 'review' }),
|
||||||
fetchContent({ page_size: 1, site_id: siteId, status__in: 'approved,published' }),
|
fetchContent({ page_size: 1, site_id: siteId, status__in: 'approved,published' }),
|
||||||
|
fetchContent({ page_size: 1, site_id: siteId, status: 'approved', site_status: 'not_published' }),
|
||||||
|
fetchContent({ page_size: 1, site_id: siteId, status: 'approved', site_status: 'scheduled' }),
|
||||||
fetchImages({ page_size: 1 }),
|
fetchImages({ page_size: 1 }),
|
||||||
fetchImages({ page_size: 1, status: 'pending' }),
|
fetchImages({ page_size: 1, status: 'pending' }),
|
||||||
]);
|
]);
|
||||||
@@ -247,6 +251,8 @@ const AutomationPage: React.FC = () => {
|
|||||||
draft: contentDraftRes.count || 0,
|
draft: contentDraftRes.count || 0,
|
||||||
review: contentReviewRes.count || 0,
|
review: contentReviewRes.count || 0,
|
||||||
published: contentPublishedRes.count || 0,
|
published: contentPublishedRes.count || 0,
|
||||||
|
not_published: contentNotPublishedRes.count || 0,
|
||||||
|
scheduled: contentScheduledRes.count || 0,
|
||||||
},
|
},
|
||||||
images: { total: imagesTotalRes.count || 0, pending: imagesPendingRes.count || 0 },
|
images: { total: imagesTotalRes.count || 0, pending: imagesPendingRes.count || 0 },
|
||||||
});
|
});
|
||||||
@@ -334,6 +340,8 @@ const AutomationPage: React.FC = () => {
|
|||||||
contentDraftRes,
|
contentDraftRes,
|
||||||
contentReviewRes,
|
contentReviewRes,
|
||||||
contentPublishedRes,
|
contentPublishedRes,
|
||||||
|
contentNotPublishedRes,
|
||||||
|
contentScheduledRes,
|
||||||
imagesTotalRes,
|
imagesTotalRes,
|
||||||
imagesPendingRes,
|
imagesPendingRes,
|
||||||
] = await Promise.all([
|
] = await Promise.all([
|
||||||
@@ -352,6 +360,8 @@ const AutomationPage: React.FC = () => {
|
|||||||
fetchContent({ page_size: 1, site_id: siteId, status: 'draft' }),
|
fetchContent({ page_size: 1, site_id: siteId, status: 'draft' }),
|
||||||
fetchContent({ page_size: 1, site_id: siteId, status: 'review' }),
|
fetchContent({ page_size: 1, site_id: siteId, status: 'review' }),
|
||||||
fetchContent({ page_size: 1, site_id: siteId, status__in: 'approved,published' }),
|
fetchContent({ page_size: 1, site_id: siteId, status__in: 'approved,published' }),
|
||||||
|
fetchContent({ page_size: 1, site_id: siteId, status: 'approved', site_status: 'not_published' }),
|
||||||
|
fetchContent({ page_size: 1, site_id: siteId, status: 'approved', site_status: 'scheduled' }),
|
||||||
fetchImages({ page_size: 1 }),
|
fetchImages({ page_size: 1 }),
|
||||||
fetchImages({ page_size: 1, status: 'pending' }),
|
fetchImages({ page_size: 1, status: 'pending' }),
|
||||||
]);
|
]);
|
||||||
@@ -366,6 +376,8 @@ const AutomationPage: React.FC = () => {
|
|||||||
draft: contentDraftRes.count || 0,
|
draft: contentDraftRes.count || 0,
|
||||||
review: contentReviewRes.count || 0,
|
review: contentReviewRes.count || 0,
|
||||||
published: contentPublishedRes.count || 0,
|
published: contentPublishedRes.count || 0,
|
||||||
|
not_published: contentNotPublishedRes.count || 0,
|
||||||
|
scheduled: contentScheduledRes.count || 0,
|
||||||
},
|
},
|
||||||
images: { total: imagesTotalRes.count || 0, pending: imagesPendingRes.count || 0 },
|
images: { total: imagesTotalRes.count || 0, pending: imagesPendingRes.count || 0 },
|
||||||
});
|
});
|
||||||
@@ -1157,7 +1169,7 @@ const AutomationPage: React.FC = () => {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
||||||
{/* Stage 7 - Review → Published (Auto-approve) */}
|
{/* Stage 7 - In Review → Approved (Auto-approve) */}
|
||||||
{pipelineOverview[6] && (() => {
|
{pipelineOverview[6] && (() => {
|
||||||
const stage7 = pipelineOverview[6];
|
const stage7 = pipelineOverview[6];
|
||||||
const stageConfig = STAGE_CONFIG[6];
|
const stageConfig = STAGE_CONFIG[6];
|
||||||
@@ -1259,24 +1271,36 @@ const AutomationPage: React.FC = () => {
|
|||||||
);
|
);
|
||||||
})()}
|
})()}
|
||||||
|
|
||||||
{/* Approved summary card - Same layout as Stage 7 */}
|
{/* Scheduled summary card - Same layout as Stage cards */}
|
||||||
<div className="rounded-2xl p-4 border-2 border-success-200 bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/10 dark:to-success-800/10 flex flex-col h-full">
|
<div className="rounded-xl border border-gray-200 dark:border-gray-800 p-4 transition-all bg-white dark:bg-gray-900 border-l-[5px] border-l-success-500">
|
||||||
{/* Header Row - Icon and Label on left, Big Count on right */}
|
{/* Header Row - Icon, Label on left; Function Name on right */}
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="size-8 rounded-lg bg-gradient-to-br from-success-400 to-success-600 flex items-center justify-center shadow-md flex-shrink-0">
|
<div className="size-8 rounded-lg bg-gradient-to-br from-success-500 to-success-600 flex items-center justify-center shadow-md flex-shrink-0">
|
||||||
<CheckCircleIcon className="size-4 text-white" />
|
<ClockIcon className="size-4 text-white" />
|
||||||
</div>
|
</div>
|
||||||
<span className="text-base font-bold text-success-900 dark:text-success-100">Approved</span>
|
<span className="text-base font-bold text-gray-900 dark:text-white">Scheduled</span>
|
||||||
</div>
|
|
||||||
{/* Big count on right */}
|
|
||||||
<div className="text-3xl font-bold text-success-600 dark:text-success-400">
|
|
||||||
{metrics?.content?.published ?? pipelineOverview[3]?.counts?.published ?? getStageResult(4)?.published ?? 0}
|
|
||||||
</div>
|
</div>
|
||||||
|
{/* Stage Function Name - Right side, larger font */}
|
||||||
|
<div className="text-sm font-bold text-success-600 dark:text-success-400">Ready to Publish</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Status Label - Right aligned */}
|
{/* Single Row: Pending & Scheduled */}
|
||||||
<div className="text-sm font-bold text-success-600 dark:text-success-400 mb-4 text-right">Published Content</div>
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase mb-0.5">Pending</div>
|
||||||
|
<div className={`text-xl font-bold ${(metrics?.content?.not_published ?? 0) > 0 ? 'text-gray-600 dark:text-gray-300' : 'text-gray-400 dark:text-gray-500'}`}>
|
||||||
|
{metrics?.content?.not_published ?? 0}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="h-8 w-px bg-gray-200 dark:bg-gray-700"></div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase mb-0.5">Scheduled</div>
|
||||||
|
<div className={`text-xl font-bold ${(metrics?.content?.scheduled ?? 0) > 0 ? 'text-success-600 dark:text-success-400' : 'text-gray-400 dark:text-gray-500'}`}>
|
||||||
|
{metrics?.content?.scheduled ?? 0}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user