368 lines
7.5 KiB
Markdown
368 lines
7.5 KiB
Markdown
# 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](../index.md)
|
|
- [Layouts](../layouts/index.md)
|
|
- [Pages](../pages/index.md)
|
|
- [Map Features](../../features/map/index.md)
|
|
- [Media Features](../../features/media/index.md)
|