Comprehensive Screenshot Capture Plan¶

Overview¶

This document outlines the complete screenshot capture plan for documentation and QA purposes. Screenshots are captured at three viewport sizes: Desktop (1920x1080), Tablet (768x1024), Mobile (375x667).

Pages to Capture¶

Public Pages (No Auth)¶

Page	Path	Notes
Login	`/login`	Main login form
Privacy Policy	`/privacy`	Legal page
Terms of Service	`/tos`	Legal page

Page	Path	Notes
Dashboard	`/dashboard`	Main landing after login

Audience Management¶

Page	Path	Notes
Audience List	`/audience`	Contact list with filters
Audience Detail	`/audience/{id}`	Single person view
Audience New	`/audience/new`	Create person form
Audience Edit	`/audience/{id}/edit`	Edit person form

Events¶

Page	Path	Notes
Events List	`/events`	Event calendar/list
Event Detail	`/events/{id}`	Single event view
Event New	`/events/new`	Create event form
Event Edit	`/events/{id}/edit`	Edit event form

i360 Voter Data¶

Page	Path	Notes
i360 Search	`/i360`	Voter search interface
i360 Voter Detail	`/i360/voter/{svid}`	Single voter view

Segments¶

Page	Path	Notes
Segments List	`/segments`	Segment management

Surveys (YASP)¶

Page	Path	Notes
Surveys List	`/surveys`	Survey management (admin only)

Work Queue¶

Page	Path	Notes
Work Queue (No Assignment)	`/work-queue`	Assignment selection
Work Queue (Active)	`/work-queue?assignment_id={id}`	Contact interface

Maps¶

Page	Path	Notes
Maps	`/maps`	Canvassing map view

Tags¶

Page	Path	Notes
Tags	`/tags`	Tag management

Chat¶

Page	Path	Notes
Chat	`/chat`	AI chat interface

Users (Admin)¶

Page	Path	Notes
Users List	`/users`	User management
User Detail	`/users/{id}`	Single user view
User New	`/users/new`	Create user form
User Edit	`/users/{id}/edit`	Edit user form

Settings (Admin)¶

Page	Path	Notes
Settings	`/settings`	System settings

Other Pages¶

Page	Path	Notes
Communications	`/communications`	Communication logs
Goals	`/goals`	Campaign goals
Reports	`/reports`	Analytics reports
Imports	`/imports`	Import/export data
List Loader	`/list-loader`	CSV import wizard
Style Guide	`/style-guide`	UI components

Modals to Capture¶

Segments Page Modals¶

Modal	Trigger	Notes
Create Segment	Click "Create Segment" button	New segment form
Edit Segment	Click "Edit" on segment card	Edit form with user picker, survey picker
View Segment	Click segment card	Segment details

Surveys Page Modals¶

Modal	Trigger	Notes
Create Survey	Click "Create Survey" button	New survey form
Edit Survey	Click "Edit" on survey card	Edit with questions
Add Question	Click "Add Question" in edit modal	Question type picker

Tags Page Modals¶

Modal	Trigger	Notes
Create Tag	Click "Create Tag" button	New tag form
Edit Tag	Click "Edit" on tag	Edit tag form

Events Page Modals¶

Modal	Trigger	Notes
Event Actions	Click event dropdown	Delete confirmation

Users Page Modals¶

Modal	Trigger	Notes
Create User	Click "Add User" button	New user form
Password Reset	Click "Reset Password"	Password form

Audience Detail Modals¶

Modal	Trigger	Notes
Delete Confirmation	Click "Delete"	Confirm delete
Communication Modal	Click "Add Communication"	Log communication

Settings Modals¶

Modal	Trigger	Notes
Create Parent Tag	Click "Create Parent Tag"	Tag form
Create Child Tag	Click "Create Child Tag"	Tag form

Maps Page Modals¶

Modal	Trigger	Notes
Save Map	Click "Save Map"	Map save form
Load Map	Click saved map	Map load options

Screenshot Naming Convention¶

{viewport}/{page_name}.png           - Base page
{viewport}/{page_name}_modal_{modal_name}.png  - With modal open

Examples: - desktop/segments.png - desktop/segments_modal_create.png - mobile/work_queue.png - tablet/events_detail.png

Implementation Strategy¶

Login once and maintain session across all captures
Capture base pages first at all viewports
Then capture modals by triggering button clicks
Handle dynamic content by waiting for data loads
Skip pages gracefully if data doesn't exist (e.g., no events)

Output Directory¶

docs/screenshots/
├── desktop/
│   ├── login.png
│   ├── dashboard.png
│   ├── segments.png
│   ├── segments_modal_create.png
│   └── ...
├── tablet/
│   └── ...
└── mobile/
    └── ...