igny8/HOMEPAGE_RESTRUCTURE_PLAN.md

Homepage Restructure Plan

Current State Analysis

Current Homepage Structure (in order):

1. PageHeader - Title, last updated, refresh button
2. WorkflowGuide - Welcome screen with site addition form (conditional)
3. Hero Section - Large banner with title, description, and 2 action buttons
4. Your Content Creation Workflow - 4-step workflow cards
5. Key Metrics - 4 metric cards (Keywords, Content, Images, Completion)
6. Platform Modules - 4 module cards (Planner, Writer, Thinker, Automation)
7. Activity Chart & Recent Activity - Chart and activity list
8. How It Works - 7-step detailed workflow pipeline
9. Quick Actions - 4 action cards (Add Keywords, Create Content, Setup Automation, Manage Prompts)
10. Credit Balance & Usage - Widgets at bottom

Identified Issues:

1. Duplicates & Redundancies:

• Hero Section vs WorkflowGuide: Both serve as welcome/intro sections
• "Your Content Creation Workflow" (4 steps) vs "How It Works" (7 steps): Duplicate workflow explanations
• Quick Actions duplicates workflow steps and module navigation
• Platform Modules duplicates sidebar navigation
• Activity Chart shows dummy data (hardcoded)

2. Site Management Issues:

• Site addition only in WorkflowGuide (hidden when dismissed)
• No clear trigger for multi-site users to add sites
• Site selector not present on homepage (but should be for multi-site users)
• Sector selector not needed on homepage (as per user requirement)

3. Layout Issues:

• Hero banner is too large and has action buttons (should be simpler, at top)
• Banner appears after welcome screen (should be at top)
• Too much content, overwhelming for new users

---

Proposed Restructure Plan

New Homepage Structure:

1. PageHeader (with conditional Site Selector for multi-site users)
   └─ Site Selector: "All Sites" | "Site Name" dropdown (only if user has 2+ sites)
   
2. Simplified Banner (moved to top, minimal content, no buttons)
   └─ Title: "AI-Powered Content Creation Workflow"
   └─ Subtitle: Brief description
   └─ No action buttons (removed)
   
3. Welcome Screen / Site Addition (conditional)
   └─ Show WorkflowGuide if:
      - No sites exist, OR
      - User manually triggers "Add Site" button
   └─ For multi-site users: Show compact "Add Site" button/trigger
   
4. Key Metrics (4 cards)
   └─ Data filtered by selected site or "All Sites"
   
5. Your Content Creation Workflow (4 steps - keep this one)
   └─ Remove "How It Works" (7 steps) - redundant
   
6. Platform Modules (keep but make more compact)
   └─ Or consider removing if sidebar navigation is sufficient
   
7. Activity Overview (chart + recent activity)
   └─ Use real data, not dummy data
   
8. Quick Actions (simplified - remove duplicates)
   └─ Keep only unique actions not covered elsewhere
   
9. Credit Balance & Usage (keep at bottom)

---

Detailed Changes

1. PageHeader Enhancement

Location: Top of page, after PageMeta

Changes:

• Add conditional Site Selector dropdown (right side of header)
• Only show if user has 2+ active sites
• Options: "All Sites" | Individual site names
• When "All Sites" selected: Show aggregated data
• When specific site selected: Show filtered data for that site
• Hide sector selector on homepage (as per requirement)

Implementation:

<PageHeader>
  <div className="flex items-center justify-between">
    <div>
      <h1>Dashboard</h1>
      <p>Last updated: {time}</p>
    </div>
    <div className="flex items-center gap-4">
      {sites.length > 1 && (
        <SiteSelector 
          value={selectedSiteFilter} 
          onChange={handleSiteFilterChange}
          options={[
            { value: 'all', label: 'All Sites' },
            ...sites.map(s => ({ value: s.id, label: s.name }))
          ]}
        />
      )}
      <RefreshButton />
    </div>
  </div>
</PageHeader>

---

2. Simplified Banner (Move to Top)

Location: Immediately after PageHeader

Changes:

• Move from current position (after WorkflowGuide) to top
• Remove action buttons ("Get Started", "Configure Automation")
• Reduce padding and content
• Keep gradient background and title
• Make it more compact (p-6 instead of p-8 md:p-12)

New Structure:

<div className="bg-gradient-to-r from-brand-500 to-purple-600 rounded-2xl p-6 text-white">
  <h1 className="text-3xl md:text-4xl font-bold mb-2">
    AI-Powered Content Creation Workflow
  </h1>
  <p className="text-lg text-white/90">
    Transform keywords into published content with intelligent automation.
  </p>
</div>

---

3. Welcome Screen / Site Addition Strategy

For Users with NO Sites:

• Always show WorkflowGuide (welcome screen with site addition form)
• Cannot be dismissed until at least one site is created

For Users with 1 Site:

• Hide WorkflowGuide by default (can be manually shown via button)
• Show compact "Add Another Site" button/trigger in header or quick actions
• When clicked, opens WorkflowGuide or modal with site addition form
• Dashboard shows data for the single site (no site selector needed)

For Users with 2+ Sites:

