205 lines
5.7 KiB
Markdown
205 lines
5.7 KiB
Markdown
# 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)
|