Tonne of debugging - getting ready for the production builds

2026-02-16 10:44:18 -07:00
parent a77306fac2
commit 7895ce683e
1367 changed files with 404191 additions and 2005 deletions
--- a/mkdocs/docs/v2/frontend/components/index.md
+++ b/mkdocs/docs/v2/frontend/components/index.md
@@ -0,0 +1,367 @@
+# 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)