final polish phase 1
This commit is contained in:
IGNY8 VPS (Salman)
177
to-do-s/PLAN-DASHBOARD-HOMEPAGE.md
Normal file
177
to-do-s/PLAN-DASHBOARD-HOMEPAGE.md
Normal file
@@ -0,0 +1,177 @@
|
||||
|
||||
## 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
|
||||
Reference in New Issue
Block a user