Files

IGNY8 VPS (Salman) b9e4b6f7e2 final plolish phase 2

2025-12-27 15:25:05 +00:00

46 KiB

Raw Blame History

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
Status: ✅ IMPLEMENTED & INTEGRATED

Implementation Status

Section	Status	Files Modified
1. Site & Sector Selector	✅	Already implemented per guidelines
2. Tooltip Improvements	✅	`config/pages/*.config.tsx` (all 8 page configs updated with actionable tooltips)
3. Footer 3-Widget Layout	✅	`components/dashboard/ThreeWidgetFooter.tsx`
4. Progress Modal Steps	✅	`backend/igny8_core/ai/engine.py`
5. Dashboard Redesign	✅	`components/dashboard/CompactDashboard.tsx`
6. Site Setup Checklist	✅	`components/common/SiteCard.tsx`, `backend/auth/serializers.py`, `services/api.ts`
7. To-Do-s Audit	✅	Documentation only
8. Notification System	✅	`store/notificationStore.ts`, `components/header/NotificationDropdownNew.tsx`, `hooks/useProgressModal.ts`

Integration Complete

Integration	Status	Details
NotificationDropdown → AppHeader	✅	`layout/AppHeader.tsx`, `components/header/Header.tsx` now use `NotificationDropdownNew`
AI Task → Notifications	✅	`hooks/useProgressModal.ts` automatically adds notifications on success/failure
Dashboard exports	✅	`components/dashboard/index.ts` barrel export created
NeedsAttentionBar → Home	✅	`pages/Dashboard/Home.tsx` shows attention items at top
ThreeWidgetFooter hook	✅	`hooks/useThreeWidgetFooter.ts` helper for easy integration

Site & Sector Selector Placement
Table Action Row Metrics - Tooltip Improvements
Footer Metrics - 3-Widget Layout
Progress Modal Steps Audit
Dashboard Redesign Plan
Site Setup Checklist Implementation
To-Do-s Completion Audit
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

High: Ensure Planner & Writer pages show both selectors
Medium: Automation shows site only
Low: Account/Billing/Thinker show none

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."

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         │
└─────────────────────────────────────────────────────────────────────────────────────┘

Shows metrics specific to the current page with a single combined progress bar.

┌──────────────────────────────────────────────────┐
│ PAGE PROGRESS                                    │
│                                                  │
│ Keywords    46      Clustered   42   (91%)       │
│ Unmapped     4      Volume    13.6K              │
│                                                  │
│ ████████████████████░░░ 91% Clustered            │
│                                                  │
│ 💡 4 keywords ready to cluster                   │
└──────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────┐
│ PAGE PROGRESS                                    │
│                                                  │
│ Clusters    12      With Ideas    8   (67%)      │
│ Keywords    46      Ready         4              │
│                                                  │
│ ██████████████░░░░░░░ 67% Have Ideas             │
│                                                  │
│ 💡 4 clusters ready for idea generation          │
└──────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────┐
│ PAGE PROGRESS                                    │
│                                                  │
│ Ideas       34      In Tasks    22   (65%)       │
│ Pending     12      From Clusters  8             │
│                                                  │
│ █████████████░░░░░░░░ 65% Converted              │
│                                                  │
│ 💡 12 ideas ready to become tasks                │
└──────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────┐
│ PAGE PROGRESS                                    │
│                                                  │
│ Total       45      Complete    28   (62%)       │
│ Queue       15      Processing   2              │
│                                                  │
│ ████████████░░░░░░░░░ 62% Generated              │
│                                                  │
│ 💡 15 tasks in queue for content generation      │
└──────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────┐
│ PAGE PROGRESS                                    │
│                                                  │
│ Drafts      25      Has Images  17   (68%)       │
│ Total Words 12.5K   Ready       17              │
│                                                  │
│ █████████████░░░░░░░░ 68% Have Images            │
│                                                  │
│ 💡 8 drafts need images before review            │
└──────────────────────────────────────────────────┘

