(() => {
+ // From context (GeoJSON FeatureCollection)
+ if (committedCoords && (committedCoords as any).type === 'FeatureCollection') {
+ const fc = committedCoords as any;
+ const polyFeature = fc.features?.find(
+ (f: any) => f.geometry?.type === 'Polygon'
+ );
+
+ if (polyFeature?.geometry?.coordinates?.[0]) {
+ return polyFeature.geometry.coordinates[0].map((coord: [number, number]) => ({
+ lat: coord[1],
+ lng: coord[0],
+ }));
+ }
+ }
+
+ return [];
+ }, [committedCoords]);
+
+ // Initialize map
+ React.useEffect(() => {
+ if (!mapContainerRef.current || mapRef.current) return;
+
+ const map = L.map(mapContainerRef.current, {
+ center: [46.7, -116.96],
+ zoom: 14,
+ zoomControl: false,
+ });
+
+ // Add zoom control to bottom right
+ L.control.zoom({ position: 'bottomright' }).addTo(map);
+
+ mapRef.current = map;
+
+ // Add ESRI satellite imagery
+ L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+ attribution: 'Tiles © Esri',
+ maxZoom: 20,
+ }).addTo(map);
+
+ // Add ESRI labels
+ L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}', {
+ maxZoom: 20,
+ }).addTo(map);
+
+ // Create tooltip element
+ const tooltip = document.createElement('div');
+ tooltip.style.cssText = `
+ position: absolute;
+ background: rgba(0,0,0,0.85);
+ padding: 8px 12px;
+ border-radius: 6px;
+ font-size: 12px;
+ color: #fff;
+ pointer-events: none;
+ z-index: 1000;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+ display: none;
+ border: 1px solid rgba(255,255,255,0.1);
+ `;
+ document.body.appendChild(tooltip);
+ tooltipRef.current = tooltip;
+
+ return () => {
+ if (tooltipRef.current) {
+ document.body.removeChild(tooltipRef.current);
+ tooltipRef.current = null;
+ }
+ if (mapRef.current) {
+ mapRef.current.remove();
+ mapRef.current = null;
+ }
+ };
+ }, []);
+
+ // Update boundary and grid when data changes
+ React.useEffect(() => {
+ const map = mapRef.current;
+ if (!map || boundaryCoords.length < 3 || !formSubmitted) return;
+
+ // Remove old layers
+ if (boundaryLayerRef.current) {
+ map.removeLayer(boundaryLayerRef.current);
+ }
+ if (gridLayerRef.current) {
+ map.removeLayer(gridLayerRef.current);
+ }
+
+ // Draw boundary line
+ const latLngs = boundaryCoords.map(c => L.latLng(c.lat, c.lng));
+ latLngs.push(latLngs[0]);
+
+ const boundaryLine = L.polyline(latLngs, {
+ color: COLORS.gold,
+ weight: 3,
+ opacity: 1,
+ }).addTo(map);
+
+ boundaryLayerRef.current = boundaryLine;
+
+ // Generate grid cells
+ const generatedCells = generateGridCells(boundaryCoords, 25);
+ setCells(generatedCells);
+ console.log(`[PrescriptionMapViewer] Generated ${generatedCells.length} grid cells`);
+
+ // Hover handler for tooltip
+ const handleHover = (cell: GridCell | null, e: MouseEvent) => {
+ if (!tooltipRef.current) return;
+
+ if (cell) {
+ tooltipRef.current.innerHTML = `
+ Cell Details
+ Payback: ${cell.paybackPeriod} years
+ Application Rate: ${cell.applicationRate} tons/acre
+ `;
+ tooltipRef.current.style.display = 'block';
+ tooltipRef.current.style.left = `${e.clientX + 12}px`;
+ tooltipRef.current.style.top = `${e.clientY + 12}px`;
+ } else {
+ tooltipRef.current.style.display = 'none';
+ }
+ };
+
+ // Add grid canvas layer
+ const gridLayer = new GridCanvasLayer(generatedCells, handleHover);
+ gridLayer.addTo(map);
+ gridLayerRef.current = gridLayer;
+
+ // Fit bounds to boundary
+ const bounds = L.latLngBounds(latLngs);
+ map.fitBounds(bounds, { padding: [60, 60] });
+
+ }, [boundaryCoords, formSubmitted]);
+
+ // Clear grid when form not submitted
+ React.useEffect(() => {
+ if (!formSubmitted && mapRef.current) {
+ if (boundaryLayerRef.current) {
+ mapRef.current.removeLayer(boundaryLayerRef.current);
+ boundaryLayerRef.current = null;
+ }
+ if (gridLayerRef.current) {
+ mapRef.current.removeLayer(gridLayerRef.current);
+ gridLayerRef.current = null;
+ }
+ setCells([]);
+ }
+ }, [formSubmitted]);
+
+ const handleReset = () => {
+ clearCoordinateData();
+ setFormSubmitted(false);
+ navigate('/');
+ };
+
+ // Empty state
+ if (!isLoading && (!hasCoordinates || !formSubmitted)) {
+ return (
+
+
+
+
+
+
+
+
+ No Prescription Data
+
+
+ To view prescription maps and biochar application recommendations, please submit your farm configuration with boundary coordinates.
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+ {/* Header */}
+
+
+
+ Prescription Map
+
+
+ Biochar application recommendations based on your field analysis
+
+
+
+
+ }
+ onClick={handleReset}
+ sx={{
+ borderColor: COLORS.errorBorder,
+ color: COLORS.error,
+ textTransform: 'none',
+ '&:hover': {
+ borderColor: COLORS.error,
+ backgroundColor: COLORS.errorLight,
+ },
+ }}
+ >
+ Reset
+
+
+
+
+ {/* Main content */}
+
+ {/* Map container */}
+
+
+
+ {/* Info overlay */}
+
+
+
+ Hover over cells to see details
+
+
+
+
+ {/* Sidebar */}
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/features/prescriptions/index.ts b/frontend/src/features/prescriptions/index.ts
new file mode 100644
index 0000000..aa248ca
--- /dev/null
+++ b/frontend/src/features/prescriptions/index.ts
@@ -0,0 +1 @@
+export { default as PrescriptionMapViewer } from './PrescriptionMapViewer';
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 1287ec1..7ace972 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -64,7 +64,6 @@ button:focus-visible {
@media (prefers-color-scheme: light) {
:root {
color: #213547;
- background-color: #ffffff;
}
a:hover {
color: #747bff;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index ec8d40d..0a1f35e 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -5,13 +5,16 @@ import './index.css'
import Header from './components/Header.tsx'
import AppRoutes from './components/AppRoutes.tsx'
import { AuthProvider } from './contexts/AuthContext'
+import { CoordinateProvider } from './contexts/CoordinateContext'
createRoot(document.getElementById('root')!).render(
-
-
+
+
+
+
,
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 09f5624..313c6aa 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -1,49 +1,48 @@
-import { Box, Button, Typography, Container } from '@mui/material';
-import { useNavigate } from 'react-router';
+import { Box, Typography, Container } from '@mui/material';
import { useAuth } from '../contexts/AuthContext';
+import { FarmBiocharForm } from '../features/farm';
+import { COLORS } from '../styles/colors';
const HomePage = () => {
- const navigate = useNavigate();
- const { user, logout } = useAuth();
-
- const handleLogout = async () => {
- try {
- await logout();
- navigate('/login');
- } catch (error) {
- console.error('Logout failed:', error);
- }
- };
+ const { user } = useAuth();
return (
-
+
-
- Welcome, {user?.first_name || user?.username}!
-
+ {/* Header */}
+
+
+ Welcome, {user?.first_name || user?.username}!
+
+
+ Manage your farm biochar applications and data below.
+
+
-
- You are successfully logged in to CharAI.
-
+ {/* Intro boilerplate */}
+
+
+ About this tool
+
+
+ This application helps you plan and manage biochar applications across your farm. Use the form below to define each field, specify crops and current selling prices, and upload geographic coordinate files that define your field boundaries.
+
+
+ After uploading your coordinate file (required) and any optional yield data, you can submit a request to estimate potential impacts and budget allocation for biochar application.
+
+
-
+ {/* Farm configuration form placed below the intro */}
+
+
+
);
diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
index c9cd32e..5aa3810 100644
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -1,38 +1,36 @@
-import { useState } from "react";
-import { Box, Button, Typography } from "@mui/material";
+import { Box, Typography, Container } from "@mui/material";
+import { FarmBiocharForm } from "../features/farm";
+import { COLORS } from "../styles/colors";
+import { useAuth } from "../contexts/AuthContext";
const LandingPage = () => {
- const [count, setCount] = useState(0);
+ const { isAuthenticated } = useAuth();
return (
-
-
- CharAI
-
-
-
- Frontend initialized with React, TypeScript, Vite, and Material UI
-
-
-
-
+
+
+ CharAI
+
+
+ Optimize your farm's biochar application with AI-powered recommendations
+
+
+
+ {isAuthenticated && }
+