happy-platform

As a frontend developer, implement the `LandingHero` section using React Three Fiber (`Canvas`, `useFrame`, `useThree`) with 18 procedurally defined buildings from `BUILDING_DATA`. Each `Building` mesh uses `boxGeometry`, `meshStandardMaterial` with hover color swap between `COLORS.building` and `COLORS.buildingLight`, and scale lerp animation in `useFrame`. Window geometry is generated via `useMemo` using `BufferGeometry` with `Float32BufferAttribute`. Window opacity flickers using a sine-based formula on `state.clock.elapsedTime`. Integrate Framer Motion `useScroll`/`useTransform` for parallax on scroll. Manage `hovered` state per building via `useState`. THREE.Color constants defined for building, window (#F4A261), accent, and ground.

As a frontend developer, implement the `LandingCityscape` section using React Three Fiber with `OrbitControls`, `Html`, `Environment`, and `Float` from `@react-three/drei`. Render 12 buildings from `BUILDINGS_DATA` with per-building AQI/PM2.5/temp/noise/CO2/humidity metadata. Each building status ('good', 'moderate', 'poor') maps to a THREE.Color via `getStatusColor`. Use `AnimatePresence` for a detail panel overlay that appears on building click, showing all environmental metrics. Support metric tab switching between AQI, PM2.5, Temp, Noise, CO2, Humidity. Manage `selectedBuilding` state and interactive 3D hover with `useFrame`. Use `useMemo` and `useCallback` for performance. CSS: `LandingCityscape.css`.

As a frontend developer, implement the `LandingEnvironmentalMetrics` section displaying 6 metric cards (PM2.5, CO₂, NOx, Temperature, Humidity, Wind Speed) from `metricsData` with Lucide icons (Wind, Thermometer, Droplets, Gauge, CloudRain, Activity). Build an `AnimatedCounter` component using Framer Motion `useMotionValue`, `useTransform`, and `animate` that counts up from 0 to target value when `inView` (via `useInView`). Implement an `AqiGauge` SVG component with animated `strokeDashoffset` progress arc using conditional color logic (green ≤50, yellow ≤100, red >100). Each metric card shows status badge with `statusType` class and `colorClass`. Use `useRef` and `useInView` for scroll-triggered entrance animations.

As a frontend developer, implement the `LandingFeatures` section with 4 flip-card feature tiles (Real-time Monitoring, AI-Powered Analytics, Satellite Analytics, Alerts) from the `features` array. Each card has a front face (icon, title, desc, stats pair) and a back face (backLabel, backTitle, backDesc, backFeatures checklist with `checkColor`). Use Framer Motion `AnimatePresence` for flip transitions. Manage `flippedId` state via `useState` with `RotateCcw` reset button. Lucide icons: Activity, BrainCircuit, Satellite, BellRing, ArrowRight, Check, Shield, Zap, Globe, Database. Back face CTA links route to `/Sensors`, `/Analytics`, `/GISMap`. Each card has a unique `iconClass` for per-feature color theming.

As a frontend developer, implement the `LandingTrustBadges` section displaying 5 trust badge cards (Real-time Monitoring, AI-Powered Analytics, Smart City Integration, Secure & Reliable, Sustainable Future) using Framer Motion. Each badge contains an inline SVG with `motion.circle`, `motion.path`, `motion.rect`, `motion.polyline` elements animated via `pathDrawVariants` (pathLength 0→1, opacity 0→1 over 0.8s). Use `containerVariants` with `staggerChildren: 0.2` and `delayChildren: 0.15`. Each badge card uses `badgeVariants` (opacity, y, scale entrance). Trigger animations with `whileInView` and `viewport once`.

As a frontend developer, implement the `LandingUserJourneys` section with 4 persona cards (Admin, City Planner, Researcher, Public User) from `personas` array. Each card uses `cardVariants` with custom `i * 0.12` delay stagger. Manage `expandedId` state to toggle action lists per card via `AnimatePresence`. The `actionListVariants` expand/collapse with height animation and `staggerChildren: 0.08` for individual action items. Include carousel navigation with `ChevronLeft`/`ChevronRight` buttons and `useRef` for mobile swipe support. Use Lucide icons: Shield, Map, FlaskConical, Users, ChevronDown. Trigger entrance with `useInView`. Each card has a unique CSS className (e.g., `uj-card--admin`, `uj-card--planner`).

As a frontend developer, implement the `LandingPredictiveAnalytics` section with two primary visualizations. First: an SVG line chart using `buildChartPath` which generates cubic bezier curves (`C` path commands) from 7 `forecastData` AQI readings (00:00–24:00), producing both a `linePath` and `fillPath` for gradient fill. Second: a 12×10 CSS grid heatmap using `generateHeatmapData` with intensity values colored via `getHeatColor` (green/yellow/orange/red rgba). Include a `ConfidenceRing` component rendering SVG circles with `strokeDashoffset` progress rings for 3 metrics. Use `useMemo` for path/heatmap computation and `useInView` for scroll-triggered reveal. Manage `activeTab` state to switch between chart and heatmap views.

As a frontend developer, implement the `LandingDataViz` section with Canvas-based visualizations using two drawing helpers: `drawHeatmapCanvas` (radial gradient hotspots on a dark grid background with sensor dot overlays) and `drawTrafficCanvas` (road network polylines with congestion color coding). Use `useRef` for canvas elements and `useEffect`/`useCallback` for DPR-aware canvas sizing (`window.devicePixelRatio`). Display 10 metric cards with Lucide icons (Flame, Car, Thermometer, Satellite, Volume2, CloudSun, Droplets, Wind, Gauge, Sun) and animated values. Use Framer Motion for card entrance. Manage `activeViz` tab state to toggle between heatmap and traffic canvas views. Handle canvas resize on window resize event.

As a frontend developer, implement the `LandingCTA` section with a magnetic button effect using Framer Motion `useMotionValue`, `useSpring` (stiffness: 300, damping: 10, mass: 0.5), and `useTransform`. Track cursor proximity in `handleMouseMove` via `getBoundingClientRect` — apply a pull force (max 12px) when within 200px of button center. On button click, `generateParticles(16)` spawns particles with random angle/distance/color (#E76F51 or #F4A261)/size, rendered via `AnimatePresence` with burst key reset. Animate headline, subtext, actions, and trust copy via `headlineVariants`, `subtextVariants`, `actionsVariants`, `trustVariants` with sequential delays (0, 0.2, 0.4, 0.7s). Include decorative parallax background layer (`cta-deco-bg`) driven by mouse position. Use `useCallback` for event handlers.

As a frontend developer, implement the `Footer` section with 4 `LinkColumn` components (Product, Company, Resources, Legal) each using `staggerContainer` variants with `delayChildren: 0.3` and `staggerChildren: 0.08`, and `linkVariant` (opacity, x slide-in) triggered by `whileInView`. Product links: Dashboard, GIS Map, Analytics, Sensors, Reports. Company links: PublicDashboard, HealthAdvisory, HistoricalData, Alerts. Resources: UserManagement, Security, Profile. Legal: Privacy Policy, Terms, Cookie Policy, Compliance. Render 3 social icons (Twitter, LinkedIn, GitHub) as inline SVG paths with `socialIconVariant` (scale, opacity) staggered via `socialStagger` (delayChildren: 0.8). Use `useInView` for scroll trigger. Note: this component may already exist from a previous page — reuse if available.

As a frontend developer, implement the LoginBackground section for the Login page. This section renders a full-screen animated HTML5 canvas background using React refs (canvasRef, animFrameRef) and useEffect for lifecycle management. Key implementation details: (1) Canvas setup with devicePixelRatio (dpr) scaling and ResizeObserver for responsive resizing. (2) 72 particles with properties: position (x, y), velocity (vx, vy), radius (r), alpha, color (#F4A261 orange, #2B4A70 navy, #4ade80 green), pulse phase and pulseSpeed for sine-wave pulsing. (3) Connection lines drawn between particles within CONNECTION_DIST=110px using rgba(43, 74, 112, opacity) strokes at 0.8px lineWidth. (4) Per-particle radial gradient glow effect using createRadialGradient with hex-to-rgb color parsing. (5) requestAnimationFrame loop with tick counter. (6) CSS positions canvas as fixed full-viewport background layer behind login card. Note: this is a canvas-only section, no shared components with other pages.

As a frontend developer, implement the HealthAdvisoryHero section for the HealthAdvisory page. This section renders a full-screen 3D WebGL heatmap using @react-three/fiber and THREE.js. It defines a HeatmapMesh component that builds a 28×18 grid of vertices (GRID_COLS=28, GRID_ROWS=18) with per-vertex colors computed by computeHeatColor() based on influence from 6 POLLUTION_ZONES. The geometry is a custom bufferGeometry with bufferAttribute for position, color, and index. useFrame animates rotation.y via a sine wave (timeRef, Math.sin(timeRef.current * 0.3) * 0.08). The mesh is wrapped in a Canvas from @react-three/fiber. Overlay text, AQI badges, and status indicators are rendered in HTML above the Canvas. Implements useRef, useEffect, and useMemo hooks. This is a root section for HealthAdvisory — include page-level dependency on fc9b0c6e-21f2-453d-ae5d-7eb6746b6100 (Navbar for Landing) as this is the first section of a new page.

Build role-based access control middleware for FastAPI. Define roles: Government Admin (full), Environmental Agency (monitoring & reports), Researcher (analytics), Public User (public dashboards), Smart City Planner (GIS & planning). Implement permission decorators/dependencies (require_role, require_permission). Store roles and permissions in MySQL/MariaDB. Provide endpoints: GET /roles, POST /roles, PUT /roles/{id}, DELETE /roles/{id}, GET /users/{id}/permissions, PUT /users/{id}/roles. Supports UserManagement and Security pages.

Implement FastAPI endpoints for IoT sensor data: POST /sensors/ingest (bulk ingest via MQTT bridge), GET /sensors (list all sensors with status), GET /sensors/{id}/readings (time-series), GET /sensors/realtime (WebSocket endpoint for live data streaming), GET /sensors/stats. Support sensor types: air quality (PM2.5, PM10, CO2, NO2, SO2, ozone), noise, traffic, temperature. Use TimescaleDB/MariaDB time-series table. Integrate MQTT subscriber via paho-mqtt. Supports Sensors and Dashboard pages.

Implement FastAPI user profile endpoints: GET /profile (current user profile), PUT /profile (update name/email/preferences), PUT /profile/password (change password), PUT /profile/mfa (enable/disable MFA), GET /profile/notification-settings, PUT /profile/notification-settings (alert preferences, quiet hours, digest mode), GET /profile/activity-log. Supports Profile page. Depends on auth middleware for current user context.

Configure FastAPI application-level settings: CORS middleware allowing React frontend origin, rate limiting via slowapi (100 req/min for public endpoints, 1000 req/min for authenticated), request logging middleware, global exception handlers with structured error responses, API versioning prefix (/api/v1), OpenAPI/Swagger docs at /docs. Configure Nginx as reverse proxy routing /api/* to FastAPI backend and /* to React static build. Set up environment variables via python-dotenv for DB_URL, JWT_SECRET, REDIS_URL, MQTT_BROKER, WEATHER_API_KEY, TWILIO credentials, SENDGRID_API_KEY.

Deploy and configure Eclipse Mosquitto MQTT broker as a Docker service for IoT sensor data ingestion. Implement FastAPI MQTT subscriber using paho-mqtt that listens to topics: sensors/air-quality/+, sensors/noise/+, sensors/traffic/+, sensors/temperature/+. Each message is validated, parsed, and written to the time-series database. Configure MQTT authentication (username/password per sensor device) and TLS encryption. Add Docker service definition to docker-compose. Supports real-time sensor data flow for Sensors, Dashboard pages.

As a frontend developer, implement the LoginContainer section for the Login page. This section renders the main login card UI with an embedded Three.js scene and full form logic. Key implementation details: (1) Three.js components via @react-three/fiber: ParticleField (60 Float32Array points, useFrame rotation on y-axis and sine x-axis, pointsMaterial size=0.04, color #F4A261, opacity 0.55) and GridLines (nested group with 9 horizontal + 9 vertical plane meshes at #1d3557, slow z-rotation via useFrame). Canvas wrapped in lc-canvas-wrap div with camera at [0,0,4] fov=55, alpha=true. (2) Form state: email, password, showPassword (toggle Eye/EyeOff lucide icons), mfaEnabled, rememberMe, loading, error — all via useState. (3) handleSubmit: validates non-empty fields, sets loading=true, simulates 1800ms async delay then redirects to /Dashboard via window.location.href. (4) Error display with AlertCircle lucide icon. (5) Lucide icons used: Mail, Lock, Eye, EyeOff, Shield, AlertCircle, Smartphone. (6) CSS: lc-root, lc-card, lc-canvas-wrap classes with glassmorphism card styling. Component is self-contained but renders on top of LoginBackground layer.

As a frontend developer, implement the HealthAdvisoryAirQualityTips section for the HealthAdvisory page. This section renders a static grid of 4 tip cards from the tipCards array, each containing an icon, tag badge, title, desc string, a tips string array (rendered as a list), and a status label. Cards cover topics: Indoor Safety (AQI Threshold 150+), Activity Guidelines (AQI below 100), Vulnerable Groups (children/elderly), and Air Purification (HEPA 99.97%). The section uses className haat-root with haat-inner, haat-header, haat-label, haat-label-dot, haat-title layout classes. No state or animation — pure presentational render. Imports HealthAdvisoryAirQualityTips.css.

As a frontend developer, implement the HealthAdvisoryPollutantGuide section for the HealthAdvisory page. This section uses @react-three/fiber Canvas and THREE.js alongside useRef, useEffect, and useFrame to render an animated 3D molecular or particle visualization per pollutant. The pollutants array contains 4 entries: PM2.5 (high severity), NO₂ (moderate), CO₂ (low), O₃ (moderate) — each with fullName, icon, severity, severityLabel, aqiRange, aqiCurrent, healthImpact, source, and a precautions string array. The UI layout renders a pollutant selector tabs/cards and an expanded detail panel. Severity badges use CSS classes keyed by severity level. Imports HealthAdvisoryPollutantGuide.css.

As a frontend developer, implement the HealthAdvisoryRiskAssessment section for the HealthAdvisory page. This section uses useState for profile tab selection (keys: 'normal', 'sensitive', plus additional profiles), useRef/useEffect for mount animations, and useMemo for derived data. It renders a profile selector with 3 tabs (Normal/Healthy adults, Sensitive Group/Asthma-allergies, plus additional), each driving a dynamic gauge arc via @react-three/fiber Canvas and THREE.js (useFrame animation). Each profile has: riskLevel, aqiValue, aqiMax, gaugePercent, gaugeColor, scaleLeft, scaleColor, a recommendations array (4 items with icon/title/desc), and summaryItems array. CSS classes are data-driven per profile (hara-active-*, hara-border-*, hara-color-*, hara-icon-*, hara-dot-*). Imports HealthAdvisoryRiskAssessment.css.

As a frontend developer, implement the HealthAdvisoryActionSteps section for the HealthAdvisory page. This section uses useState to manage an expanded/collapsed accordion-style step detail panel. The steps array contains 6 items (num 1–6) each with icon, title, tag badge, desc, and a details string array. Steps cover: Check AQI (Daily), Identify Risk Group (Personal), Follow Official Recommendations (Guidance — color-coded Green/Yellow/Orange/Red AQI levels), Prepare Masks (Equipment — N95/KN95 guidance), Monitor Alerts Continuously (Ongoing — push notifications, thresholds), and Share Information With Community (Community). Clicking a step expands its details list. Imports HealthAdvisoryActionSteps.css.

As a frontend developer, implement the HealthAdvisoryEmergencyContacts section for the HealthAdvisory page. This section renders a static grid of 4 contact cards from the contacts array using lucide-react icons (Phone, Mail, MapPin, AlertTriangle, Wind, Activity, Leaf). Each card includes: id, name, tag, description, phone, email, availability, iconType (orange/blue/green/amber for color coding), and a dynamic Icon component. The layout uses hec-root, hec-inner, hec-header, hec-badge, hec-grid, hec-card, hec-card-top class structure. Contact entries cover Kigali City Health Department (24/7), Rwanda Poison Control Center (24h), National Respiratory & Pulmonary Clinic (Mon–Sat), and Rwanda Environmental Monitoring Agency (weekdays). Pure presentational — no state. Imports HealthAdvisoryEmergencyContacts.css.

As a frontend developer, implement the HealthAdvisoryCommunityResources section for the HealthAdvisory page. This section renders a static grid of 8 external resource cards from the resources array. Each card contains: icon emoji, org label, title, desc, tag badge, and an href external link. Organizations span: WHO, CDC, EPA AirNow, Clean Air Fund (NGO), Rwanda Ministry of Health (Government), UNEP, IQAir, and Health Effects Institute (Research). Layout uses hcr-root, hcr-inner, hcr-header, hcr-eyebrow, hcr-eyebrow-dot, hcr-title classes. All links open externally (href). Pure presentational, no state. Imports HealthAdvisoryCommunityResources.css.

As a frontend developer, implement the HealthAdvisoryFAQ section for the HealthAdvisory page. This section uses useState to track the currently open FAQ item (accordion behavior — one open at a time). The faqs array contains items with id, number (01–N), question, answer, and tag. Topics include: AQI definition and calculation, PM2.5 health risks, happy-platform data update frequency (5-min IoT, 30-min satellite, hourly AI), Unhealthy AQI action steps (151–200 range), and NO₂ dangers. Each FAQ item renders a ChevronDown icon (from lucide-react) that rotates when expanded, and an Info icon badge showing the tag. Answer text uses unicode characters (₂, ₃). CSS class structure: FAQ root, item, header, number, question, icon, answer panel. Imports HealthAdvisoryFAQ.css.

As a frontend developer, implement the HealthAdvisoryShareCTA section for the HealthAdvisory page. This section uses useState to manage a 'copied' boolean for clipboard feedback. It defines SHARE_URL ('https://happy-platform.io/HealthAdvisory') and SHARE_TEXT constants. Five inline SVG icon components are defined: IconShare, IconWhatsApp (with brand path data), IconTwitter (X logo path), IconEmail (rect + path), IconDownload, and IconCopy (13×13). Share buttons trigger: WhatsApp (wa.me share link), Twitter/X (twitter.com/intent/tweet), Email (mailto: with subject/body), Download (advisory PDF), and Copy Link (navigator.clipboard.writeText → sets copied state with timeout reset). Layout uses scta- prefixed CSS classes. Imports HealthAdvisoryShareCTA.css.

Implement FastAPI CRUD endpoints for user management: GET /users (paginated, filterable by role/status/department), POST /users, GET /users/{id}, PUT /users/{id}, DELETE /users/{id}, PUT /users/{id}/status (activate/suspend), GET /users/sessions (active sessions count), GET /users/stats (total, active, pending). Supports UserManagement page sections (Header, Table, Filters, Sidebar, Pagination). Note: UserManagement frontend section tasks should depend on this task.

Implement FastAPI endpoints for environmental monitoring: GET /environment/aqi (current AQI by location), GET /environment/pollutants (PM2.5, PM10, CO2, NO2, SO2, ozone readings), GET /environment/heatmap (geospatial heatmap data points), GET /environment/traffic-emissions, GET /environment/noise, GET /environment/heat-islands (urban heat island zones). Support query params: location, radius, time_range. Integrate OpenWeatherMap and NOAA weather APIs. Supports Dashboard, GISMap, Analytics, and PublicDashboard pages.

Implement FastAPI security endpoints: GET /security/threats (active cybersecurity threats), GET /security/siem-events (SIEM log events paginated), GET /security/audit-log (user action audit trail), GET /security/iot-status (IoT device security status), PUT /security/rbac/configure (RBAC rule configuration), POST /security/incident (report security incident). Integrate SIEM event ingestion pipeline. Supports Security page. Note: all endpoints require Admin role via RBAC middleware.

Add Redis Docker service and integrate Redis caching into FastAPI backend for: (1) JWT token blacklist (logout/revoke), (2) AQI and environmental data cache (TTL 60s for real-time endpoints), (3) Rate limiting storage (via slowapi), (4) Session store for MFA verification state. Use redis-py async client. Apply @cache decorator to GET /environment/*, GET /gis/*, GET /analytics/* endpoints with appropriate TTLs. Configure Redis persistence (AOF) for reliability.

As a frontend developer, implement the Navbar section for the GISMap page. This component may already exist from previous pages (Landing, Login, HealthAdvisory). It uses useState for menuOpen, accountOpen, and hoveredLink. Features animated SVG logo with motion.circle and motion.path draw animations (pathLength 0→1), framer-motion staggered nav link entrance via containerVariants/linkVariants, AnimatePresence-powered dropdown menu (dropdownVariants) with account options (Shield, Settings, LogOut icons), and a mobile menu with mobileMenuVariants height animation. Nav links include Dashboard, Air Quality, Traffic (active on /GISMap), Sensors, Alerts, Reports, Sustainability using lucide-react icons. Displays live time via toLocaleTimeString.

Implement FastAPI GIS endpoints: GET /gis/map-data (GeoJSON features for districts/zones), GET /gis/heatmap-zones (pollution hotspot polygons with intensity), GET /gis/markers (sensor/alert location markers), GET /gis/satellite-imagery (satellite tile URLs from Sentinel-2/Landsat), GET /gis/heat-islands (thermal heatmap data), POST /gis/query (spatial query within bounding box). Use PostGIS/GeoServer for geospatial queries. Supports GISMap page (Canvas, Legend, Analytics sections).

Implement FastAPI alerts endpoints: GET /alerts (paginated, filterable by severity/type/location/time), POST /alerts (create alert), PUT /alerts/{id}/acknowledge, GET /alerts/active, GET /alerts/stats, POST /alerts/preferences (notification preferences per user), GET /alerts/threats (AI-predicted upcoming threats). Implement threshold monitoring worker that triggers SMS (Twilio) and email (SendGrid) notifications when environmental thresholds are exceeded. WebSocket endpoint GET /alerts/stream for real-time alert push. Supports Alerts page all sections.

Implement FastAPI analytics endpoints: GET /analytics/trends (time-series trend data by pollutant/location), GET /analytics/predictions (AI model forecast output), GET /analytics/historical (paginated historical records with export), GET /analytics/compare (multi-metric comparison data), GET /analytics/reports (report list and metadata), POST /analytics/reports/generate (trigger report generation), GET /analytics/reports/{id}/download (PDF/CSV export). Supports Analytics, HistoricalData, and Reports pages.

Implement FastAPI health advisory endpoints: GET /health/advisory (current health advisory by AQI level and user profile), GET /health/risk-assessment (risk levels by profile: normal/sensitive/children/elderly), GET /health/pollutant-guide (pollutant health impact data), GET /health/action-steps (recommended actions by AQI threshold), GET /health/emergency-contacts (emergency contact list by city). Supports HealthAdvisory page sections and PublicDashboard health data.

Develop Python AI microservice using LiteLLM and LangChain integrating Claude 4.6 (Opus) and GPT models for: (1) Air pollution spike prediction using time-series sensor data via scikit-learn/TensorFlow LSTM model, (2) Traffic emission forecasting via regression model, (3) Climate anomaly detection (heatwave, smog events), (4) AI-generated sustainability recommendations. Expose FastAPI endpoints: POST /ai/predict/aqi (forecast next 24h AQI), POST /ai/predict/threats (upcoming environmental threats with confidence %), GET /ai/recommendations (smart city sustainability recommendations). Supports AlertsUpcomingThreats, Analytics, and LandingPredictiveAnalytics sections.

As a frontend developer, implement the GISMapSidebar section for the GISMap page. Uses useState for collapsible sidebar toggling via Menu/X lucide icons. Renders navItems array (14 items) with active state highlighting on 'Traffic & Emissions', badge display for Alerts ('12'). Includes layerItems checkboxes (Live Data, All Sensors, AQI Heatmap, Traffic Flow, Satellite Layer) with color-coded indicators. Displays timeRanges selector ('1H' through '30D'). Shows sensorStats cards (IoT Sensors, Air Quality, Traffic Flow, Temperature, Humidity, Noise Level) with statusClass-based badge coloring (online/good/moderate). Renders quickFilters for Air Quality, Traffic, Weather with status badges. Includes Download button and ChevronDown-toggled collapsible section for layer controls.

As a frontend developer, implement the GISMapHeader section for the GISMap page. Uses useState for activeTime ('24H' default), activeView ('heatmap' default), isRefreshing (boolean), and lastRefresh timestamp string. Features a title area with Map lucide icon, a pulsing live badge (gmh-live-dot CSS animation), a view mode toggle with VIEW_MODES array (heatmap/satellite/layers/analytics using Activity/Globe/Layers/BarChart2 icons), time filter chips for TIME_FILTERS ['1H','6H','24H','7D','30D'], an AQI quick indicator display, and a refresh button using useCallback that triggers 1200ms setTimeout to simulate data reload and update lastRefresh via toLocaleTimeString. AnimatePresence wraps transitioning elements.

As a frontend developer, implement the Footer section for the GISMap page. This component may already exist from Landing page (task b4eedf84-d318-4fd0-b531-a0fbc1df686e). Uses framer-motion useInView hook for scroll-triggered animations. Renders four LinkColumn components (Product, Company, Resources, Legal) each with staggerContainer/linkVariant motion variants (staggerChildren: 0.08, delayChildren: 0.3, opacity 0→1 with x:-10→0 slide). Social icons (Twitter, LinkedIn, GitHub) animate in via socialStagger (delayChildren: 0.8, staggerChildren: 0.12) with socialIconVariant scale 0.6→1. Link arrays: productLinks (Dashboard/GISMap/Analytics/Sensors/Reports), companyLinks (PublicDashboard/HealthAdvisory/HistoricalData/Alerts), resourceLinks (UserManagement/Security/Profile/Settings), legalLinks (Privacy/Terms/Cookie/Compliance). SVG social icon paths rendered inline.

Develop Python computer vision microservice using PyTorch/TensorFlow for satellite image processing: (1) Urban heat island detection from Sentinel-2/Landsat thermal bands, (2) Environmental change detection via image diff analysis, (3) Traffic congestion analysis from satellite imagery. Integrate NASA EarthData and MODIS APIs for imagery fetching. Expose endpoints: POST /ai/satellite/analyze (process satellite image), GET /ai/satellite/heat-islands (detected heat zones as GeoJSON), GET /ai/satellite/traffic-analysis. Supports GISMap and Analytics pages.

Implement WebSocket server in FastAPI using python-socketio or native FastAPI WebSocket support for real-time data streaming: (1) /ws/sensors — broadcast live sensor readings every 30s to connected clients, (2) /ws/alerts — push new alerts immediately when threshold exceeded, (3) /ws/aqi — push AQI updates per location. Implement connection manager with room-based subscriptions (by city zone/district). Frontend global state (useRealtime hook) connects via native browser WebSocket. Supports Dashboard, Alerts, and GISMap real-time sections.

As a frontend developer, implement the GISMapCanvas section for the GISMap page. This is the core 3D/canvas map component using Three.js (import * as THREE). Renders POLLUTION_MARKERS array (10 district markers: Kicukiro, Nyarugenge, Gasabo districts) with AQI levels (critical/high/medium/low), color-coded dots (#ff2222 critical to #22c997 low), and interactive popups showing pm25, pm10, co2, no2 readings. Renders HEATMAP_ZONES (10 radial gradient blobs) via HTML5 Canvas or SVG overlay with intensity-based opacity. Draws STREET_PATHS SVG polylines with main/secondary road class styling. Uses useRef for canvas/Three.js scene, useEffect for scene initialization and animation loop, useCallback for marker click/hover interactions. Displays a selected marker detail panel with full AQI breakdown.

As a frontend developer, implement the second GISMapSidebar instance for the GISMap page. This is a duplicate of the first GISMapSidebar (temp_id gismap_sidebar_2) — verify whether this is a second panel (e.g., right-hand sidebar) or a re-use of the same component. The JSX is identical: navItems (14 items with active state on 'Traffic & Emissions'), layerItems checkboxes, timeRanges selector, sensorStats cards, quickFilters, and Download/ChevronDown controls. If it represents a distinct panel position or context (e.g., a floating drawer vs. fixed sidebar), implement accordingly with appropriate CSS class scoping to avoid conflicts. Confirm with design whether this should render conditionally based on screen size or viewport context.

As a frontend developer, implement the Navbar section for the Alerts page. This component may already exist from previous pages (GISMap, HealthAdvisory). It uses React useState for menuOpen, accountOpen, and hoveredLink state. Features framer-motion animations: SVG path draw animation on the logo (circle + hexagon pathLength), containerVariants with staggerChildren for nav links, dropdownVariants for the account dropdown (AnimatePresence), and mobileMenuVariants for responsive hamburger menu. navLinks array includes 7 routes (Dashboard, Air Quality, Traffic, Sensors, Alerts, Reports, Sustainability) each with lucide-react icons. The Alerts link (/Alerts) should be marked as active. Displays live time via toLocaleTimeString. Uses Navbar.css for styling.

As a frontend developer, implement the GISMapLegend section for the GISMap page. Uses useState for isOpen toggle (collapsible panel), useRef for SVG element, and useState for svgSize ({w:180, h:64}). Implements ResizeObserver via useEffect to dynamically update SVG dimensions. Renders colorRanges array (Low/Moderate/High/Very High/Hazardous with range labels and dot CSS classes). Displays pollutants array (PM2.5, PM10, CO₂, NO₂, SO₂) as progress bars with pct values and color-coded backgrounds. Features an inline SVG trend sparkline using buildPath() and buildArea() cubic bezier functions computed from trendPoints [8.2,9.1,10.4,11.0,11.8,12.4]. ChevronDown icon toggles the legend open/closed with AnimatePresence animation. Uses framer-motion for panel expand/collapse.

As a frontend developer, implement the GISMapAnalytics section for the GISMap page. Registers Chart.js modules (LineElement, PointElement, LinearScale, CategoryScale, Filler, Tooltip) via ChartJS.register. Renders a Line chart from react-chartjs-2 with predictionData (AQI Forecast across 13 hourly labels, borderColor #F4A261, fill area) and predictionOptions (1200ms easeInOutQuart animation, custom tooltip with dark background, semi-transparent grid lines). Displays pollutantBars array (PM2.5/PM10/NO₂/SO₂) as animated CSS progress bars with pct widths and color-coded fills. Includes HeatmapCanvas sub-component using useRef and useEffect to draw on HTML5 canvas with devicePixelRatio scaling, dark (#0a1929) base fill, grid lines (rgba(43,74,112,0.4)), and radial gradient pollution hotspot blobs.

As a frontend developer, implement the AlertsHero section for the Alerts page. Uses React useState (activeFilter, timeStr) and useEffect with a setInterval (1000ms) for a live clock display showing hours, minutes, seconds. Renders a breadcrumb nav (Dashboard › Alerts), a live monitoring indicator with animated dot, and a main header row with title block (framer-motion initial opacity:0/y:16 animate to opacity:1/y:0). Displays 4 STAT_CARDS (total=12, critical=4, warning=5, info=3) as stat counters. Renders FILTER_OPTIONS (all/critical/warning/info) as filter buttons using FILTER_ICONS (Bell, AlertTriangle, Shield, Info). Also shows a SENSOR_ITEMS list (128 Online IoT Sensors, Active Satellite Feed, 2 Degraded Air Quality Nodes, Offline Sector 7 Hub) with colored status dots. Uses AlertsHero.css.

As a frontend developer, implement the AlertsFilters section for the Alerts page. Uses React useState for 7 filter fields: searchQuery, alertType, severity, timeRange (default '24h'), location, sortBy (default 'newest'), and statusFilter. Provides useCallback handleReset to clear all filters. Renders a search input with Search icon, a SlidersHorizontal toggle for advanced filter panel, and 5 dropdown selects (TYPE_OPTIONS, SEVERITY_OPTIONS, TIME_RANGE_OPTIONS, LOCATION_OPTIONS, SORT_OPTIONS) using ChevronDown icons. Active filter pills are computed dynamically and rendered with AnimatePresence; each pill has a colored class (af-pill-critical/high/medium/low/default) via PILL_COLOR_MAP and an X (lucide X icon) to remove. A RefreshCw reset button with CheckCircle2 confirmation state. Uses AlertsFilters.css.

As a frontend developer, implement the AlertsActiveList section for the Alerts page. Uses React useState, useEffect, and useRef. Renders a list of alert cards from alertsData (5+ items: ALT-001 through ALT-005+) each with fields: id, severity (critical/warning), type, typeTag badge, lucide icon (Wind, Thermometer, Activity, Radio, CloudRain, Zap, Flame, Droplets), title, location (MapPin), timestamp/date (Clock), affectedArea, metric value, metricLabel, actionLabel button. Cards support expand/collapse (ChevronDown/ChevronRight) to reveal details sub-panel with source, trend, and recommendation fields. Action buttons include 'Acknowledge' (CheckCircle) and 'View Details' (Eye) states. Severity drives card border/background color classes. Uses AlertsActiveList.css.

As a frontend developer, implement the AlertsHeatmap section for the Alerts page. This is a 3D WebGL section using @react-three/fiber Canvas, OrbitControls, and Text from @react-three/drei, plus THREE.js. Renders 8 DISTRICTS as HeatColumn components — each is a BoxGeometry mesh with a glow CircleGeometry disc. useFrame drives animated height lerp (currentHeight.current lerp to targetHeight at 0.04 speed), pulsing glow scale (Math.sin), and emissiveIntensity on hover. intensityToColor maps intensity to THREE.Color (#ef4444 critical, #f97316 orange, #facc15 yellow, #4ade80 green). isHovered state triggers brighter glow (opacity 0.55 vs 0.22) and emissiveIntensity 0.6. HOTSPOTS sidebar lists top 6 districts by intensity. zoomScale prop adjusts column x/z positions. Wrapped in Suspense. Uses AlertsHeatmap.css.

As a frontend developer, implement the AlertsNotificationPrefs section for the Alerts page. Manages complex multi-state UI with React useState for: channelToggles (inapp/email/sms/push boolean map), alertTypeToggles (airquality/heatisland/flood/noise/energy/satellite boolean map), selectedSeverity ('all'/'warning'/'critical'), quietHours enabled/start/end, digestMode, and saveStatus. Renders 4 channelData cards (Monitor, Mail, MessageSquare, Smartphone icons) as toggle switches with iconBg-colored icon containers. Renders 6 alertTypeData rows with severity badges (anp-badge-critical/warning/info/advisory CSS classes). Renders 3 severityLevels as radio-style selector cards with colored dot indicators and active count. Includes a quiet hours time picker (Moon icon), digest frequency selector, and a Save button with animated save confirmation state (Save/Check icon). Uses AlertsNotificationPrefs.css.

As a frontend developer, implement the AlertsUpcomingThreats section for the Alerts page. Uses React useState, useEffect, and useRef. Renders 5 AI-predicted threat cards from the threats array (pm25-spike, heat-island, flash-flood, no2-traffic, humidity-mold), each with: lucide icon (Wind, Thermometer, CloudRain, Activity), risk badge (high/medium with corresponding color class), confidence percentage bar (e.g. 88%), eta string ('In ~4 hours'), location (MapPin), and an expandable recommendations list (ChevronDown toggle) with 3 action steps per threat. A Brain icon and 'AI Predictions' label denotes the AI-powered nature. ArrowRight CTA links to detailed threat view. Confidence bar fills animated via CSS width. Uses AlertsUpcomingThreats.css.

As a frontend developer, implement the AlertsRecommendations section for the Alerts page. Uses React useState, useEffect, useRef, and useMemo. Includes a @react-three/fiber Canvas element for 3D background or decorative visualization. Renders recommendation cards from the recommendations array (h1, h2, t1, t2 and more) categorized by category (health/traffic/environmental with Heart, Car, Leaf icons). Each card shows: priority badge (critical/high/medium with CSS classes), status badge (implemented/in-progress/pending with CheckCircle/AlertCircle icons), a progress bar (filled to progress % value), impact label (TrendingUp), timeframe (Clock), affectedPop (Users), and an expandable steps list (ChevronRight toggle). Stats bar displays BarChart2 and ArrowUpRight metrics. Category filter tabs switch between health/traffic/all views via useMemo filtering. Uses AlertsRecommendations.css.

As a frontend developer, implement the Footer section for the Alerts page. This component may already exist from Landing and GISMap pages. Uses framer-motion useInView and motion components with staggerContainer (delayChildren: 0.3, staggerChildren: 0.08) and linkVariant (opacity:0/x:-10 → opacity:1/x:0) for scroll-triggered link animations. Renders 4 LinkColumn components (Product, Company, Resources, Legal) each with their respective link arrays including Alerts (/Alerts) in the Company column. Social icons (Twitter, LinkedIn, GitHub) animate in via socialStagger/socialIconVariant (scale 0.6→1). Footer bottom bar shows copyright and legal links. Uses Footer.css.

As a frontend developer, implement the UserManagementHeader section for the UserManagement page. This section renders a full-width header with a decorative background grid (`umh-bg-grid`) and glow effect (`umh-bg-glow`). It includes a breadcrumb trail linking back to `/Dashboard`, a title row with a `ShieldCheck` icon from lucide-react, and a descriptive paragraph about platform access administration. Below the title, render a `umh-stats-row` containing three stat cards (Total Users: 1284, Active Sessions: 47, Pending Requests: 9) each with a color modifier class (`--orange`, `--green`, `--blue`), a lucide icon (`Users`, `Activity`, `Clock`), a delta badge, and an `AnimatedNumber` sub-component that uses `useState(0)` + `useEffect` with a `setInterval` at 16ms to count up to the target value over a configurable `duration` prop (700ms default). The header also includes a toolbar row with `Plus` (Add User), `Download` (Export), and `RefreshCw` (Refresh) action buttons; the refresh button uses `useState(false)` for a `refreshing` state toggled via `handleRefresh` with a 1200ms `setTimeout` reset, applying a spin animation class while active.

As a frontend developer, implement the UserManagementSidebar section for the UserManagement page. This sidebar contains a mobile toggle button with a `Filter` icon that controls `useState(false)` for `mobileOpen`. It renders a navigation list (`navItems`) with lucide icons linking to UserManagement (active), Security, Analytics, Reports, and Profile pages. Below nav, it renders three collapsible accordion panels — Roles (`rolesOpen`), Status (`statusOpen`), Departments (`deptOpen`) — each toggled via `useState(true)` with a `ChevronDown` icon. The Roles panel renders `roleFilters` (Admin, Manager, Researcher, Viewer, City Planner) as checkbox rows with colored dot indicators and counts; selection state managed via `selectedRoles` array with `toggleRole()`. The Status panel renders `statusFilters` (Active, Inactive, Suspended) with `toggleStatus()` and `selectedStatuses` state. The Departments panel renders a list of 8 department strings with `selectedDept` state. A search input controls `searchQuery` state. A computed `totalActive` badge counts all active filters. A `resetFilters()` function clears all state. Desktop visibility is determined by a `window.innerWidth > 768` check stored in `isDesktop`.

As a frontend developer, implement the UserManagementFilters section for the UserManagement page. This toolbar section includes two custom dropdown components for Sort and View, plus a search input. Sort dropdown uses `useState('name_asc')` and offers 6 options (name_asc, name_desc, date_added_desc, date_added_asc, last_active_desc, last_active_asc) rendered via `sortOptions` array with a `SortIcon` SVG trigger and `ChevronIcon` indicator. View dropdown uses `useState('all')` and offers 5 options (all, with_permissions, recently_added, admins, inactive) rendered via `viewOptions` with a `ViewIcon` SVG trigger. Search input uses `useState('')` for `searchQuery` with a `SearchIcon` SVG. Applied state is tracked separately (`appliedSort`, `appliedView`, `appliedSearch`) and synced via `useCallback`-wrapped apply handlers. Active filter chips are rendered for non-default selections with an `XIcon` for removal. A `RefreshIcon` reset button clears all filters back to defaults. All SVG icons are inline custom components. The section uses `umf-` prefixed CSS classes throughout.

As a frontend developer, implement the UserManagementTable section for the UserManagement page. This is the core data table rendering an `INITIAL_USERS` array of 9+ user records, each with fields: id, name, email, role, roleLabel, department, lastActive, lastActiveRecent, status, avatarClass, and initials. Uses `useState` for `users`, `sortField`, `sortDir`, and a `selectedRows` set for multi-select. Renders a sticky header row with sortable columns (Name, Email, Role, Department, Last Active, Status) using `ChevronUp`/`ChevronDown`/`ChevronsUpDown` icons from lucide-react to indicate sort state. Each row renders: a checkbox for row selection, an avatar `div` with role-specific CSS class (`umt-avatar-admin`, `umt-avatar-manager`, etc.) showing initials, user name + email, role badge with color coding, department, last active timestamp with a green dot if `lastActiveRecent`, and a status badge (active/inactive/suspended). Each row has an actions menu with `Eye` (view), `Edit2` (edit), `UserX` (suspend), and `UserCheck` (activate) lucide icons. Uses `useRef` for dropdown positioning and `useEffect` for click-outside detection to close open action menus. All classes use `umt-` prefix.

As a frontend developer, implement the UserManagementPagination section for the UserManagement page. This footer-level navigation component manages `useState(25)` for `rowsPerPage` and `useState(1)` for `currentPage` against a `TOTAL_RECORDS` constant of 450. It renders a rows-per-page `<select>` with options [10, 25, 50] that resets `currentPage` to 1 on change via `handleRowsChange`. It computes `totalPages`, `startRecord`, and `endRecord` for a 'Showing X–Y of 450' summary label. Page number buttons are generated by `getPageNumbers(currentPage, totalPages)` which implements a smart windowing algorithm: shows all pages if ≤7, otherwise shows first/last with ellipsis sentinels (`'ellipsis-start'`, `'ellipsis-end'`) and a sliding window of 3 pages around the current page. Ellipsis slots render as `<span>` elements. Active page button has a highlighted style. Previous/Next buttons use inline `ChevronLeft`/`ChevronRight` SVG components and are disabled at boundaries. The root element has `role='navigation'` and `aria-label='Table pagination'`. All classes use `ump-` prefix.