Shows the complete module overview with actionable links. Same widget appears on all pages within a module.

┌──────────────────────────────────────────────────┐
│ 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                                    │
│                                                  │
│ 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]   │
└──────────────────────────────────────────────────┘

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

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)

// 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 →]               │   │
│                                        └─────────────────────────────────────────┘   │
│                                                                                      │
└─────────────────────────────────────────────────────────────────────────────────────┘

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

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

2x3 grid of action buttons (use existing icons)
Compact numbered workflow guide (1-8 steps)
"Full Help" link to help page

Shows data from CreditUsageLog model:

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

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

Shows content production rates:

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

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

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

// 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

# 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

# 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

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

Create Notification model
Create API endpoints
Hook AI functions to create notifications on complete/fail
Update NotificationDropdown to fetch real data

Phase 2 (Enhanced):

Credit threshold notifications
WordPress sync notifications
Full notifications page
Email notifications (optional)

Phase 3 (Polish):

Notification preferences
Push notifications
Real-time updates (WebSocket)

Implementation Roadmap

Priority Order

Site Setup Checklist on Cards - Quick win, already built
Table Action Row Tooltip Improvements - Quick improvement
Footer 3-Widget Layout - Better workflow visibility
Notification System - High user value
Progress Modal Text - Polish
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:

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

46 KiB Raw Blame History Unescape Escape

IGNY8 Comprehensive UX Audit & Recommendations

Implementation Status

Integration Complete

Table of Contents

1. Site & Sector Selector Placement

Rationale

Recommendations by Page

Implementation Priority

2. Table Action Row Metrics - Tooltip Improvements

Current State

Improvement: Better Actionable Tooltips

Keywords Page Metrics Tooltips

Clusters Page Metrics Tooltips

Ideas Page Metrics Tooltips

Tasks Page Metrics Tooltips

Content Page Metrics Tooltips

Images Page Metrics Tooltips

3. Footer Metrics - 3-Widget Layout

Design: Three-Column Widget Layout

Widget 1: Current Page Metrics (with Combined Progress Bar)

Keywords Page - Widget 1

Clusters Page - Widget 1

Ideas Page - Widget 1

Tasks Page - Widget 1

Content Page - Widget 1

Widget 2: Module Stats (Same Widget Across Module Pages)

Planner Module - Widget 2 (shown on Keywords, Clusters, Ideas pages)

Writer Module - Widget 2 (shown on Tasks, Content, Images, Review, Published pages)

Widget 3: Both Modules Completion Stats

Implementation Notes

4. Progress Modal Steps Audit

Current Issues

Recommended Progress Step Text

Auto Cluster Keywords

Generate Ideas

Generate Content

Generate Image Prompts

Generate Images from Prompts

Success Message Templates (with counts)

5. Dashboard Redesign Plan

Current Issues

New Dashboard Design: Multi-Dimension Compact Widgets

Dashboard Layout (Compact, Information-Dense)

Widget Specifications

1. Needs Attention Bar

2. Workflow Pipeline Widget

3. Quick Actions + Workflow Guide Widget

4. AI Operations Widget (NEW - from Django Admin Reports)

5. Recent Activity Widget

6. Content Velocity Widget (NEW)

7. Automation Status Widget

API Endpoint Required

Implementation Notes

6. Site Setup Checklist Implementation

Current Status

Missing Implementation

Recommended Fix

7. To-Do-s Completion Audit

Summary by Section

Remaining Items Detail

Dashboard (Section 1) - Major Work

Cross-Module

8. Notification System Plan

Current State

Comprehensive Notification System Design

A. Notification Data Model

B. Notification Creation Points

C. API Endpoints

D. Frontend Integration

NotificationDropdown Component Updates

Full Notifications Page

E. Implementation Priority

Implementation Roadmap

Priority Order

Estimated Effort

Appendix: Current vs Recommended Comparison

Table Action Row Metrics (Already Implemented)

Footer Metrics Example (Keywords Page)

Dashboard Example

46 KiB

Raw Blame History