admin/changemaker.lite
1
0
Fork 0
Code Issues Packages Projects Releases 31 Wiki Activity
changemaker.lite/mkdocs/docs/v2/frontend/pages/index.md

5.7 KiB
Raw Blame History

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 (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 (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 (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:

// 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