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