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