• Hide WorkflowGuide by default
• Show site selector in PageHeader (see #1)
• Add "Add Site" button in header or as a card in Quick Actions
• When clicked, opens WorkflowGuide or modal with site addition form
• Dashboard shows data based on selected site filter

Implementation:

// In PageHeader or Quick Actions
{sites.length > 0 && (
  <Button 
    onClick={() => setShowAddSite(true)}
    variant="outline"
    size="sm"
  >
    <PlusIcon /> Add Site
  </Button>
)}

// Conditional WorkflowGuide
{(!hasSites || showAddSite) && (
  <WorkflowGuide 
    onSiteAdded={() => {
      setShowAddSite(false);
      refreshDashboard();
    }}
  />
)}

---

4. Remove Duplicates

Remove "How It Works" Section (7 steps)

• Reason: Duplicates "Your Content Creation Workflow" (4 steps)
• Keep: "Your Content Creation Workflow" (simpler, cleaner)

Simplify Quick Actions

• Remove: "Add Keywords" (covered in workflow)
• Remove: "Create Content" (covered in workflow)
• Keep: "Setup Automation" (unique)
• Keep: "Manage Prompts" (unique)
• Add: "Add Site" (for multi-site users)

Consider Removing Platform Modules

• Option A: Remove entirely (sidebar navigation is sufficient)
• Option B: Keep but make more compact (2x2 grid instead of 4 columns)
• Recommendation: Remove to reduce clutter

---

5. Data Filtering Logic

Single Site User:

• Always show data for that one site
• No site selector
• site_id = activeSite.id in all API calls

Multi-Site User:

• Show site selector in header
• Default: "All Sites" (aggregated data)
• When specific site selected: Filter by site_id
• Update all metrics, charts, and activity when filter changes

Implementation:

const [siteFilter, setSiteFilter] = useState<'all' | number>('all');

const fetchAppInsights = async () => {
  const siteId = siteFilter === 'all' ? undefined : siteFilter;
  
  const [keywordsRes, clustersRes, ...] = await Promise.all([
    fetchKeywords({ page_size: 1, site_id: siteId }),
    fetchClusters({ page_size: 1, site_id: siteId }),
    // ... other calls
  ]);
  
  // Update insights state
};

---

6. Activity Chart - Use Real Data

Current: Hardcoded dummy data Change: Fetch real activity data from API

Implementation:

• Create API endpoint for activity timeline
• Or aggregate from existing endpoints (content created dates, etc.)
• Show actual trends over past 7 days

---

Final Proposed Structure

┌─────────────────────────────────────────┐
│ PageHeader                              │
│ - Title: Dashboard                      │
│ - Site Selector (if 2+ sites)           │
│ - Refresh Button                        │
└─────────────────────────────────────────┘
         ↓
┌─────────────────────────────────────────┐
│ Simplified Banner (compact, no buttons) │
│ - Title + Subtitle only                 │
└─────────────────────────────────────────┘
         ↓
┌─────────────────────────────────────────┐
│ WorkflowGuide (conditional)             │
│ - Show if: no sites OR manually opened  │
│ - Contains site addition form           │
└─────────────────────────────────────────┘
         ↓
┌─────────────────────────────────────────┐
│ Key Metrics (4 cards)                   │
│ - Filtered by site selection            │
└─────────────────────────────────────────┘
         ↓
┌─────────────────────────────────────────┐
│ Your Content Creation Workflow (4 steps)│
│ - Keep this, remove "How It Works"      │
└─────────────────────────────────────────┘
         ↓
┌─────────────────────────────────────────┐
│ Activity Overview                       │
│ - Chart (real data) + Recent Activity   │
└─────────────────────────────────────────┘
         ↓
┌─────────────────────────────────────────┐
│ Quick Actions (2-3 unique actions)      │
│ - Setup Automation                      │
│ - Manage Prompts                        │
│ - Add Site (if multi-site user)         │
└─────────────────────────────────────────┘
         ↓
┌─────────────────────────────────────────┐
│ Credit Balance & Usage                  │
└─────────────────────────────────────────┘

---

Implementation Priority

Phase 1: Core Restructure

1. ✅ Move banner to top, simplify it
2. ✅ Add site selector to PageHeader (conditional)
3. ✅ Implement data filtering logic
4. ✅ Update WorkflowGuide visibility logic

Phase 2: Remove Duplicates

5. ✅ Remove "How It Works" section
6. ✅ Simplify Quick Actions
7. ✅ Consider removing Platform Modules

Phase 3: Enhancements

8. ✅ Add "Add Site" trigger for existing users
9. ✅ Replace dummy activity data with real data
10. ✅ Test single vs multi-site scenarios

---

Benefits

1. Cleaner UI: Removed redundant sections
2. Better UX: Clear site management for multi-site users
3. Focused Content: Less overwhelming for new users
4. Proper Data: Real activity data, filtered by site
5. Flexible: Works for both single and multi-site users
6. Accessible: Easy to add sites from homepage when needed

---

Questions to Consider

1. Should Platform Modules be removed entirely or kept compact?
2. Should "Add Site" be a button in header or a card in Quick Actions?
3. Should WorkflowGuide be a modal or inline component when triggered?
4. Do we need a separate "All Sites" view or just individual site filtering?