# 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: 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)