# 📸 Manual Screenshot Capture Guide

## 🎯 Goal
Capture real screenshots of all 11 Analytics & AI dashboards from the running application.

---

## 📋 Dashboards to Capture

| # | Dashboard | URL Parameter | How to Get There |
|---|-----------|---------------|------------------|
| 1 | Command Center | `?tab=dashboard` | Default view after login |
| 2 | Executive Summary | `?tab=executive-summary` | Sidebar → ANALYTICS & AI → Executive Summary |
| 3 | Anomaly Detection | `?tab=anomaly-detection` | Sidebar → ANALYTICS & AI → Anomaly Detection |
| 4 | Leak Detection | `?tab=leak-detection` | Sidebar → ANALYTICS & AI → Leak Detection |
| 5 | Pump Health | `?tab=pump-health` | Sidebar → ANALYTICS & AI → Pump Health |
| 6 | Water Quality | `?tab=water-quality` | Sidebar → ANALYTICS & AI → Water Quality |
| 7 | Demand Forecast | `?tab=demand-forecast` | Sidebar → ANALYTICS & AI → Demand Forecast |
| 8 | Root Cause | `?tab=root-cause` | Sidebar → ANALYTICS & AI → Root Cause |
| 9 | NRW Attribution | `?tab=nrw-attribution` | Sidebar → ANALYTICS & AI → NRW Attribution |
| 10 | Energy Optimization | `?tab=energy-optimization` | Sidebar → ANALYTICS & AI → Energy Optimization |
| 11 | Trends | `?tab=trends` | Sidebar → ANALYTICS & AI → Trend Charts |

---

## 🚀 Step-by-Step Instructions

### **Step 1: Open the Application**
1. Open your browser
2. Go to: `http://localhost:5173/ic3/`
3. You should see the IC³ Command Centre login screen

### **Step 2: Log In**
1. Enter username: `admin`
2. Enter password: `admin`
3. Click **SIGN IN**
4. Wait for the dashboard to load (should show Command Center)

### **Step 3: Capture Screenshots**

**For each dashboard below, follow these steps:**

#### **Dashboard 1: Command Center (Default)**
- You're already here after login
- Take screenshot: Press **PrintScreen** or use browser screenshot tool
- Save as: `dashboard.png`

#### **Dashboard 2: Executive Summary**
- Click sidebar: **ANALYTICS & AI** → **Executive Summary** 📊
- Wait 2 seconds for page to load
- Take screenshot
- Save as: `executive-summary.png`

#### **Dashboard 3: Anomaly Detection**
- Click: **ANALYTICS & AI** → **Anomaly Detection** 🔴
- Wait 2 seconds
- Take screenshot
- Save as: `anomaly-detection.png`

#### **Dashboard 4: Leak Detection**
- Click: **ANALYTICS & AI** → **Leak Detection** 💧
- Wait 2 seconds
- Take screenshot
- Save as: `leak-detection.png`

#### **Dashboard 5: Pump Health**
- Click: **ANALYTICS & AI** → **Pump Health** 🔧
- Wait 2 seconds
- Take screenshot
- Save as: `pump-health.png`

#### **Dashboard 6: Water Quality**
- Click: **ANALYTICS & AI** → **Water Quality** 🧪
- Wait 2 seconds
- Take screenshot
- Save as: `water-quality.png`

#### **Dashboard 7: Demand Forecast**
- Click: **ANALYTICS & AI** → **Demand Forecast** 📈
- Wait 2 seconds
- Take screenshot
- Save as: `demand-forecast.png`

#### **Dashboard 8: Root Cause**
- Click: **ANALYTICS & AI** → **Root Cause** 🔬
- Wait 2 seconds
- Take screenshot
- Save as: `root-cause.png`

#### **Dashboard 9: NRW Attribution**
- Click: **ANALYTICS & AI** → **NRW Attribution** 🎯
- Wait 2 seconds
- Take screenshot
- Save as: `nrw-attribution.png`

#### **Dashboard 10: Energy Optimization**
- Click: **ANALYTICS & AI** → **Energy Optimization** ⚡
- Wait 2 seconds
- Take screenshot
- Save as: `energy-optimization.png`

#### **Dashboard 11: Trends**
- Click: **ANALYTICS & AI** → **Trend Charts** 📊
- Wait 2 seconds
- Take screenshot
- Save as: `trends.png`

---

## 📸 How to Take Screenshots

### **Method 1: Using Browser DevTools (Recommended)**
1. Press **F12** to open Developer Tools
2. Press **Ctrl+Shift+P** to open Command Palette
3. Type: `screenshot`
4. Select: `Capture full page screenshot` or `Capture area screenshot`
5. File will be saved to Downloads folder
6. Move to `h:\ic3\screenshots\` folder

### **Method 2: Using PrintScreen**
1. Press **PrintScreen** key
2. Open Paint (or any image editor)
3. Press **Ctrl+V** to paste
4. Save as PNG file
5. Move to `h:\ic3\screenshots\` folder

### **Method 3: Using Windows Snipping Tool**
1. Press **Windows + Shift + S**
2. Select the area to capture
3. Image is copied to clipboard
4. Paste into Paint and save as PNG
5. Move to `h:\ic3\screenshots\` folder

---

## 📁 Save Location

**Save all screenshots to:** `h:\ic3\screenshots\`

**File naming:** Exactly as listed above (case-sensitive recommended):
- `dashboard.png`
- `executive-summary.png`
- `anomaly-detection.png`
- etc.

---

## ✅ Checklist

Print this checklist and track your progress:

```
☐ 1. Command Center - dashboard.png
☐ 2. Executive Summary - executive-summary.png
☐ 3. Anomaly Detection - anomaly-detection.png
☐ 4. Leak Detection - leak-detection.png
☐ 5. Pump Health - pump-health.png
☐ 6. Water Quality - water-quality.png
☐ 7. Demand Forecast - demand-forecast.png
☐ 8. Root Cause - root-cause.png
☐ 9. NRW Attribution - nrw-attribution.png
☐ 10. Energy Optimization - energy-optimization.png
☐ 11. Trends - trends.png
```

**Total:** 11 screenshots

---

## 🎯 Tips

- **Keep consistent:** Try to capture at the same window size (1920x1080 recommended)
- **Wait for data:** Give each page 2-3 seconds to fully load before capturing
- **Clean view:** Minimize browser UI for cleaner screenshots
- **Name correctly:** Use exact filenames - case matters!

---

## 📤 Next Steps

Once you have all 11 screenshots:

1. Place them in: `h:\ic3\screenshots\`
2. Let me know you're done
3. I'll automatically embed them in the HTML document
4. You'll have a complete guide with real authenticated screenshots!

---

**Estimated time:** ~15-20 minutes to capture all 11 dashboards

Good luck! 📸 Let me know when you have all the screenshots ready!