# Reports Page - Design vs Implementation Differences

## Overview
Comparing `public/webcrawlers-dashboard-assets/reports.php` (design) with `app/Views/dashboard/reports.php` (actual implementation).

---

## 1. Top Input & Action Bar

### Design Assets
```html
<div class="d-flex align-items-center flex-grow-1 gap-1 mb-2 mb-lg-0">
    <input type="text" class="dash-input max-w-380" placeholder="Enter a website URL...">
    <button class="dash-btn dash-btn--primary" data-bs-toggle="modal" data-bs-target="#createReportModal">
        + Create
    </button>
</div>
<div class="dash-note dash-mb">
    Website: https://influential.com
</div>
```

### Actual Implementation
```html
<div class="d-flex align-items-center flex-grow-1 gap-1 mb-2 mb-lg-0 flex-wrap">
    <select class="dash-select max-w-380" id="rptStartWebsite" title="Website to audit">
        <option value="">Select a website</option>
    </select>
    <div class="rpt-country" id="rptCountryWrap">
        <button type="button" class="dash-select rpt-country__btn" id="rptCountryBtn" ...>
            <span class="rpt-country__flag" id="rptCountryFlag">🌐</span>
            <span class="rpt-country__label">Any location</span>
        </button>
        <!-- Country dropdown menu -->
    </div>
    <select class="dash-select" id="rptMaxPages" style="max-width:140px">
        <option value="10">10 pages</option>
        <option value="50" selected>50 pages</option>
        ...
        <option value="10000">10000 pages</option>
    </select>
    <button type="button" class="dash-btn dash-btn--primary" id="rptStartBtn">
        <span>Start Audit</span>
    </button>
</div>

<!-- Right side: Website selector instead of note -->
<div class="d-flex align-items-center gap-2 mb-0">
    <label for="rptWebsiteSelect" class="dash-table__mut mb-0 text-nowrap">Website</label>
    <select class="dash-select" id="rptWebsiteSelect" style="min-width:220px;max-width:320px">
        <option value="">No websites yet</option>
    </select>
</div>
```

### Differences
| Aspect | Design | Implementation |
|--------|--------|-----------------|
| **Website input** | Text input "Enter a website URL..." | Dropdown select "Select a website" |
| **Primary action** | "+ Create" button (opens modal) | "Start Audit" button |
| **Location filter** | Not present | Country dropdown with flag emoji |
| **Pages filter** | Not present | Dropdown: 10-10000 pages (default 50) |
| **Right section** | Static note "Website: ..." | Dropdown to switch between audited websites |

---

## 2. Portfolio Summary Card

### Design Assets
```html
<div class="d-flex gap-2">
    <button class="dash-btn dash-btn--ghost dash-btn--sm">
        Refresh data
    </button>
    <button class="dash-btn dash-btn--ghost dash-btn--sm">
        Export
    </button>
</div>

<div class="text-center mb-5 mt-4">
    <div class="report-health-circle rounded-pill d-flex align-items-center justify-content-center text-32 fw-700 text-heading mb-3">
        92
    </div>
    <div class="dash-strong text-18">Portfolio Health Score</div>
</div>

<div class="dash-grid dash-grid--3 mt-4 pt-4 border-top">
    <div class="d-flex justify-content-between align-items-center">
        <?php echo dash_status('Trending Up', 'success'); ?>
        <span class="dash-table__mut">Total reports: 4</span>
    </div>
    <div class="d-flex justify-content-between align-items-center border-start ps-4">
        <?php echo dash_status('Stable', 'warning'); ?>
        <span class="dash-table__mut">Total reports: 1</span>
    </div>
    <div class="d-flex justify-content-between align-items-center border-start ps-4">
        <?php echo dash_status('Trending Down', 'danger'); ?>
        <span class="dash-table__mut">Total reports: 1</span>
    </div>
</div>
```

### Actual Implementation
```html
<div id="rptSummaryBody">
    <div class="mb-4">
        <div class="dash-table__mut text-13" id="rptLastUpdated">Last updated: —</div>
    </div>
    <div class="text-center mb-5 mt-4">
        <div class="text-32 fw-700 text-heading mb-3" id="rptPortfolioScore">—</div>
        <div class="dash-strong text-18">Portfolio Health Score</div>
        <div class="dash-table__mut mt-1" id="rptPortfolioSub">Based on 0 reports</div>
    </div>
    <div class="rpt-summary-stats dash-grid dash-grid--3 mt-4 pt-4 border-top">
        <div class="rpt-summary-stats__col">
            <?= dash_status('Finished', 'success') ?>
            <span class="dash-table__mut">Total reports: <span id="rptHistFinished">0</span></span>
        </div>
        <div class="rpt-summary-stats__col">
            <?= dash_status('Running', 'warning') ?>
            <span class="dash-table__mut">Total reports: <span id="rptHistRunning">0</span></span>
        </div>
        <div class="rpt-summary-stats__col">
            <?= dash_status('Failed', 'danger') ?>
            <span class="dash-table__mut">Total reports: <span id="rptHistFailed">0</span></span>
        </div>
    </div>
</div>
```

