# 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)