# Frontend Pages

Page components provide the main user interface screens for Changemaker Lite. Pages are organized into three categories based on user access and context.

## Page Categories

### [Admin Pages](admin/index.md) (30 pages)

Authenticated admin interface for campaign management, location management, settings, and system administration. Requires admin role (SUPER_ADMIN, INFLUENCE_ADMIN, or MAP_ADMIN).

**Route Prefix:** `/app/*`

**Layout:** AppLayout (sidebar navigation)

**Key Pages:**
- Dashboard
- User management
- Campaign management
- Location and mapping
- Settings and configuration
- Media library
- Service integrations

### [Public Pages](public/index.md) (8 pages)

Public-facing pages accessible without authentication. Used by campaign supporters and volunteers to view campaigns, sign up for shifts, and interact with content.

**Route Prefix:** Various (`/campaigns`, `/map`, `/shifts`, `/p/:slug`, `/media`)

**Layout:** PublicLayout (dark theme)

**Key Pages:**
- Campaign listing and details
- Response wall
- Public map view
- Shift signup
- Landing pages
- Media gallery

### [Volunteer Pages](volunteer/index.md) (4 pages)

Volunteer portal for canvassing activities. Requires authentication (any role) and provides tools for door-to-door canvassing, GPS tracking, and activity tracking.

**Route Prefix:** `/volunteer/*`

**Layout:** VolunteerLayout (top navigation)

**Key Pages:**
- Volunteer dashboard
- Shift assignments
- Full-screen canvass map
- Activity history
- Route history

## Page Overview by Feature

### Authentication

- **LoginPage** - User login with JWT authentication

### Dashboard & Analytics

- **DashboardPage** - Admin overview with stats and recent activity
- **CanvassDashboardPage** - Canvass monitoring and leaderboard
- **DataQualityDashboardPage** - Geocoding quality metrics
- **ObservabilityPage** - Prometheus/Grafana monitoring

### Campaign Management

- **CampaignsPage** - Campaign CRUD table
- **CampaignPage** (Public) - Campaign detail with email form
- **CampaignsListPage** (Public) - Featured campaign listing
- **ResponsesPage** - Response moderation
- **ResponseWallPage** (Public) - Public response submissions
- **RepresentativesPage** - Representative cache management
- **EmailQueuePage** - Email queue monitoring

### Location & Mapping

- **LocationsPage** - Location CRUD, CSV import/export, geocoding
- **MapPage** (Public) - Public Leaflet map with locations and cuts
- **CutsPage** - Geographic cut management with polygon drawing
- **MapSettingsPage** - Map configuration
- **ShiftsPage** - Volunteer shift management
- **ShiftsPage** (Public) - Public shift signup

### Canvassing

- **VolunteerMapPage** - Full-screen GPS canvass map
- **VolunteerShiftsPage** - Assigned shifts for volunteers
- **MyActivityPage** - Visit history and outcomes
- **MyRoutesPage** - Walking route history
- **WalkSheetPage** - Printable walk sheet with QR codes
- **CutExportPage** - Printable location report

### Content Management

- **LandingPagesPage** - Landing page CRUD
- **PageEditorPage** - GrapesJS WYSIWYG editor
- **LandingPage** (Public) - Rendered landing page
- **EmailTemplatesPage** - Email template CRUD
- **EmailTemplateEditorPage** - Email template editor

### Media Management

- **LibraryPage** - Video library management
- **SharedMediaPage** - Public gallery administration
- **MediaJobsPage** - Job queue monitoring
- **MediaGalleryPage** (Public) - Public video gallery
- **MediaViewerPage** (Public) - Video detail page

### System & Settings

- **UsersPage** - User CRUD with role management
- **SettingsPage** - Global site settings

### Service Integrations

- **ListmonkPage** - Newsletter sync management
- **PangolinPage** - Tunnel setup wizard
- **DocsPage** - MkDocs export management
- **MkDocsSettingsPage** - Documentation configuration
- **MiniQRPage** - QR code service iframe
- **MailHogPage** - Email capture UI
- **CodeEditorPage** - Code Server management
- **N8nPage** - Workflow automation
- **GiteaPage** - Git repository hosting
- **NocoDBPage** - Data browser management

## Page Count Summary

| Category | Count | Description |
|----------|-------|-------------|
| **Admin** | 30 | Admin interface pages |
| **Public** | 8 | Public-facing pages |
| **Volunteer** | 4 | Volunteer portal pages |
| **Total** | 42 | All page components |

## Common Page Patterns

### Data Tables

Most CRUD pages use Ant Design Table with:

- Pagination (server-side)
- Search and filtering
- Sorting
- Action buttons (edit, delete)
- Bulk operations
- Export options

### Forms

Form pages use Ant Design Form with:

- Zod schema validation
- Error display
- Submit handlers
- Cancel/reset actions
- Auto-save (where applicable)

### Maps

Map pages use React Leaflet with:

- Tile layers (OpenStreetMap)
- Markers and overlays
- Drawing tools
- Geolocate controls
- Fullscreen mode

### Mobile Responsiveness

Pages use responsive design patterns:

- Grid breakpoints with `Grid.useBreakpoint()`
- Mobile-specific layouts
- Touch-friendly controls
- Responsive tables
- Desktop-only warnings (for editors)

## Route Protection

Pages are protected based on authentication and role:

```typescript
// Public routes - no auth required
<Route path="/campaigns" element={<CampaignsListPage />} />

// Authenticated routes - any role
<Route path="/volunteer/assignments" element={<VolunteerShiftsPage />} />

// Admin routes - specific roles
<Route path="/app/campaigns" element={<CampaignsPage />} />
// Middleware: requireRole(SUPER_ADMIN, INFLUENCE_ADMIN)
```

## Related Documentation

- [Frontend Overview](../index.md)
- [Layouts](../layouts/index.md)
- [Components](../components/index.md)
- [Backend Modules](../../backend/modules/index.md)
- [User Guides](../../user-guides/index.md)