changemaker.lite/mkdocs/docs/v2/frontend/components/index.md

Frontend Components

Reusable UI components provide common functionality across the Changemaker Lite admin interface. Components are organized by feature area and follow React best practices.

Component Organization

admin/src/components/
├── map/                    # Leaflet map components
├── canvass/                # GPS tracking and visit recording
├── media/                  # Video library components
├── email-templates/        # Email template editor components
├── observability/          # Monitoring components
├── AppLayout.tsx           # Admin sidebar layout
├── PublicLayout.tsx        # Public dark theme layout
├── VolunteerLayout.tsx     # Volunteer portal layout
├── MediaPublicLayout.tsx   # Public media gallery layout
└── GrapesJSEditor.tsx      # Landing page WYSIWYG editor

Layout Components

AppLayout

Admin sidebar layout with role-based navigation:

• Location: components/AppLayout.tsx
• Features:
  • Collapsible sidebar
  • Role-based menu items
  • User dropdown menu
  • Breadcrumb navigation
  • Responsive mobile drawer

PublicLayout

Dark theme layout for public pages:

• Location: components/PublicLayout.tsx
• Features:
  • Dark blue/teal color scheme
  • Header with logo and navigation
  • Footer with links
  • Responsive grid breakpoints

VolunteerLayout

Top navigation layout for volunteer portal:

• Location: components/VolunteerLayout.tsx
• Features:
  • Horizontal navigation bar
  • Mobile hamburger menu
  • User status display
  • Active route highlighting

MediaPublicLayout

Minimal layout for public media gallery:

• Location: components/MediaPublicLayout.tsx
• Features:
  • Clean header with branding
  • Full-width content area
  • Dark theme consistency

Map Components

MapControls

Floating control buttons for map interactions:

• Location: components/map/MapControls.tsx
• Features:
  • Add location mode toggle
  • Move location mode toggle
  • Geolocate current position
  • Fullscreen toggle
  • Auto-refresh toggle

AddLocationMode

Click-to-add location drawing mode:

• Location: components/map/AddLocationMode.tsx
• Features:
  • Click map to add location
  • Reverse geocoding
  • Form modal for details
  • Marker placement

MoveLocationMode

Click-to-move existing locations:

• Location: components/map/MoveLocationMode.tsx
• Features:
  • Drag markers to new position
  • Update coordinates
  • Cancel/confirm actions

CutDrawingMode

Polygon drawing tool for geographic cuts:

• Location: components/map/CutDrawingMode.tsx
• Features:
  • Click vertices to draw polygon
  • Close polygon detection
  • Vertex editing
  • Save/cancel actions

CutOverlays

GeoJSON polygon rendering:

• Location: components/map/CutOverlays.tsx
• Features:
  • Multi-polygon support
  • Color-coded cuts
  • Click to select
  • Popup information

CutOverlayControls

Cut visibility toggle panel:

• Location: components/map/CutOverlayControls.tsx
• Features:
  • Show/hide individual cuts
  • Bulk toggle all
  • Color legend

CutEditorMap

Specialized map for cut editing:

• Location: components/map/CutEditorMap.tsx
• Features:
  • Drawing mode integration
  • Vertex editing
  • Polygon validation
  • Save to database

MapLegend

Floating legend overlay:

• Location: components/map/MapLegend.tsx
• Features:
  • Color-coded markers
  • Cut legend
  • Collapsible panel

Canvass Components

CanvassHeader

Session header with timer and status:

• Location: components/canvass/CanvassHeader.tsx
• Features:
  • Session timer
  • Start/end session
  • Cut information
  • Visit counter

SessionTimer

Elapsed time display:

• Location: components/canvass/SessionTimer.tsx
• Features:
  • Real-time countdown
  • Hours:minutes:seconds format
  • Auto-update

CanvassMarker

Location marker with visit status:

• Location: components/canvass/CanvassMarker.tsx
• Features:
  • Color-coded by visit status
  • Click to record visit
  • Popup with details
  • Next location highlighting

CanvassMarkerGroup

Optimized marker clustering:

• Location: components/canvass/CanvassMarkerGroup.tsx
• Features:
  • Performance optimization
  • Batch rendering
  • Click handlers

WalkingRouteLine

Polyline for walking route:

• Location: components/canvass/WalkingRouteLine.tsx
• Features:
  • Blue dashed line
  • Location-to-location path
  • Auto-update on visit

GPSTracker

GPS position tracking:

• Location: components/canvass/GPSTracker.tsx
• Features:
  • Watch position API
  • Blue GPS marker
  • Accuracy circle
  • Auto-center map

CanvassBottomToolbar

Bottom sheet with actions:

• Location: components/canvass/CanvassBottomToolbar.tsx
• Features:
  • Expandable drawer
  • Quick actions
  • Visit recording
  • Session controls

VisitRecordingForm

Visit outcome form:

• Location: components/canvass/VisitRecordingForm.tsx
• Features:
  • Outcome selection
  • Notes input
  • GPS coordinates
  • Submit with validation

CanvassLegend

Map legend for canvass status:

• Location: components/canvass/CanvassLegend.tsx
• Features:
  • Status color codes
  • Visit outcome legend
  • Collapsible panel

Media Components

VideoCard

Video item display card:

• Location: components/media/VideoCard.tsx
• Features:
  • Thumbnail preview
  • Title and description
  • Action buttons
  • Selection checkbox

BulkActions

Batch operation toolbar:

• Location: components/media/BulkActions.tsx
• Features:
  • Select all toggle
  • Delete selected
  • Lock/unlock selected
  • Share selected

UploadVideoModal

Video upload interface:

• Location: components/media/UploadVideoModal.tsx
• Features:
  • Drag-and-drop upload
  • Progress tracking
  • Metadata form
  • Single/batch upload

MediaGalleryGrid

Responsive video grid:

• Location: components/media/MediaGalleryGrid.tsx
• Features:
  • Masonry layout
  • Lazy loading
  • Infinite scroll
  • Filter/sort

Email Template Components

TemplateEditor

Email template WYSIWYG editor:

• Location: components/email-templates/TemplateEditor.tsx
• Features:
  • Rich text editing
  • Variable insertion
  • Preview mode
  • HTML source view

VariableInserter

Template variable selector:

• Location: components/email-templates/VariableInserter.tsx
• Features:
  • Variable dropdown
  • Click to insert
  • Variable documentation
  • Preview rendering

Observability Components

MetricsChart

Prometheus metrics visualization:

• Location: components/observability/MetricsChart.tsx
• Features:
  • Time-series charts
  • Multiple metrics
  • Auto-refresh
  • Zoom controls

ServiceHealthCard

Service status display:

• Location: components/observability/ServiceHealthCard.tsx
• Features:
  • Health indicator
  • Uptime display
  • Quick actions
  • Error messages

Editor Components

GrapesJSEditor

Landing page WYSIWYG editor:

• Location: components/GrapesJSEditor.tsx
• Features:
  • GrapesJS integration
  • Custom block library
  • Ctrl+S save handler
  • Error boundary
  • Forward ref support
  • Desktop-only warning

Related Documentation

• Frontend Overview
• Layouts
• Pages
• Map Features
• Media Features