diff --git a/COMPREHENSIVE-AUDIT-REPORT.md b/COMPREHENSIVE-AUDIT-REPORT.md index 9e09b649..a10b9f36 100644 --- a/COMPREHENSIVE-AUDIT-REPORT.md +++ b/COMPREHENSIVE-AUDIT-REPORT.md @@ -1,19 +1,21 @@ # IGNY8 Comprehensive UX Audit & Recommendations **Date:** December 27, 2025 -**Scope:** Complete application audit for optimal user experience +**Scope:** Complete application audit for optimal user experience +**Note:** Plans, billing, credits, usage sections excluded - will be done in separate phase --- ## Table of Contents 1. [Site & Sector Selector Placement](#1-site--sector-selector-placement) -2. [Metrics System Recommendations](#2-metrics-system-recommendations) -3. [Progress Modal Steps Audit](#3-progress-modal-steps-audit) -4. [Dashboard Redesign Plan](#4-dashboard-redesign-plan) -5. [Site Setup Checklist Implementation](#5-site-setup-checklist-implementation) -6. [To-Do-s Completion Audit](#6-to-do-s-completion-audit) -7. [Notification System Plan](#7-notification-system-plan) +2. [Table Action Row Metrics - Tooltip Improvements](#2-table-action-row-metrics---tooltip-improvements) +3. [Footer Metrics - 3-Widget Layout](#3-footer-metrics---3-widget-layout) +4. [Progress Modal Steps Audit](#4-progress-modal-steps-audit) +5. [Dashboard Redesign Plan](#5-dashboard-redesign-plan) +6. [Site Setup Checklist Implementation](#6-site-setup-checklist-implementation) +7. [To-Do-s Completion Audit](#7-to-do-s-completion-audit) +8. [Notification System Plan](#8-notification-system-plan) --- @@ -76,131 +78,242 @@ --- -## 2. Metrics System Recommendations +## 2. Table Action Row Metrics - Tooltip Improvements -### A. Header Metrics Bar (Table Action Row) +### Current State +The metrics in the table action row are already implemented (as shown in screenshot): +- Keywords page: `Keywords 46 | Clustered 10 | Unmapped 0 | Volume 13.6K` -**Current**: Shows Credits + optional page metrics -**Problem**: Limited space, unclear what metrics mean, no actionable insights +**NO additional metrics should be added to the App Header** - only Credits remains there. -#### Recommended Header Metrics by Page +### Improvement: Better Actionable Tooltips -##### Keywords Page -| Metric | Value Example | Tooltip | -|--------|---------------|---------| -| Keywords | `46` | Total keywords in current view. Add more to expand your content pipeline. | -| Clustered | `10` | Keywords organized into clusters. Unclustered keywords need grouping before idea generation. | -| Unmapped | `0` | Keywords not assigned to clusters. Select unmapped keywords and click "Auto Cluster" to organize them. | -| Volume | `13.6K` | Combined monthly search volume of your keywords. Higher volume = more potential traffic. | +The current tooltips are basic. Improve them with **actionable context and next-step guidance**: -##### Clusters Page -| Metric | Value Example | Tooltip | -|--------|---------------|---------| -| Clusters | `12` | Total keyword clusters. Each cluster can generate multiple content ideas. | -| With Ideas | `8` | Clusters that have generated content ideas. Click a cluster without ideas to "Generate Ideas". | -| Avg Size | `4.2` | Average keywords per cluster. 3-7 keywords per cluster is optimal for focused content. | -| Ready | `4` | Clusters ready for idea generation (have keywords, no ideas yet). | +#### Keywords Page Metrics Tooltips -##### Ideas Page -| Metric | Value Example | Tooltip | -|--------|---------------|---------| -| Ideas | `34` | Content ideas ready to become articles. Select ideas and click "Create Tasks". | -| Pending | `12` | Ideas not yet converted to tasks. Convert ideas to tasks to begin content creation. | -| In Tasks | `22` | Ideas already converted to writing tasks. View in Writer → Tasks. | +| Metric | Current Tooltip | Improved Tooltip | +|--------|----------------|------------------| +| **Keywords** | "Total keywords" | "46 keywords ready for clustering. Select unclustered keywords and click 'Auto Cluster' to organize them into topic groups." | +| **Clustered** | "Keywords in clusters" | "10 clusters created. Clusters with 3-7 keywords are optimal. Click on a cluster to generate content ideas from it." | +| **Unmapped** | "Unclustered keywords" | "All keywords are clustered! New keywords you add will appear here until clustered." | +| **Volume** | "Total search volume" | "13.6K combined monthly searches. Higher volume keywords should be prioritized for content creation." | -##### Tasks Page -| Metric | Value Example | Tooltip | -|--------|---------------|---------| -| Queue | `15` | Tasks waiting for content generation. Select tasks and click "Generate Content". | -| Processing | `2` | Tasks currently being written by AI. Content will appear in Drafts when complete. | -| Complete | `28` | Tasks with generated content. View and edit in Writer → Content. | +#### Clusters Page Metrics Tooltips -##### Content/Drafts Page -| Metric | Value Example | Tooltip | -|--------|---------------|---------| -| Drafts | `25` | Content pieces in draft status. Review and approve to move to publishing. | -| Pending Images | `8` | Drafts missing images. Select and click "Generate Images" to create visuals. | -| Ready to Review | `17` | Drafts with complete content and images. Click "Send to Review" when ready. | +| Metric | Current Tooltip | Improved Tooltip | +|--------|----------------|------------------| +| **Clusters** | "Total clusters" | "12 topic clusters available. Each cluster groups related keywords for focused content creation." | +| **With Ideas** | "Clusters with ideas" | "8 clusters have content ideas. Click 'Generate Ideas' on clusters without ideas to plan new content." | +| **Keywords** | "Total keywords" | "46 keywords organized across clusters. Well-balanced clusters have 3-7 keywords each." | +| **Ready** | "Ready for ideas" | "4 clusters are ready for idea generation. Select them and click 'Generate Ideas' to create content outlines." | -##### Review Page -| Metric | Value Example | Tooltip | -|--------|---------------|---------| -| In Review | `5` | Content awaiting your review. Approve to move to publishing queue. | -| This Week | `12` | Content reviewed this week. Stay on top of reviews to maintain workflow. | +#### Ideas Page Metrics Tooltips -##### Published Page -| Metric | Value Example | Tooltip | -|--------|---------------|---------| -| Published | `45` | Content successfully published to WordPress. | -| This Month | `12` | Content published this billing cycle. | -| Total Words | `52.3K` | Total words published. Great for tracking content velocity! | +| Metric | Current Tooltip | Improved Tooltip | +|--------|----------------|------------------| +| **Ideas** | "Total ideas" | "34 content ideas generated. Review each idea's outline, then click 'Create Task' to begin content generation." | +| **Pending** | "Not yet tasks" | "12 ideas haven't been converted to tasks yet. Convert ideas to tasks to start the content writing process." | +| **In Tasks** | "Converted to tasks" | "22 ideas are now writing tasks. View their progress in Writer → Tasks queue." | -### B. Module Metrics Footer (Below Tables) +#### Tasks Page Metrics Tooltips -**Current Problem**: Cards too large, not enough actionable info, unclear relationship to user's workflow +| Metric | Current Tooltip | Improved Tooltip | +|--------|----------------|------------------| +| **Queue** | "Pending tasks" | "15 tasks waiting for content generation. Select tasks and click 'Generate Content' to write articles." | +| **Processing** | "In progress" | "2 tasks are being written by AI. Content will appear in Drafts when complete (~2-3 min each)." | +| **Complete** | "Finished tasks" | "28 tasks have generated content. Review articles in Writer → Content before publishing." | -#### Recommended Footer Design: Compact Information Cards +#### Content Page Metrics Tooltips -**New Size**: Reduce card padding from `p-5 md:p-6` to `p-3 md:p-4` -**Layout**: 4-column grid on desktop, 2-column on tablet, 1-column on mobile +| Metric | Current Tooltip | Improved Tooltip | +|--------|----------------|------------------| +| **Drafts** | "Draft articles" | "25 articles in draft status. Add images and review before sending to the approval queue." | +| **Has Images** | "With images" | "17 articles have images attached. Articles with images get 94% more engagement." | +| **Needs Images** | "Missing images" | "8 articles need images. Select them and click 'Generate Images' to create featured & in-article visuals." | -#### Keywords Page Footer +#### Images Page Metrics Tooltips -| Card | Title | Value | Subtitle | Color | Action | -|------|-------|-------|----------|-------|--------| -| 1 | Total Keywords | `46` | `10 clusters` | blue | → Keywords | -| 2 | Clustered | `42` | `91% organized` | green | → Clusters | -| 3 | Easy Wins | `8` | `Low difficulty, high volume` | orange | Filter low diff | -| 4 | Unmapped | `4` | `Need clustering` | purple | Select unmapped | - -**Progress Bar**: `Keyword Pipeline: 91% clustered` - -#### Clusters Page Footer - -| Card | Title | Value | Subtitle | Color | Action | -|------|-------|-------|----------|-------|--------| -| 1 | Clusters | `12` | `46 keywords` | blue | - | -| 2 | With Ideas | `8` | `67% have ideas` | green | → Ideas | -| 3 | Ready | `4` | `Can generate ideas` | orange | Select ready | -| 4 | Empty | `0` | `No keywords` | purple | - | - -**Progress Bar**: `Idea Pipeline: 67% clusters have ideas` - -#### Tasks Page Footer - -| Card | Title | Value | Subtitle | Color | Action | -|------|-------|-------|----------|-------|--------| -| 1 | Ideas | `34` | `From 12 clusters` | blue | → Planner/Ideas | -| 2 | In Queue | `15` | `Awaiting AI` | orange | - | -| 3 | Processing | `2` | `Writing now` | purple | - | -| 4 | Complete | `28` | `Ready for review` | green | → Content | - -**Progress Bar**: `Content Pipeline: 62% tasks complete` - -#### Content Page Footer - -| Card | Title | Value | Subtitle | Color | Action | -|------|-------|-------|----------|-------|--------| -| 1 | Drafts | `25` | `12.5K words` | blue | - | -| 2 | Has Images | `17` | `68% visual` | green | - | -| 3 | Needs Images | `8` | `Generate images` | orange | Select no images | -| 4 | Ready | `17` | `Complete & ready` | success | Send to review | - -**Progress Bar**: `Image Pipeline: 68% have images` - -### C. Additional Explainer Text - -Add a subtle helper line below metrics footer (optional, can be toggled off): - -``` -💡 Next step: 8 drafts need images. Select them and click "Generate Images" to complete. -``` - -This contextual guidance appears based on current data state. +| Metric | Current Tooltip | Improved Tooltip | +|--------|----------------|------------------| +| **Total** | "Total images" | "127 images in your library. Each article can have 1 featured image + multiple in-article images." | +| **Generated** | "AI generated" | "112 images created by AI. Review generated images and regenerate any that don't match your brand." | +| **Pending** | "Awaiting generation" | "15 image prompts ready. Click 'Generate Images' to create visuals from your approved prompts." | --- -## 3. Progress Modal Steps Audit +## 3. Footer Metrics - 3-Widget Layout + +### Design: Three-Column Widget Layout + +Replace current single metric cards with a **3-widget horizontal layout** (33.3% each): + +``` +┌─────────────────────────────────────────────────────────────────────────────────────┐ +│ WIDGET 1: PAGE METRICS │ WIDGET 2: MODULE STATS │ WIDGET 3: COMPLETION │ +│ (Current Page Progress) │ (Full Module Overview) │ (Both Modules Stats) │ +│ ~33.3% width │ ~33.3% width │ ~33.3% width │ +└─────────────────────────────────────────────────────────────────────────────────────┘ +``` + +### Widget 1: Current Page Metrics (with Combined Progress Bar) + +Shows metrics specific to the current page with a single combined progress bar. + +#### Keywords Page - Widget 1 +``` +┌──────────────────────────────────────────────────┐ +│ PAGE PROGRESS │ +│ │ +│ Keywords 46 Clustered 42 (91%) │ +│ Unmapped 4 Volume 13.6K │ +│ │ +│ ████████████████████░░░ 91% Clustered │ +│ │ +│ 💡 4 keywords ready to cluster │ +└──────────────────────────────────────────────────┘ +``` + +#### Clusters Page - Widget 1 +``` +┌──────────────────────────────────────────────────┐ +│ PAGE PROGRESS │ +│ │ +│ Clusters 12 With Ideas 8 (67%) │ +│ Keywords 46 Ready 4 │ +│ │ +│ ██████████████░░░░░░░ 67% Have Ideas │ +│ │ +│ 💡 4 clusters ready for idea generation │ +└──────────────────────────────────────────────────┘ +``` + +#### Ideas Page - Widget 1 +``` +┌──────────────────────────────────────────────────┐ +│ PAGE PROGRESS │ +│ │ +│ Ideas 34 In Tasks 22 (65%) │ +│ Pending 12 From Clusters 8 │ +│ │ +│ █████████████░░░░░░░░ 65% Converted │ +│ │ +│ 💡 12 ideas ready to become tasks │ +└──────────────────────────────────────────────────┘ +``` + +#### Tasks Page - Widget 1 +``` +┌──────────────────────────────────────────────────┐ +│ PAGE PROGRESS │ +│ │ +│ Total 45 Complete 28 (62%) │ +│ Queue 15 Processing 2 │ +│ │ +│ ████████████░░░░░░░░░ 62% Generated │ +│ │ +│ 💡 15 tasks in queue for content generation │ +└──────────────────────────────────────────────────┘ +``` + +#### Content Page - Widget 1 +``` +┌──────────────────────────────────────────────────┐ +│ PAGE PROGRESS │ +│ │ +│ Drafts 25 Has Images 17 (68%) │ +│ Total Words 12.5K Ready 17 │ +│ │ +│ █████████████░░░░░░░░ 68% Have Images │ +│ │ +│ 💡 8 drafts need images before review │ +└──────────────────────────────────────────────────┘ +``` + +### Widget 2: Module Stats (Same Widget Across Module Pages) + +Shows the **complete module overview** with actionable links. Same widget appears on all pages within a module. + +#### Planner Module - Widget 2 (shown on Keywords, Clusters, Ideas pages) +``` +┌──────────────────────────────────────────────────┐ +│ PLANNER MODULE │ +│ │ +│ Keywords ─────────────────────────────► Clusters │ +│ 46 Auto Cluster 12 │ +│ ████████████████████░░░ 91% │ +│ │ +│ Clusters ─────────────────────────────► Ideas │ +│ 12 Generate Ideas 34 │ +│ █████████████░░░░░░░░░ 67% │ +│ │ +│ Ideas ────────────────────────────────► Tasks │ +│ 34 Create Tasks 22 │ +│ █████████████░░░░░░░░░ 65% │ +│ │ +│ [→ Keywords] [→ Clusters] [→ Ideas] │ +└──────────────────────────────────────────────────┘ +``` + +#### Writer Module - Widget 2 (shown on Tasks, Content, Images, Review, Published pages) +``` +┌──────────────────────────────────────────────────┐ +│ WRITER MODULE │ +│ │ +│ Tasks ───────────────────────────────► Drafts │ +│ 45 Generate Content 28 │ +│ ████████████░░░░░░░░░ 62% │ +│ │ +│ Drafts ──────────────────────────────► Images │ +│ 28 Generate Images 17 │ +│ █████████████░░░░░░░░ 68% │ +│ │ +│ Ready ───────────────────────────────► Published │ +│ 17 Review & Publish 45 │ +│ ████████████████░░░░ 73% │ +│ │ +│ [→ Tasks] [→ Content] [→ Images] [→ Published] │ +└──────────────────────────────────────────────────┘ +``` + +### Widget 3: Both Modules Completion Stats + +Shows **completed items from both Planner and Writer** with time filter (7/30/90 days). + +``` +┌──────────────────────────────────────────────────┐ +│ WORKFLOW COMPLETION [7d] [30d] [90d] │ +│ │ +│ PLANNER │ +│ ├─ Keywords Clustered 42 ████████ │ +│ ├─ Clusters Created 12 ███ │ +│ └─ Ideas Generated 34 ███████ │ +│ │ +│ WRITER │ +│ ├─ Content Generated 28 ██████ │ +│ ├─ Images Created 127 █████████ │ +│ └─ Articles Published 45 █████████ │ +│ │ +│ Credits Used: 2,450 │ Operations: 156 │ +│ │ +│ [View Full Analytics →] │ +└──────────────────────────────────────────────────┘ +``` + +### Implementation Notes + +- Use existing `Card` component from `components/ui/card` +- Use existing `ProgressBar` component from `components/ui/progress` +- Use standard CSS tokens from `styles/tokens.css`: + - `--color-primary` for primary progress bars + - `--color-success` for completion indicators + - `--color-warning` for attention items +- Grid layout: `grid grid-cols-1 lg:grid-cols-3 gap-4` +- Compact padding: `p-4` instead of `p-6` + +--- + +## 4. Progress Modal Steps Audit ### Current Issues - Generic messages lacking context @@ -286,163 +399,186 @@ This contextual guidance appears based on current data state. --- -## 4. Dashboard Redesign Plan +## 5. Dashboard Redesign Plan ### Current Issues -- Too much whitespace -- Large headings with little content -- Workflow guide takes too much space -- Not actionable at a glance +- Too much whitespace and large headings +- Repeating same counts/metrics without different dimensions +- Missing actionable insights +- No AI operations analytics - Missing "needs attention" items -- Missing recent activity -### New Dashboard Layout (Compact, Information-Dense) +### New Dashboard Design: Multi-Dimension Compact Widgets + +Based on Django admin reports analysis, the dashboard should show **different data dimensions** instead of repeating counts: + +### Dashboard Layout (Compact, Information-Dense) ``` -┌─────────────────────────────────────────────────────────────────────────────┐ -│ ⚠ NEEDS ATTENTION (collapsible, only if items exist) │ -│ ┌─────────────────────────┐ ┌─────────────────────────┐ ┌─────────────────┐ │ -│ │ 3 content pending review│ │ WP sync failed (Site A) │ │ Credits at 82% │ │ -│ │ [Review →] │ │ [Retry] [Settings →] │ │ [Upgrade →] │ │ -│ └─────────────────────────┘ └─────────────────────────┘ └─────────────────┘ │ -├─────────────────────────────────────────────────────────────────────────────┤ -│ QUICK STATS (compact 4-6 column row) │ -│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ -│ │Sites │ │ KWs │ │Clust │ │Ideas │ │Draft │ │Pub'd │ [Site: ▼ All Sites] │ -│ │ 2 │ │ 156 │ │ 23 │ │ 67 │ │ 12 │ │ 45 │ │ -│ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ │ -├─────────────────────────────────────────────────────────────────────────────┤ -│ WORKFLOW PIPELINE (compact horizontal) │ CREDITS │ -│ Sites → Keywords → Clusters → Ideas │ ████████░░░░░ 826/30K │ -│ ✓ 156 23 67 │ ~82% remaining │ -│ → Content → Published │ Est. 340 articles left │ -│ 12 45 │ [View Usage →] │ -├────────────────────────────────────────────────┼────────────────────────────┤ -│ QUICK ACTIONS (2 column grid) │ WORKFLOW GUIDE │ -│ ┌────────────────┐ ┌────────────────┐ │ 1. Add Keywords → Planner │ -│ │ + Add Keywords │ │ ⚡ Auto Cluster │ │ 2. Cluster → Auto Cluster │ -│ └────────────────┘ └────────────────┘ │ 3. Ideas → Generate Ideas │ -│ ┌────────────────┐ ┌────────────────┐ │ 4. Tasks → Create Tasks │ -│ │ 📝 Write Content│ │ 🖼 Gen Images │ │ 5. Content → Generate │ -│ └────────────────┘ └────────────────┘ │ 6. Images → Generate │ -│ ┌────────────────┐ ┌────────────────┐ │ 7. Review → Approve │ -│ │ ✓ Review Queue │ │ 🚀 Publish │ │ 8. Publish → WordPress │ -│ └────────────────┘ └────────────────┘ │ [Full Help →] │ -├────────────────────────────────────────────────┴────────────────────────────┤ -│ RECENT ACTIVITY (compact list, max 5 items) │ -│ • Generated 5 articles from "Product Reviews" cluster 2 hours ago │ -│ • Created 12 image prompts for fitness content 4 hours ago │ -│ • Clustered 45 keywords into 8 groups Yesterday │ -│ • Published "10 Best Running Shoes" to WordPress Yesterday │ -│ • Added 23 keywords from seed database 2 days ago │ -│ [View All →] │ -├─────────────────────────────────────────────────────────────────────────────┤ -│ AUTOMATION STATUS (if enabled) │ -│ ● Active Last run: 2h ago Next: Tomorrow 9:00 AM [Configure →] [Run →] │ -└─────────────────────────────────────────────────────────────────────────────┘ +┌─────────────────────────────────────────────────────────────────────────────────────┐ +│ ⚠ NEEDS ATTENTION (collapsible, only shows if items exist) │ +│ ┌────────────────────┐ ┌────────────────────┐ ┌────────────────────┐ │ +│ │ 3 pending review │ │ WP sync failed │ │ Setup incomplete │ │ +│ │ [Review →] │ │ [Retry] [Fix →] │ │ [Complete →] │ │ +│ └────────────────────┘ └────────────────────┘ └────────────────────┘ │ +├─────────────────────────────────────────────────────────────────────────────────────┤ +│ │ +│ ┌─────────────────────────────────┐ ┌─────────────────────────────────────────┐ │ +│ │ WORKFLOW PIPELINE │ │ QUICK ACTIONS │ │ +│ │ │ │ │ │ +│ │ Sites → KWs → Clusters → Ideas │ │ [+ Keywords] [⚡ Cluster] [📝 Content] │ │ +│ │ 2 156 23 67 │ │ [🖼 Images] [✓ Review] [🚀 Publish] │ │ +│ │ ↓ │ │ │ │ +│ │ Tasks → Drafts → Published │ │ WORKFLOW GUIDE │ │ +│ │ 45 28 45 │ │ 1. Add Keywords 5. Generate Content │ │ +│ │ │ │ 2. Auto Cluster 6. Generate Images │ │ +│ │ ████████████░░░ 72% Complete │ │ 3. Generate Ideas 7. Review & Approve │ │ +│ │ │ │ 4. Create Tasks 8. Publish to WP │ │ +│ └─────────────────────────────────┘ │ [Full Help →] │ │ +│ └─────────────────────────────────────────┘ │ +│ │ +├─────────────────────────────────────────────────────────────────────────────────────┤ +│ │ +│ ┌─────────────────────────────────┐ ┌─────────────────────────────────────────┐ │ +│ │ AI OPERATIONS (7d) [▼ 30d] │ │ RECENT ACTIVITY │ │ +│ │ │ │ │ │ +│ │ Operation Count Credits │ │ • Clustered 45 keywords → 8 clusters │ │ +│ │ ───────────────────────────────│ │ 2 hours ago │ │ +│ │ Clustering 8 80 │ │ • Generated 5 articles (4.2K words) │ │ +│ │ Ideas 12 24 │ │ 4 hours ago │ │ +│ │ Content 28 1,400 │ │ • Created 15 image prompts │ │ +│ │ Images 45 225 │ │ Yesterday │ │ +│ │ ───────────────────────────────│ │ • Published "Best Running Shoes" to WP │ │ +│ │ Total 93 1,729 │ │ Yesterday │ │ +│ │ │ │ • Added 23 keywords from seed DB │ │ +│ │ Success Rate: 98.5% │ │ 2 days ago │ │ +│ │ Avg Credits/Op: 18.6 │ │ │ │ +│ └─────────────────────────────────┘ │ [View All Activity →] │ │ +│ └─────────────────────────────────────────┘ │ +│ │ +├─────────────────────────────────────────────────────────────────────────────────────┤ +│ │ +│ ┌─────────────────────────────────┐ ┌─────────────────────────────────────────┐ │ +│ │ CONTENT VELOCITY │ │ AUTOMATION STATUS │ │ +│ │ │ │ │ │ +│ │ This Week This Month Total │ │ ● Active │ Schedule: Daily 9 AM │ │ +│ │ │ │ │ │ +│ │ Articles 5 28 156 │ │ Last Run: Dec 27, 7:00 AM │ │ +│ │ Words 4.2K 24K 156K │ │ ├─ Clustered: 12 keywords │ │ +│ │ Images 12 67 340 │ │ ├─ Ideas: 8 generated │ │ +│ │ │ │ ├─ Content: 5 articles │ │ +│ │ 📈 +23% vs last week │ │ └─ Images: 15 created │ │ +│ │ │ │ │ │ +│ │ [View Analytics →] │ │ Next Run: Dec 28, 9:00 AM │ │ +│ └─────────────────────────────────┘ │ [Configure →] [Run Now →] │ │ +│ └─────────────────────────────────────────┘ │ +│ │ +└─────────────────────────────────────────────────────────────────────────────────────┘ ``` -### Component Specifications +### Widget Specifications -#### 1. NeedsAttention Widget -```typescript -interface NeedsAttentionItem { - type: 'pending_review' | 'sync_failed' | 'low_credits' | 'setup_incomplete' | 'automation_failed'; - title: string; - count?: number; - actions: Array<{ label: string; href?: string; onClick?: () => void }>; - severity: 'warning' | 'error' | 'info'; -} -``` +#### 1. Needs Attention Bar +- Collapsible, only visible when items exist +- Types: `pending_review`, `sync_failed`, `setup_incomplete`, `automation_failed` +- Compact horizontal cards with action buttons -**Triggers:** -- `pending_review`: content.review.count > 0 -- `sync_failed`: site.wordpress_sync.last_error exists -- `low_credits`: usage > 80% -- `setup_incomplete`: site.setup_checklist.complete < 100% -- `automation_failed`: automation.last_run.status === 'failed' +#### 2. Workflow Pipeline Widget +- Visual flow: Sites → Keywords → Clusters → Ideas → Tasks → Drafts → Published +- Shows counts at each stage +- Single progress bar for overall completion +- Clickable stage names link to respective pages -#### 2. Quick Stats Row -- Ultra-compact metric chips -- Clickable to navigate to relevant page -- Shows current site filter or "All Sites" - -#### 3. Workflow Pipeline (Compact) -- Single-line visual with numbers under each stage -- Checkmarks for completed stages -- Arrows showing flow direction -- Subtle progress indication - -#### 4. Credits Widget (Compact) -- Progress bar with percentage -- Remaining estimate ("~340 articles left" based on avg cost) -- Link to usage page - -#### 5. Quick Actions Grid -- 2x3 grid of action buttons -- Icons + short labels -- Direct actions (opens relevant page/modal) - -#### 6. Workflow Guide (Compact) -- Numbered list (1-8 steps) -- Each step is a link -- Collapsible on mobile +#### 3. Quick Actions + Workflow Guide Widget +- 2x3 grid of action buttons (use existing icons) +- Compact numbered workflow guide (1-8 steps) - "Full Help" link to help page -#### 7. Recent Activity -- Compact list format -- Icon + description + timestamp -- Max 5 items with "View All" link -- Real data from AI task logs - -#### 8. Automation Status (Conditional) -- Only shows if automation configured -- Status indicator (green dot = active) -- Last run / next run times -- Quick configure/run buttons - -### Dashboard API Endpoint - -Create aggregated endpoint to reduce API calls: - +#### 4. AI Operations Widget (NEW - from Django Admin Reports) +Shows data from `CreditUsageLog` model: ```typescript -// GET /api/v1/dashboard/summary/ -interface DashboardSummary { - pipeline: { - sites: number; - keywords: number; - clusters: number; - ideas: number; - tasks_pending: number; - content_draft: number; - content_review: number; - content_published: number; - }; - credits: { - used: number; - limit: number; - percentage: number; - estimated_remaining_articles: number; - }; - needs_attention: NeedsAttentionItem[]; - recent_activity: ActivityItem[]; - automation: { - enabled: boolean; - status: 'active' | 'paused' | 'failed'; - last_run: string | null; - next_run: string | null; - }; - sites_setup: Array<{ - site_id: number; - site_name: string; - checklist_complete: number; // percentage +interface AIOperationsData { + period: '7d' | '30d' | '90d'; + operations: Array<{ + type: 'clustering' | 'ideas' | 'content' | 'images'; + count: number; + credits: number; }>; + totals: { + count: number; + credits: number; + success_rate: number; + avg_credits_per_op: number; + }; } ``` +- Time period filter (7d/30d/90d dropdown) +- Table with operation type, count, credits +- Success rate percentage +- Average credits per operation + +#### 5. Recent Activity Widget +Shows data from `AITaskLog` and `CreditUsageLog`: +- Last 5 significant operations +- Timestamp relative (2 hours ago, Yesterday) +- Clickable to navigate to relevant content +- "View All Activity" link + +#### 6. Content Velocity Widget (NEW) +Shows content production rates: +```typescript +interface ContentVelocityData { + this_week: { articles: number; words: number; images: number }; + this_month: { articles: number; words: number; images: number }; + total: { articles: number; words: number; images: number }; + trend: number; // percentage vs previous period +} +``` +- Three time columns: This Week, This Month, Total +- Rows: Articles, Words, Images +- Trend indicator vs previous period + +#### 7. Automation Status Widget +Shows automation run status: +- Current status indicator (Active/Paused/Failed) +- Schedule display +- Last run details with stage breakdown +- Next scheduled run +- Configure and Run Now buttons + +### API Endpoint Required + +```python +# GET /api/v1/dashboard/summary/ +{ + "needs_attention": [...], + "pipeline": { + "sites": 2, "keywords": 156, "clusters": 23, + "ideas": 67, "tasks": 45, "drafts": 28, "published": 45, + "completion_percentage": 72 + }, + "ai_operations": { + "period": "7d", + "operations": [...], + "totals": {...} + }, + "recent_activity": [...], + "content_velocity": {...}, + "automation": {...} +} +``` + +### Implementation Notes + +- Use existing components from `components/ui/` +- Use CSS tokens from `styles/tokens.css` +- Grid layout: `grid grid-cols-1 lg:grid-cols-2 gap-4` +- Compact widget padding: `p-4` +- No large headings - use subtle section labels --- -## 5. Site Setup Checklist Implementation +## 6. Site Setup Checklist Implementation ### Current Status - ✅ `SiteSetupChecklist.tsx` component EXISTS @@ -485,7 +621,7 @@ Add compact checklist to each site card: --- -## 6. To-Do-s Completion Audit +## 7. To-Do-s Completion Audit ### Summary by Section @@ -494,10 +630,11 @@ Add compact checklist to each site card: | Section 1 | `dashboard_mods.md` | 📋 Planned (do LAST) | Dashboard revamp, aggregated API | | Section 2 | `SECTION_2_FINAL_MODS.md` | ✅ Done | - | | Section 3 | `SECTION_3_FINAL_MODS.md` | ✅ Done | - | -| Section 4 | `SECTION_4_FINAL_MODS.md` | ✅ Done | Usage alerts, API activity data | +| Section 4 | `SECTION_4_FINAL_MODS.md` | ✅ Done | - | | Section 5 | `SECTION_5_FINAL_MODS.md` | ✅ Done | - | | Section 6 | `SECTION_6_FINAL_MODS.md` | ✅ Done | - | -| Pricing | `pricing_simplification.md` | 📋 Planned | Credit simplification | + +**Note:** Plans, billing, credits, usage improvements moved to separate phase. ### Remaining Items Detail @@ -505,30 +642,20 @@ Add compact checklist to each site card: - [ ] Aggregated API endpoint `/v1/dashboard/summary/` - [ ] NeedsAttention widget - [ ] Real Recent Activity log (replace hardcoded) +- [ ] AI Operations widget (from CreditUsageLog) +- [ ] Content Velocity widget - [ ] Automation Status display -- [ ] Real-time polling/updates - [ ] Contextual Quick Actions -#### Usage (Section 4) - Minor Work -- [ ] Real API Activity data (currently hardcoded) -- [ ] Real success rate calculation -- [ ] Usage alerts at 80%, 90%, 100% -- [ ] Per-site usage breakdown -- [ ] Usage forecasting - -#### Pricing Simplification -- [ ] Remove monthly limit fields (keep credits/keywords/sites only) -- [ ] Update CreditCostConfig values -- [ ] Add `target_word_count` to ContentSettings -- [ ] Update Usage page (credits only) - #### Cross-Module - [ ] Notification bell dropdown with AI run logging -- [ ] Single source of truth for credit balance +- [ ] 3-widget footer layout for Planner/Writer pages +- [ ] Improved tooltips for table action row metrics +- [ ] Site Setup Checklist on site cards (compact mode) --- -## 7. Notification System Plan +## 8. Notification System Plan ### Current State - Bell icon exists with placeholder/mock notifications @@ -726,47 +853,84 @@ Create `/account/notifications` page with: ### Priority Order 1. **Site Setup Checklist on Cards** - Quick win, already built -2. **Notification System** - High user value -3. **Metrics Improvements** - Better user understanding -4. **Progress Modal Text** - Polish -5. **Dashboard Redesign** - Major effort, do last +2. **Table Action Row Tooltip Improvements** - Quick improvement +3. **Footer 3-Widget Layout** - Better workflow visibility +4. **Notification System** - High user value +5. **Progress Modal Text** - Polish +6. **Dashboard Redesign** - Major effort, do last ### Estimated Effort | Item | Backend | Frontend | Total | |------|---------|----------|-------| | Site checklist on cards | 0h | 2h | 2h | +| Tooltip improvements | 0h | 4h | 4h | +| Footer 3-widget layout | 2h | 12h | 14h | | Notification system | 8h | 8h | 16h | -| Metrics improvements | 2h | 8h | 10h | | Progress modal text | 4h | 4h | 8h | | Dashboard redesign | 8h | 16h | 24h | -| **Total** | **22h** | **38h** | **60h** | +| **Total** | **22h** | **46h** | **68h** | --- ## Appendix: Current vs Recommended Comparison -### Header Metrics Example (Keywords Page) +### Table Action Row Metrics (Already Implemented) -**Current:** +**Current:** Shows metrics in table action row ``` -| Credits 826/30K | +| Keywords 46 | Clustered 10 | Unmapped 0 | Volume 13.6K | ``` -**Recommended:** -``` -| Credits 826/30K | Keywords 46 ⓘ | Clustered 10 ⓘ | Unmapped 0 ⓘ | Volume 13.6K ⓘ | -``` +**Improvement:** Better actionable tooltips with guidance on next steps ### Footer Metrics Example (Keywords Page) **Current:** Large cards with minimal info -**Recommended:** Compact cards with actionable data + progress bar + next step hint +**Recommended:** 3-widget layout: +- Widget 1: Page metrics with combined progress bar +- Widget 2: Full Planner module stats with links +- Widget 3: Both modules completion stats with 7/30/90d filter ### Dashboard Example -**Current:** Hero banner + large sections + much whitespace +**Current:** Hero banner + large sections + much whitespace + repeating counts -**Recommended:** Compact info-dense layout with needs-attention, stats, pipeline, actions, activity all visible without scrolling +**Recommended:** Compact info-dense layout with: +- Needs Attention bar (only if items exist) +- Workflow Pipeline + Quick Actions/Guide (2 columns) +- AI Operations stats + Recent Activity (2 columns) +- Content Velocity + Automation Status (2 columns) +- All visible without scrolling, different data dimensions +--- + +## Technical Notes + +### Standard Components to Use + +From existing codebase: +- `components/ui/card` - Card component +- `components/ui/progress` - ProgressBar component +- `components/ui/button/Button` - Button component +- `components/ui/tooltip/Tooltip` - Tooltip component +- `components/ui/dropdown/Dropdown` - Dropdown component + +### Standard CSS Tokens + +From `styles/tokens.css`: +```css +--color-primary: #0693e3; /* Primary brand blue */ +--color-success: #0bbf87; /* Success green */ +--color-warning: #ff7a00; /* Warning orange */ +--color-danger: #ef4444; /* Danger red */ +--color-purple: #5d4ae3; /* Purple accent */ +``` + +### Do NOT Create + +- Inline duplicate styles +- New color variables outside tokens.css +- Duplicate component implementations +- Styles in igny8-colors.css (use tokens.css)