937 lines
44 KiB
Markdown
937 lines
44 KiB
Markdown
# IGNY8 Comprehensive UX Audit & Recommendations
|
||
|
||
**Date:** December 27, 2025
|
||
**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. [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)
|
||
|
||
---
|
||
|
||
## 1. Site & Sector Selector Placement
|
||
|
||
### Rationale
|
||
- **Site Selector**: Required when data is scoped to a specific site
|
||
- **Sector Selector**: Required when data can be further filtered by content category/niche
|
||
- **Both**: When user needs precise data filtering at granular level
|
||
- **None**: When page is not site-specific or shows account-level data
|
||
|
||
### Recommendations by Page
|
||
|
||
| Page | Site Selector | Sector Selector | Reason |
|
||
|------|:-------------:|:---------------:|--------|
|
||
| **DASHBOARD** |
|
||
| Home | ✅ All Sites option | ❌ | Overview across sites - sector too granular for dashboard |
|
||
| **SETUP** |
|
||
| Add Keywords | ✅ | ✅ | Keywords are site+sector specific |
|
||
| Content Settings | ✅ | ❌ | Settings are site-level, not sector-level |
|
||
| Sites List | ❌ | ❌ | Managing sites themselves |
|
||
| Site Dashboard | ❌ (context) | ❌ | Already in specific site context |
|
||
| Site Settings tabs | ❌ (context) | ❌ | Already in specific site context |
|
||
| **PLANNER** |
|
||
| Keywords | ✅ | ✅ | Keywords organized by site+sector |
|
||
| Clusters | ✅ | ✅ | Clusters organized by site+sector |
|
||
| Cluster Detail | ❌ (context) | ❌ (context) | Already in cluster context |
|
||
| Ideas | ✅ | ✅ | Ideas organized by site+sector |
|
||
| **WRITER** |
|
||
| Tasks/Queue | ✅ | ✅ | Tasks organized by site+sector |
|
||
| Content/Drafts | ✅ | ✅ | Content organized by site+sector |
|
||
| Content View | ❌ (context) | ❌ (context) | Viewing specific content |
|
||
| Images | ✅ | ✅ | Images tied to content by site+sector |
|
||
| Review | ✅ | ✅ | Review queue by site+sector |
|
||
| Published | ✅ | ✅ | Published content by site+sector |
|
||
| **AUTOMATION** |
|
||
| Automation | ✅ | ❌ | Automation runs at site level |
|
||
| **LINKER** (if enabled) |
|
||
| Content List | ✅ | ✅ | Linking is content-specific |
|
||
| **OPTIMIZER** (if enabled) |
|
||
| Content Selector | ✅ | ✅ | Optimization is content-specific |
|
||
| Analysis Preview | ❌ (context) | ❌ (context) | Already in analysis context |
|
||
| **THINKER** (Admin) |
|
||
| All Thinker pages | ❌ | ❌ | System-wide prompts/profiles |
|
||
| **BILLING** |
|
||
| All Billing pages | ❌ | ❌ | Account-level billing data |
|
||
| **ACCOUNT** |
|
||
| Account Settings | ❌ | ❌ | Account-level settings |
|
||
| Profile | ❌ | ❌ | User profile |
|
||
| Team | ❌ | ❌ | Account-wide team |
|
||
| Plans | ❌ | ❌ | Account-level plans |
|
||
| Usage | ❌ | ❌ | Account-level usage |
|
||
| **HELP** |
|
||
| Help Page | ❌ | ❌ | Documentation |
|
||
|
||
### Implementation Priority
|
||
1. **High**: Ensure Planner & Writer pages show both selectors
|
||
2. **Medium**: Automation shows site only
|
||
3. **Low**: Account/Billing/Thinker show none
|
||
|
||
---
|
||
|
||
## 2. Table Action Row Metrics - Tooltip Improvements
|
||
|
||
### 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`
|
||
|
||
**NO additional metrics should be added to the App Header** - only Credits remains there.
|
||
|
||
### Improvement: Better Actionable Tooltips
|
||
|
||
The current tooltips are basic. Improve them with **actionable context and next-step guidance**:
|
||
|
||
#### Keywords Page Metrics Tooltips
|
||
|
||
| 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." |
|
||
|
||
#### Clusters Page Metrics Tooltips
|
||
|
||
| 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." |
|
||
|
||
#### Ideas Page Metrics Tooltips
|
||
|
||
| 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." |
|
||
|
||
#### Tasks Page Metrics Tooltips
|
||
|
||
| 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." |
|
||
|
||
#### Content Page Metrics Tooltips
|
||
|
||
| 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." |
|
||
|
||
#### Images Page Metrics Tooltips
|
||
|
||
| 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. 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
|
||
- Missing counts where data is available
|
||
- Inconsistent terminology
|
||
- Not professional/polished
|
||
|
||
### Recommended Progress Step Text
|
||
|
||
#### Auto Cluster Keywords
|
||
|
||
| Phase | Current | Recommended |
|
||
|-------|---------|-------------|
|
||
| INIT | Validating keywords | Validating {count} keywords for clustering |
|
||
| PREP | Loading keyword data | Analyzing keyword relationships |
|
||
| AI_CALL | Generating clusters with Igny8 Semantic SEO Model | Grouping keywords by search intent ({count} keywords) |
|
||
| PARSE | Organizing clusters | Organizing {cluster_count} semantic clusters |
|
||
| SAVE | Saving clusters | Saving {cluster_count} clusters with {keyword_count} keywords |
|
||
| DONE | Clustering complete! | ✓ Created {cluster_count} clusters from {keyword_count} keywords |
|
||
|
||
#### Generate Ideas
|
||
|
||
| Phase | Current | Recommended |
|
||
|-------|---------|-------------|
|
||
| INIT | Verifying cluster integrity | Analyzing {count} clusters for content opportunities |
|
||
| PREP | Loading cluster keywords | Mapping {keyword_count} keywords to topic briefs |
|
||
| AI_CALL | Generating ideas with Igny8 Semantic AI | Generating content ideas for {cluster_count} clusters |
|
||
| PARSE | High-opportunity ideas generated | Structuring {idea_count} article outlines |
|
||
| SAVE | Content Outline for Ideas generated | Saving {idea_count} content ideas with outlines |
|
||
| DONE | Ideas generated! | ✓ Generated {idea_count} content ideas from {cluster_count} clusters |
|
||
|
||
#### Generate Content
|
||
|
||
| Phase | Current | Recommended |
|
||
|-------|---------|-------------|
|
||
| INIT | Validating task | Preparing {count} article{s} for generation |
|
||
| PREP | Preparing content idea | Building content brief with {keyword_count} target keywords |
|
||
| AI_CALL | Writing article with Igny8 Semantic AI | Writing {count} article{s} (~{word_target} words each) |
|
||
| PARSE | Formatting content | Formatting HTML content and metadata |
|
||
| SAVE | Saving article | Saving {count} article{s} ({total_words} words) |
|
||
| DONE | Content generated! | ✓ {count} article{s} generated ({total_words} words total) |
|
||
|
||
#### Generate Image Prompts
|
||
|
||
| Phase | Current | Recommended |
|
||
|-------|---------|-------------|
|
||
| INIT | Checking content and image slots | Analyzing content for {count} image opportunities |
|
||
| PREP | Mapping content for image prompts | Identifying featured image and {in_article_count} in-article image slots |
|
||
| AI_CALL | Writing Featured Image Prompts | Creating optimized prompts for {count} images |
|
||
| PARSE | Writing In‑article Image Prompts | Refining {in_article_count} contextual image descriptions |
|
||
| SAVE | Assigning Prompts to Dedicated Slots | Assigning {count} prompts to image slots |
|
||
| DONE | Prompts generated! | ✓ {count} image prompts ready (1 featured + {in_article_count} in-article) |
|
||
|
||
#### Generate Images from Prompts
|
||
|
||
| Phase | Current | Recommended |
|
||
|-------|---------|-------------|
|
||
| INIT | Validating image prompts | Queuing {count} images for generation |
|
||
| PREP | Preparing image generation queue | Preparing AI image generation ({count} images) |
|
||
| AI_CALL | Generating images with AI | Generating image {current}/{count}... |
|
||
| PARSE | Processing image URLs | Processing {count} generated images |
|
||
| SAVE | Saving image URLs | Uploading {count} images to media library |
|
||
| DONE | Images generated! | ✓ {count} images generated and saved |
|
||
|
||
### Success Message Templates (with counts)
|
||
|
||
```typescript
|
||
// Clustering
|
||
`✓ Organized ${keywordCount} keywords into ${clusterCount} semantic clusters`
|
||
|
||
// Ideas
|
||
`✓ Created ${ideaCount} content ideas with detailed outlines`
|
||
|
||
// Content
|
||
`✓ Generated ${articleCount} articles (${totalWords.toLocaleString()} words)`
|
||
|
||
// Image Prompts
|
||
`✓ Created prompts for ${imageCount} images (1 featured + ${inArticleCount} in-article)`
|
||
|
||
// Image Generation
|
||
`✓ Generated and saved ${imageCount} AI images`
|
||
```
|
||
|
||
---
|
||
|
||
## 5. Dashboard Redesign Plan
|
||
|
||
### Current Issues
|
||
- Too much whitespace and large headings
|
||
- Repeating same counts/metrics without different dimensions
|
||
- Missing actionable insights
|
||
- No AI operations analytics
|
||
- Missing "needs attention" items
|
||
|
||
### 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 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 →] │ │
|
||
│ └─────────────────────────────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### Widget Specifications
|
||
|
||
#### 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
|
||
|
||
#### 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
|
||
|
||
#### 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
|
||
|
||
#### 4. AI Operations Widget (NEW - from Django Admin Reports)
|
||
Shows data from `CreditUsageLog` model:
|
||
```typescript
|
||
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
|
||
|
||
---
|
||
|
||
## 6. Site Setup Checklist Implementation
|
||
|
||
### Current Status
|
||
- ✅ `SiteSetupChecklist.tsx` component EXISTS
|
||
- ✅ Integrated in `Site Dashboard` page (full mode)
|
||
- ❌ **NOT integrated in `SiteCard.tsx`** (compact mode not used)
|
||
|
||
### Missing Implementation
|
||
|
||
The component has a `compact` prop but is not used in the site cards list.
|
||
|
||
### Recommended Fix
|
||
|
||
**File:** `frontend/src/components/sites/SiteCard.tsx`
|
||
|
||
Add compact checklist to each site card:
|
||
|
||
```tsx
|
||
// In SiteCard component, add after the status badges:
|
||
<SiteSetupChecklist
|
||
siteId={site.id}
|
||
siteName={site.name}
|
||
hasIndustry={!!site.industry}
|
||
hasSectors={site.sectors_count > 0}
|
||
hasWordPressIntegration={!!site.wordpress_site_url}
|
||
hasKeywords={site.keywords_count > 0}
|
||
compact={true}
|
||
/>
|
||
```
|
||
|
||
**Visual Result:**
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ My Website [Active] │
|
||
│ example.com │
|
||
│ Industry: Tech │ 3 Sectors │
|
||
│ ●●●○ 3/4 Setup Steps Complete │ ← NEW compact checklist
|
||
│ [Manage →] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 7. To-Do-s Completion Audit
|
||
|
||
### Summary by Section
|
||
|
||
| Section | File | Status | Remaining Items |
|
||
|---------|------|--------|-----------------|
|
||
| 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 | - |
|
||
| Section 5 | `SECTION_5_FINAL_MODS.md` | ✅ Done | - |
|
||
| Section 6 | `SECTION_6_FINAL_MODS.md` | ✅ Done | - |
|
||
|
||
**Note:** Plans, billing, credits, usage improvements moved to separate phase.
|
||
|
||
### Remaining Items Detail
|
||
|
||
#### Dashboard (Section 1) - Major Work
|
||
- [ ] 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
|
||
- [ ] Contextual Quick Actions
|
||
|
||
#### Cross-Module
|
||
- [ ] Notification bell dropdown with AI run logging
|
||
- [ ] 3-widget footer layout for Planner/Writer pages
|
||
- [ ] Improved tooltips for table action row metrics
|
||
- [ ] Site Setup Checklist on site cards (compact mode)
|
||
|
||
---
|
||
|
||
## 8. Notification System Plan
|
||
|
||
### Current State
|
||
- Bell icon exists with placeholder/mock notifications
|
||
- No real notification system or API
|
||
- No notification persistence
|
||
|
||
### Comprehensive Notification System Design
|
||
|
||
#### A. Notification Data Model
|
||
|
||
```python
|
||
# backend/igny8_core/business/notifications/models.py
|
||
|
||
class Notification(BaseModel):
|
||
account = models.ForeignKey('Account', on_delete=models.CASCADE)
|
||
user = models.ForeignKey('User', on_delete=models.CASCADE, null=True) # null = all users
|
||
|
||
# Notification content
|
||
type = models.CharField(max_length=50, choices=NOTIFICATION_TYPES)
|
||
title = models.CharField(max_length=200)
|
||
message = models.TextField()
|
||
severity = models.CharField(max_length=20, choices=SEVERITY_CHOICES)
|
||
|
||
# Related objects
|
||
site = models.ForeignKey('Site', null=True, on_delete=models.CASCADE)
|
||
content_type = models.ForeignKey(ContentType, null=True)
|
||
object_id = models.PositiveIntegerField(null=True)
|
||
content_object = GenericForeignKey()
|
||
|
||
# Action
|
||
action_url = models.CharField(max_length=500, null=True)
|
||
action_label = models.CharField(max_length=50, null=True)
|
||
|
||
# Status
|
||
is_read = models.BooleanField(default=False)
|
||
read_at = models.DateTimeField(null=True)
|
||
|
||
created_at = models.DateTimeField(auto_now_add=True)
|
||
|
||
NOTIFICATION_TYPES = [
|
||
# AI Operations
|
||
('ai_cluster_complete', 'Clustering Complete'),
|
||
('ai_cluster_failed', 'Clustering Failed'),
|
||
('ai_ideas_complete', 'Ideas Generated'),
|
||
('ai_ideas_failed', 'Idea Generation Failed'),
|
||
('ai_content_complete', 'Content Generated'),
|
||
('ai_content_failed', 'Content Generation Failed'),
|
||
('ai_images_complete', 'Images Generated'),
|
||
('ai_images_failed', 'Image Generation Failed'),
|
||
|
||
# Workflow
|
||
('content_ready_review', 'Content Ready for Review'),
|
||
('content_published', 'Content Published'),
|
||
('content_publish_failed', 'Publishing Failed'),
|
||
|
||
# WordPress Sync
|
||
('wordpress_sync_success', 'WordPress Sync Complete'),
|
||
('wordpress_sync_failed', 'WordPress Sync Failed'),
|
||
|
||
# Credits/Billing
|
||
('credits_low', 'Credits Running Low'),
|
||
('credits_depleted', 'Credits Depleted'),
|
||
('plan_upgraded', 'Plan Upgraded'),
|
||
|
||
# Setup
|
||
('site_setup_complete', 'Site Setup Complete'),
|
||
('keywords_imported', 'Keywords Imported'),
|
||
]
|
||
|
||
SEVERITY_CHOICES = [
|
||
('info', 'Info'),
|
||
('success', 'Success'),
|
||
('warning', 'Warning'),
|
||
('error', 'Error'),
|
||
]
|
||
```
|
||
|
||
#### B. Notification Creation Points
|
||
|
||
| Trigger Event | Notification Type | Severity | Title | Message Template |
|
||
|---------------|-------------------|----------|-------|------------------|
|
||
| Clustering completes | `ai_cluster_complete` | success | Clustering Complete | Created {count} clusters from {keyword_count} keywords |
|
||
| Clustering fails | `ai_cluster_failed` | error | Clustering Failed | Failed to cluster keywords: {error} |
|
||
| Ideas generated | `ai_ideas_complete` | success | Ideas Generated | Generated {count} content ideas from {cluster_count} clusters |
|
||
| Ideas failed | `ai_ideas_failed` | error | Idea Generation Failed | Failed to generate ideas: {error} |
|
||
| Content generated | `ai_content_complete` | success | Content Generated | Generated {count} articles ({word_count} words) |
|
||
| Content failed | `ai_content_failed` | error | Content Generation Failed | Failed to generate content: {error} |
|
||
| Images generated | `ai_images_complete` | success | Images Generated | Generated {count} images for your content |
|
||
| Images failed | `ai_images_failed` | error | Image Generation Failed | Failed to generate {count} images: {error} |
|
||
| Content published | `content_published` | success | Content Published | "{title}" published to {site_name} |
|
||
| Publish failed | `content_publish_failed` | error | Publishing Failed | Failed to publish "{title}": {error} |
|
||
| WP sync success | `wordpress_sync_success` | success | WordPress Synced | Synced {count} items with {site_name} |
|
||
| WP sync failed | `wordpress_sync_failed` | error | Sync Failed | WordPress sync failed for {site_name}: {error} |
|
||
| Credits at 80% | `credits_low` | warning | Credits Running Low | You've used 80% of your credits. Consider upgrading. |
|
||
| Credits at 90% | `credits_low` | warning | Credits Almost Depleted | Only 10% of credits remaining. Upgrade to continue. |
|
||
| Credits depleted | `credits_depleted` | error | Credits Depleted | Your credits are exhausted. Upgrade to continue. |
|
||
| Site setup done | `site_setup_complete` | success | Site Ready | {site_name} is fully configured and ready! |
|
||
| Keywords imported | `keywords_imported` | info | Keywords Imported | Added {count} keywords to {site_name} |
|
||
|
||
#### C. API Endpoints
|
||
|
||
```python
|
||
# GET /api/v1/notifications/
|
||
# Returns paginated list, most recent first
|
||
{
|
||
"count": 45,
|
||
"unread_count": 3,
|
||
"results": [
|
||
{
|
||
"id": 123,
|
||
"type": "ai_content_complete",
|
||
"title": "Content Generated",
|
||
"message": "Generated 5 articles (4,500 words)",
|
||
"severity": "success",
|
||
"site": {"id": 1, "name": "My Blog"},
|
||
"action_url": "/writer/content",
|
||
"action_label": "View Content",
|
||
"is_read": false,
|
||
"created_at": "2025-12-27T10:30:00Z"
|
||
}
|
||
]
|
||
}
|
||
|
||
# POST /api/v1/notifications/{id}/read/
|
||
# Mark single notification as read
|
||
|
||
# POST /api/v1/notifications/read-all/
|
||
# Mark all notifications as read
|
||
|
||
# DELETE /api/v1/notifications/{id}/
|
||
# Delete notification
|
||
```
|
||
|
||
#### D. Frontend Integration
|
||
|
||
##### NotificationDropdown Component Updates
|
||
|
||
```tsx
|
||
// frontend/src/components/header/NotificationDropdown.tsx
|
||
|
||
interface Notification {
|
||
id: number;
|
||
type: string;
|
||
title: string;
|
||
message: string;
|
||
severity: 'info' | 'success' | 'warning' | 'error';
|
||
site?: { id: number; name: string };
|
||
action_url?: string;
|
||
action_label?: string;
|
||
is_read: boolean;
|
||
created_at: string;
|
||
}
|
||
|
||
// Features:
|
||
// - Fetch real notifications on mount
|
||
// - Poll every 30 seconds for new notifications
|
||
// - Show unread count badge on bell icon
|
||
// - Mark as read on click
|
||
// - Navigate to action_url on click
|
||
// - "Mark all read" button
|
||
// - "View all" link to full notifications page
|
||
```
|
||
|
||
##### Full Notifications Page
|
||
|
||
Create `/account/notifications` page with:
|
||
- Full list of all notifications (paginated)
|
||
- Filter by type, severity, site
|
||
- Bulk actions (mark read, delete)
|
||
- Date range filtering
|
||
|
||
#### E. Implementation Priority
|
||
|
||
**Phase 1 (Core):**
|
||
1. Create Notification model
|
||
2. Create API endpoints
|
||
3. Hook AI functions to create notifications on complete/fail
|
||
4. Update NotificationDropdown to fetch real data
|
||
|
||
**Phase 2 (Enhanced):**
|
||
1. Credit threshold notifications
|
||
2. WordPress sync notifications
|
||
3. Full notifications page
|
||
4. Email notifications (optional)
|
||
|
||
**Phase 3 (Polish):**
|
||
1. Notification preferences
|
||
2. Push notifications
|
||
3. Real-time updates (WebSocket)
|
||
|
||
---
|
||
|
||
## Implementation Roadmap
|
||
|
||
### Priority Order
|
||
|
||
1. **Site Setup Checklist on Cards** - Quick win, already built
|
||
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 |
|
||
| Progress modal text | 4h | 4h | 8h |
|
||
| Dashboard redesign | 8h | 16h | 24h |
|
||
| **Total** | **22h** | **46h** | **68h** |
|
||
|
||
---
|
||
|
||
## Appendix: Current vs Recommended Comparison
|
||
|
||
### Table Action Row Metrics (Already Implemented)
|
||
|
||
**Current:** Shows metrics in table action row
|
||
```
|
||
| 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:** 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 + repeating counts
|
||
|
||
**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)
|