### Differences
| Aspect | Design | Implementation |
|--------|--------|-----------------|
| **Refresh/Export buttons** | Present at top of card | Removed (not implemented) |
| **Health score styling** | `report-health-circle` class (special styling) | Plain div with text-32 class |
| **Last updated** | Shown in design | Shows dynamically via JavaScript |
| **Status labels** | "Trending Up", "Stable", "Trending Down" | "Finished", "Running", "Failed" |
| **Collapsible** | Not collapsible in design | Collapsible (toggle button) |
| **Reports base text** | Not shown in design | "Based on X reports" subtitle |

---

## 3. Site Audit Progress - Progress Stats

### Design Assets
```html
<div class="col-lg-3 col-md-6">
    <div class="dash-card border h-100">
        <div class="dash-card__body">
            <div class="dash-table__mut mb-2">Pages Crawled</div>
            <h3 class="fw-bold">
                167
                <small class="text-muted fs-6">/250</small>
            </h3>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-6">
    <div class="dash-card border h-100">
        <div class="dash-card__body">
            <div class="dash-table__mut mb-2">Current Page</div>
            <strong>/blog/seo-guide</strong>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-6">
    <div class="dash-card border h-100">
        <div class="dash-card__body">
            <div class="dash-table__mut mb-2">Elapsed Time</div>
            <h4>02:31</h4>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-6">
    <div class="dash-card border h-100">
        <div class="dash-card__body">
            <div class="dash-table__mut mb-2">Estimated Left</div>
            <h4>01:18</h4>
        </div>
    </div>
</div>
```

### Actual Implementation
```html
<div class="col-lg-3 col-md-6">
    <div class="dash-card border h-100"><div class="dash-card__body">
        <div class="dash-table__mut mb-2">Pages Crawled</div>
        <h3 class="fw-bold"><span id="rptPagesCrawled">0</span>
            <small class="text-muted fs-6">/<span id="rptPagesMax">0</span></small></h3>
    </div></div>
</div>

<div class="col-lg-3 col-md-6">
    <div class="dash-card border h-100"><div class="dash-card__body">
        <div class="dash-table__mut mb-2">In Queue</div>
        <h4 id="rptPagesQueue">0</h4>
    </div></div>
</div>

<div class="col-lg-3 col-md-6">
    <div class="dash-card border h-100"><div class="dash-card__body">
        <div class="dash-table__mut mb-2">Started</div>
        <h4 class="text-14" id="rptStartedAt">—</h4>
    </div></div>
</div>

<div class="col-lg-3 col-md-6">
    <div class="dash-card border h-100"><div class="dash-card__body">
        <div class="dash-table__mut mb-2">Finished</div>
        <h4 class="text-14" id="rptFinishedAt">—</h4>
    </div></div>
</div>
```

### Differences
| Card 1 | Pages Crawled | Same (167/250 vs 0/0) |
|--------|---------------|-----|
| **Card 2** | "Current Page" → "/blog/seo-guide" | "In Queue" → Shows queue count |
| **Card 3** | "Elapsed Time" → "02:31" (duration) | "Started" → Timestamp (when audit started) |
| **Card 4** | "Estimated Left" → "01:18" (duration) | "Finished" → Timestamp (when audit finished) |

---

## 4. Status Badge Header

### Design Assets
```html
<div class="d-flex gap-2">
    <span class="dash-btn dash-btn--ghost"> Running </span>
    <button class="dash-btn dash-btn--primary">Re-run Audit</button>
</div>
```

### Actual Implementation
```html
<div class="d-flex gap-2 align-items-center">
    <span class="dash-badge bg-medium text-capitalize" id="rptStatusBadge">idle</span>
    <button type="button" class="dash-btn dash-btn--ghost d-none" id="rptStopBtn" title="Stop the running crawl">Stop</button>
    <button type="button" class="dash-btn dash-btn--primary" id="rptRerunBtn" disabled>Re-run Audit</button>
</div>
```

### Differences
| Aspect | Design | Implementation |
|--------|--------|-----------------|
| **Status display** | "Running" in ghost button | Status badge (idle/running/completed/etc) |
| **Stop button** | Not present | Present (hidden when not running) |
| **Button styling** | Ghost button for status | Badge element for status |

---

## Summary of Key Differences

### ✅ Same
- Title: "Report Builder"
- Subtitle text
- Portfolio Summary card structure
- Health score display
- Grid layout

### ❌ Different
1. **Top bar**: Input/Create button → Dropdown/Country/Pages/Start button
2. **Right sidebar**: Note → Website switcher dropdown
3. **Portfolio card**: Refresh/Export buttons → Collapsible toggle
4. **Health score**: Special styling → Plain div
5. **Status labels**: Trending/Stable/Down → Finished/Running/Failed
6. **Progress stats**: Current Page + Elapsed/Estimated → In Queue + Started/Finished
7. **Status badge**: Ghost button → Badge element with Stop button option

---

## Files Involved
- **Design Template**: `public/webcrawlers-dashboard-assets/reports.php`
- **App Implementation**: `app/Views/dashboard/reports.php`
- **App Controller**: `app/Controllers/DashboardModule.php` (find reports route)
- **JavaScript Logic**: `public/assets/js/reports.js`
- **Styling**: `public/assets/css/reports.css`