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**:
```tsx
<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**:
```tsx
<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**:
```tsx
// 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**:
```tsx
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?