1496 lines
64 KiB
JavaScript
1496 lines
64 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import { useParams, useNavigate } from 'react-router-dom';
|
||
import { MapContainer, TileLayer, Marker, Popup, Polygon, Polyline, useMapEvents, useMap } from 'react-leaflet';
|
||
import { Icon } from 'leaflet';
|
||
import * as turf from '@turf/turf';
|
||
import {
|
||
PlusIcon,
|
||
TrashIcon,
|
||
ArrowLeftIcon,
|
||
MapPinIcon,
|
||
SwatchIcon,
|
||
PencilIcon
|
||
} from '@heroicons/react/24/outline';
|
||
import { propertiesAPI, applicationsAPI, mowingAPI } from '../../services/api';
|
||
import ApplicationViewModal from '../../components/Applications/ApplicationViewModal';
|
||
import MowingSessionViewModal from '../../components/Mowing/MowingSessionViewModal';
|
||
import { EyeIcon, CalendarIcon, WrenchScrewdriverIcon } from '@heroicons/react/24/outline';
|
||
import LoadingSpinner from '../../components/UI/LoadingSpinner';
|
||
import toast from 'react-hot-toast';
|
||
import 'leaflet/dist/leaflet.css';
|
||
|
||
// Simple tag input and suggestion components for grass types
|
||
const COOL_SEASON_GRASSES = [
|
||
'Turf Type Tall Fescue',
|
||
'Kentucky Bluegrass',
|
||
'Perennial Ryegrass',
|
||
'Fine Fescue',
|
||
'Creeping Red Fescue',
|
||
'Chewings Fescue',
|
||
'Hard Fescue',
|
||
'Annual Ryegrass'
|
||
];
|
||
|
||
const TagInput = ({ value = [], onChange }) => {
|
||
const [input, setInput] = useState('');
|
||
const add = (val) => { const v = val.trim(); if (!v) return; if (!value.includes(v)) onChange([...(value||[]), v]); setInput(''); };
|
||
return (
|
||
<div className="border rounded p-2">
|
||
<div className="flex flex-wrap gap-2 mb-2">
|
||
{(value||[]).map((t) => (
|
||
<span key={t} className="px-2 py-1 bg-gray-100 rounded text-xs flex items-center gap-1">
|
||
{t}
|
||
<button className="text-gray-500 hover:text-gray-700" onClick={() => onChange((value||[]).filter(x=>x!==t))}>×</button>
|
||
</span>
|
||
))}
|
||
</div>
|
||
<input
|
||
className="w-full border-0 focus:outline-none text-sm"
|
||
placeholder="Type and press Enter to add"
|
||
value={input}
|
||
onChange={(e)=> setInput(e.target.value)}
|
||
onKeyDown={(e)=> { if (e.key==='Enter'){ e.preventDefault(); add(input); } }}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const SuggestionChips = ({ onPick }) => (
|
||
<div className="flex flex-wrap gap-2 mt-2">
|
||
{COOL_SEASON_GRASSES.map(g => (
|
||
<button key={g} type="button" onClick={()=> onPick(g)} className="px-2 py-1 bg-blue-50 hover:bg-blue-100 text-blue-700 rounded text-xs">
|
||
{g}
|
||
</button>
|
||
))}
|
||
</div>
|
||
);
|
||
|
||
// Fix for default markers
|
||
delete Icon.Default.prototype._getIconUrl;
|
||
Icon.Default.mergeOptions({
|
||
iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
|
||
iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
|
||
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
|
||
});
|
||
|
||
// Colors for lawn sections
|
||
const SECTION_COLORS = [
|
||
{ name: 'Green', value: '#22c55e' },
|
||
{ name: 'Blue', value: '#3b82f6' },
|
||
{ name: 'Red', value: '#ef4444' },
|
||
{ name: 'Yellow', value: '#eab308' },
|
||
{ name: 'Purple', value: '#a855f7' },
|
||
{ name: 'Orange', value: '#f97316' },
|
||
];
|
||
|
||
// Calculate area in square feet
|
||
const calculateAreaInSqFt = (coordinates) => {
|
||
try {
|
||
const polygon = turf.polygon([coordinates.map(coord => [coord[1], coord[0]])]);
|
||
const areaInSqMeters = turf.area(polygon);
|
||
return Math.round(areaInSqMeters * 10.7639); // Convert to sq ft
|
||
} catch (error) {
|
||
console.error('Area calculation error:', error);
|
||
return 0;
|
||
}
|
||
};
|
||
|
||
// Calculate distance from a point to a line segment
|
||
const pointToLineDistance = (point, lineStart, lineEnd) => {
|
||
const [px, py] = point;
|
||
const [x1, y1] = lineStart;
|
||
const [x2, y2] = lineEnd;
|
||
|
||
const A = px - x1;
|
||
const B = py - y1;
|
||
const C = x2 - x1;
|
||
const D = y2 - y1;
|
||
|
||
const dot = A * C + B * D;
|
||
const lenSq = C * C + D * D;
|
||
|
||
if (lenSq === 0) return Math.sqrt(A * A + B * B);
|
||
|
||
let param = dot / lenSq;
|
||
|
||
let xx, yy;
|
||
if (param < 0) {
|
||
xx = x1;
|
||
yy = y1;
|
||
} else if (param > 1) {
|
||
xx = x2;
|
||
yy = y2;
|
||
} else {
|
||
xx = x1 + param * C;
|
||
yy = y1 + param * D;
|
||
}
|
||
|
||
const dx = px - xx;
|
||
const dy = py - yy;
|
||
return Math.sqrt(dx * dx + dy * dy);
|
||
};
|
||
|
||
// Component for drawing polygons
|
||
function PolygonDrawer({ isDrawing, onPolygonComplete, currentColor }) {
|
||
const [currentPolygon, setCurrentPolygon] = useState([]);
|
||
|
||
useMapEvents({
|
||
click(e) {
|
||
if (!isDrawing) return;
|
||
|
||
const newPoint = [e.latlng.lat, e.latlng.lng];
|
||
console.log('Adding point:', newPoint);
|
||
setCurrentPolygon(prev => {
|
||
const newPoly = [...prev, newPoint];
|
||
console.log('Current polygon has', newPoly.length, 'points');
|
||
return newPoly;
|
||
});
|
||
},
|
||
dblclick(e) {
|
||
console.log('Double click detected, drawing:', isDrawing, 'points:', currentPolygon.length);
|
||
if (isDrawing && currentPolygon.length >= 3) {
|
||
e.originalEvent.preventDefault();
|
||
e.originalEvent.stopPropagation();
|
||
console.log('Completing polygon with', currentPolygon.length, 'points');
|
||
onPolygonComplete(currentPolygon);
|
||
setCurrentPolygon([]);
|
||
}
|
||
}
|
||
});
|
||
|
||
return currentPolygon.length > 0 ? (
|
||
<Polygon
|
||
positions={currentPolygon}
|
||
pathOptions={{
|
||
color: currentColor.value,
|
||
fillColor: currentColor.value,
|
||
fillOpacity: 0.3,
|
||
weight: 2,
|
||
dashArray: '5, 5'
|
||
}}
|
||
/>
|
||
) : null;
|
||
}
|
||
|
||
// Component for editable polygons
|
||
function EditablePolygon({ section, onUpdate, onEdit, onDelete }) {
|
||
// Import toast function from the module scope
|
||
const [isEditing, setIsEditing] = useState(false);
|
||
const [editedCoordinates, setEditedCoordinates] = useState(section.coordinates);
|
||
const map = useMap();
|
||
|
||
const handleMarkerDrag = (index, newLatLng) => {
|
||
const newCoords = [...editedCoordinates];
|
||
newCoords[index] = [newLatLng.lat, newLatLng.lng];
|
||
setEditedCoordinates(newCoords);
|
||
|
||
// Recalculate area
|
||
const area = calculateAreaInSqFt([...newCoords, newCoords[0]]);
|
||
onUpdate(section.id, { ...section, coordinates: newCoords, area });
|
||
};
|
||
|
||
const addPointAtIndex = (index, e) => {
|
||
e.originalEvent.stopPropagation();
|
||
const newCoords = [...editedCoordinates];
|
||
const newPoint = [e.latlng.lat, e.latlng.lng];
|
||
newCoords.splice(index + 1, 0, newPoint);
|
||
setEditedCoordinates(newCoords);
|
||
|
||
const area = calculateAreaInSqFt([...newCoords, newCoords[0]]);
|
||
onUpdate(section.id, { ...section, coordinates: newCoords, area });
|
||
};
|
||
|
||
const removePoint = (index) => {
|
||
if (editedCoordinates.length <= 3) {
|
||
toast.error('Polygon must have at least 3 points');
|
||
return;
|
||
}
|
||
const newCoords = editedCoordinates.filter((_, i) => i !== index);
|
||
setEditedCoordinates(newCoords);
|
||
|
||
const area = calculateAreaInSqFt([...newCoords, newCoords[0]]);
|
||
onUpdate(section.id, { ...section, coordinates: newCoords, area });
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Polygon
|
||
positions={editedCoordinates}
|
||
pathOptions={{
|
||
color: section.color.value,
|
||
fillColor: section.color.value,
|
||
fillOpacity: isEditing ? 0.3 : 0.4,
|
||
weight: isEditing ? 3 : 2
|
||
}}
|
||
eventHandlers={{
|
||
click: (e) => {
|
||
if (!isEditing) {
|
||
setIsEditing(true);
|
||
toast('Edit mode enabled: Drag points to move, right-click to remove points, click edges to add points');
|
||
} else {
|
||
// Add point when clicking on polygon edge during edit mode
|
||
const newPoint = [e.latlng.lat, e.latlng.lng];
|
||
|
||
// Find the closest edge and insert the point there
|
||
let closestEdgeIndex = 0;
|
||
let minDistance = Infinity;
|
||
|
||
for (let i = 0; i < editedCoordinates.length; i++) {
|
||
const start = editedCoordinates[i];
|
||
const end = editedCoordinates[(i + 1) % editedCoordinates.length];
|
||
|
||
// Calculate distance from clicked point to edge
|
||
const distance = pointToLineDistance(newPoint, start, end);
|
||
if (distance < minDistance) {
|
||
minDistance = distance;
|
||
closestEdgeIndex = i;
|
||
}
|
||
}
|
||
|
||
// Insert new point after the closest edge start point
|
||
const newCoords = [...editedCoordinates];
|
||
newCoords.splice(closestEdgeIndex + 1, 0, newPoint);
|
||
setEditedCoordinates(newCoords);
|
||
|
||
const area = calculateAreaInSqFt([...newCoords, newCoords[0]]);
|
||
onUpdate(section.id, { ...section, coordinates: newCoords, area });
|
||
|
||
toast('Point added! Drag it to adjust position');
|
||
}
|
||
}
|
||
}}
|
||
>
|
||
<Popup>
|
||
<div className="text-center">
|
||
<strong>{section.name}</strong><br />
|
||
{section.area.toLocaleString()} sq ft<br />
|
||
<div className="flex gap-2 mt-2">
|
||
<button
|
||
onClick={() => {
|
||
setIsEditing(!isEditing);
|
||
toast(isEditing ? 'Edit mode disabled' : 'Edit mode enabled');
|
||
}}
|
||
className={`text-sm ${isEditing ? 'text-green-600' : 'text-blue-600'}`}
|
||
title={isEditing ? 'Exit edit mode' : 'Drag corners, click edges to add points, right-click to remove'}
|
||
>
|
||
{isEditing ? 'Done' : 'Edit Points'}
|
||
</button>
|
||
<button
|
||
onClick={() => onEdit(section)}
|
||
className="text-blue-600 text-sm"
|
||
>
|
||
Edit Name
|
||
</button>
|
||
<button
|
||
onClick={() => onDelete(section.id)}
|
||
className="text-red-600 text-sm"
|
||
>
|
||
Delete
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</Popup>
|
||
</Polygon>
|
||
|
||
{/* Editable markers for each point */}
|
||
{isEditing && editedCoordinates.map((coord, index) => (
|
||
<Marker
|
||
key={`${section.id}-${index}`}
|
||
position={coord}
|
||
draggable={true}
|
||
eventHandlers={{
|
||
dragend: (e) => {
|
||
handleMarkerDrag(index, e.target.getLatLng());
|
||
},
|
||
contextmenu: (e) => {
|
||
e.originalEvent.preventDefault();
|
||
if (editedCoordinates.length > 3) {
|
||
removePoint(index);
|
||
}
|
||
}
|
||
}}
|
||
icon={new Icon({
|
||
iconUrl: 'data:image/svg+xml;base64,' + btoa(`
|
||
<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="6" cy="6" r="5" fill="${section.color.value}" stroke="white" stroke-width="2"/>
|
||
</svg>
|
||
`),
|
||
iconSize: [12, 12],
|
||
iconAnchor: [6, 6]
|
||
})}
|
||
>
|
||
<Popup>
|
||
<div className="text-center">
|
||
<p className="text-xs">Point {index + 1}</p>
|
||
<button
|
||
onClick={() => removePoint(index)}
|
||
className="text-red-600 text-xs"
|
||
disabled={editedCoordinates.length <= 3}
|
||
>
|
||
Remove Point
|
||
</button>
|
||
</div>
|
||
</Popup>
|
||
</Marker>
|
||
))}
|
||
</>
|
||
);
|
||
}
|
||
|
||
const PropertyDetail = () => {
|
||
const { id } = useParams();
|
||
const navigate = useNavigate();
|
||
const [property, setProperty] = useState(null);
|
||
const [lawnSections, setLawnSections] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [isDrawing, setIsDrawing] = useState(false);
|
||
// GPS capture modes
|
||
const [isGPSPointsMode, setIsGPSPointsMode] = useState(false); // mark-at-location
|
||
const [isGPSTraceMode, setIsGPSTraceMode] = useState(false); // continuous trace
|
||
const [isTracing, setIsTracing] = useState(false);
|
||
const [gpsWatchId, setGpsWatchId] = useState(null);
|
||
const [gpsTracePoints, setGpsTracePoints] = useState([]);
|
||
const [gpsSamples, setGpsSamples] = useState([]); // recent raw samples for smoothing
|
||
const [gpsDistance, setGpsDistance] = useState(0);
|
||
const [gpsAccuracy, setGpsAccuracy] = useState(null);
|
||
const [isSnapPreview, setIsSnapPreview] = useState(false);
|
||
const [showAddMenu, setShowAddMenu] = useState(false);
|
||
// Modal picker to ensure options show reliably on mobile
|
||
const [showCaptureModeModal, setShowCaptureModeModal] = useState(false);
|
||
const [currentColor, setCurrentColor] = useState(SECTION_COLORS[0]);
|
||
const [showNameModal, setShowNameModal] = useState(false);
|
||
const [pendingSection, setPendingSection] = useState(null);
|
||
const [sectionName, setSectionName] = useState('');
|
||
const [sectionGrassTypes, setSectionGrassTypes] = useState([]);
|
||
const [editingSection, setEditingSection] = useState(null);
|
||
const [showEditModal, setShowEditModal] = useState(false);
|
||
const [editGrassTypes, setEditGrassTypes] = useState([]);
|
||
|
||
// Recent history state for this property
|
||
const [completedApplications, setCompletedApplications] = useState([]);
|
||
const [applicationLogs, setApplicationLogs] = useState([]);
|
||
const [mowingLogs, setMowingLogs] = useState([]);
|
||
const [historyLoading, setHistoryLoading] = useState(false);
|
||
const [viewingApplication, setViewingApplication] = useState(null);
|
||
const [viewingMowingSession, setViewingMowingSession] = useState(null);
|
||
|
||
useEffect(() => {
|
||
fetchPropertyDetails();
|
||
}, [id]); // eslint-disable-line react-hooks/exhaustive-deps
|
||
|
||
// Load recent history when property is available
|
||
useEffect(() => {
|
||
if (!property?.id) return;
|
||
const loadHistory = async () => {
|
||
try {
|
||
setHistoryLoading(true);
|
||
const [completedRes, archivedRes, logsRes, mowRes] = await Promise.all([
|
||
applicationsAPI.getPlans({ status: 'completed', property_id: property.id }),
|
||
applicationsAPI.getPlans({ status: 'archived', property_id: property.id }),
|
||
applicationsAPI.getLogs({ property_id: property.id }),
|
||
mowingAPI.getLogs({ property_id: property.id })
|
||
]);
|
||
const completedPlans = completedRes.data?.data?.plans || [];
|
||
const archivedPlans = archivedRes.data?.data?.plans || [];
|
||
setCompletedApplications([...(completedPlans||[]), ...(archivedPlans||[])]);
|
||
setApplicationLogs(logsRes.data?.data?.logs || []);
|
||
setMowingLogs(mowRes.data?.data?.logs || []);
|
||
} catch (e) {
|
||
console.warn('Failed to load property history', e?.response?.data || e.message);
|
||
setCompletedApplications([]);
|
||
setApplicationLogs([]);
|
||
setMowingLogs([]);
|
||
} finally { setHistoryLoading(false); }
|
||
};
|
||
loadHistory();
|
||
}, [property?.id]);
|
||
|
||
// Handle keyboard shortcuts for polygon drawing
|
||
useEffect(() => {
|
||
const handleKeyPress = (e) => {
|
||
if (isDrawing && e.key === 'Enter') {
|
||
// Find the PolygonDrawer component and complete the polygon
|
||
console.log('Enter pressed during drawing mode');
|
||
}
|
||
if (e.key === 'Escape' && isDrawing) {
|
||
setIsDrawing(false);
|
||
toast('Drawing cancelled');
|
||
}
|
||
};
|
||
|
||
document.addEventListener('keydown', handleKeyPress);
|
||
return () => document.removeEventListener('keydown', handleKeyPress);
|
||
}, [isDrawing]);
|
||
|
||
const fetchPropertyDetails = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const response = await propertiesAPI.getById(id);
|
||
console.log('Property details:', response);
|
||
const propertyData = response.data.data.property;
|
||
setProperty(propertyData);
|
||
|
||
// Convert backend sections to frontend format
|
||
if (propertyData.sections && propertyData.sections.length > 0) {
|
||
const convertedSections = propertyData.sections.map(section => {
|
||
const polyRaw = typeof section.polygonData === 'string' ? JSON.parse(section.polygonData) : section.polygonData;
|
||
const ring = Array.isArray(polyRaw?.coordinates?.[0]) ? polyRaw.coordinates[0] : [];
|
||
const coords = ring.map(pt => [Number(pt[0]), Number(pt[1])]);
|
||
const colorRaw = polyRaw?.color;
|
||
const color = (colorRaw && typeof colorRaw === 'object' && 'value' in colorRaw)
|
||
? colorRaw
|
||
: (typeof colorRaw === 'string' ? { name: 'Custom', value: colorRaw } : SECTION_COLORS[0]);
|
||
return {
|
||
id: section.id,
|
||
name: section.name,
|
||
coordinates: coords,
|
||
color,
|
||
area: section.area,
|
||
grassType: section.grassType || '',
|
||
grassTypes: section.grassTypes || null
|
||
};
|
||
});
|
||
setLawnSections(convertedSections);
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to fetch property:', error);
|
||
toast.error('Failed to load property');
|
||
navigate('/properties');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handlePolygonComplete = (coordinates) => {
|
||
console.log('handlePolygonComplete called with', coordinates.length, 'coordinates');
|
||
if (coordinates.length < 3) {
|
||
toast.error('Polygon needs at least 3 points');
|
||
return;
|
||
}
|
||
|
||
const area = calculateAreaInSqFt([...coordinates, coordinates[0]]);
|
||
console.log('Calculated area:', area);
|
||
setPendingSection({ coordinates, color: currentColor, area });
|
||
setShowNameModal(true);
|
||
setIsDrawing(false);
|
||
};
|
||
|
||
// Haversine distance in meters
|
||
const haversine = (lat1, lon1, lat2, lon2) => {
|
||
const toRad = (d) => (d * Math.PI) / 180;
|
||
const R = 6371000;
|
||
const dLat = toRad(lat2 - lat1);
|
||
const dLon = toRad(lon2 - lon1);
|
||
const a = Math.sin(dLat/2)**2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon/2)**2;
|
||
return 2 * R * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||
};
|
||
|
||
// GPS filtering and snapping (defaults)
|
||
const ACCURACY_MAX_METERS = 12; // Ignore points with accuracy worse than this
|
||
const MIN_MOVE_METERS = 2.5; // Ignore points if user hasn't moved this far from last point
|
||
const TURN_MIN_DEG = 12; // Minimum heading change to record when small movement
|
||
const SNAP_METERS = 5; // Snap to starting point when within this distance
|
||
|
||
// Compute bearing between two lat/lng points (degrees)
|
||
const bearingDeg = (a, b) => {
|
||
const toRad = (d) => (d * Math.PI) / 180;
|
||
const toDeg = (r) => (r * 180) / Math.PI;
|
||
const lat1 = toRad(a[0]);
|
||
const lat2 = toRad(b[0]);
|
||
const dLng = toRad(b[1] - a[1]);
|
||
const y = Math.sin(dLng) * Math.cos(lat2);
|
||
const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLng);
|
||
const brg = (toDeg(Math.atan2(y, x)) + 360) % 360;
|
||
return brg;
|
||
};
|
||
|
||
// Maintain a short buffer of samples; return averaged lat/lng of best by accuracy
|
||
const addSampleAndSmooth = (lat, lng, accuracy) => {
|
||
const now = Date.now();
|
||
setGpsSamples((prev) => [...prev, { lat, lng, accuracy: accuracy ?? 999, t: now }].slice(-12));
|
||
const pool = [...gpsSamples, { lat, lng, accuracy: accuracy ?? 999, t: now }].slice(-12);
|
||
const top = pool
|
||
.filter((s) => s.accuracy != null)
|
||
.sort((a, b) => a.accuracy - b.accuracy)
|
||
.slice(0, Math.min(5, pool.length));
|
||
if (top.length === 0) return [lat, lng];
|
||
const avgLat = top.reduce((s, p) => s + p.lat, 0) / top.length;
|
||
const avgLng = top.reduce((s, p) => s + p.lng, 0) / top.length;
|
||
return [avgLat, avgLng];
|
||
};
|
||
|
||
// Get the most accurate recent sample (prefer samples within 3s)
|
||
const bestRecentSample = () => {
|
||
const now = Date.now();
|
||
const recent = gpsSamples.filter(s => (now - (s.t || 0)) <= 3000);
|
||
const pool = (recent.length ? recent : gpsSamples).slice(-12);
|
||
if (pool.length === 0) return null;
|
||
const best = pool.reduce((b, s) => (s.accuracy < (b?.accuracy ?? Infinity) ? s : b), null);
|
||
return best ? [best.lat, best.lng, best.accuracy] : null;
|
||
};
|
||
|
||
const acceptAndNormalizePoint = (lat, lng, accuracy, currentPoints) => {
|
||
if (accuracy != null && accuracy > ACCURACY_MAX_METERS) {
|
||
toast("GPS accuracy too low (" + Math.round(accuracy) + "m). Waiting for better fix…");
|
||
return null;
|
||
}
|
||
// Movement threshold
|
||
if (currentPoints.length > 0) {
|
||
const [llat, llng] = currentPoints[currentPoints.length - 1];
|
||
const moved = haversine(llat, llng, lat, lng);
|
||
if (moved < MIN_MOVE_METERS) {
|
||
// Allow small move only if heading changed sufficiently vs previous segment
|
||
if (currentPoints.length >= 2) {
|
||
const prevHead = bearingDeg(currentPoints[currentPoints.length - 2], [llat, llng]);
|
||
const candHead = bearingDeg([llat, llng], [lat, lng]);
|
||
let diff = Math.abs(prevHead - candHead);
|
||
if (diff > 180) diff = 360 - diff;
|
||
if (diff < TURN_MIN_DEG) return null;
|
||
} else {
|
||
return null;
|
||
}
|
||
}
|
||
}
|
||
// Snap to starting point if near
|
||
if (currentPoints.length >= 2) {
|
||
const [slat, slng] = currentPoints[0];
|
||
const dStart = haversine(slat, slng, lat, lng);
|
||
if (dStart <= SNAP_METERS) {
|
||
return [slat, slng];
|
||
}
|
||
}
|
||
return [lat, lng];
|
||
};
|
||
|
||
// GPS point collection (mark-at-location)
|
||
const markCurrentPoint = () => {
|
||
if (!navigator.geolocation) { toast.error('GPS not available'); return; }
|
||
// Prefer most accurate recent fix from warm watch; fall back to immediate read
|
||
const candidate = bestRecentSample();
|
||
const applyFix = (lat, lng, acc) => {
|
||
setGpsAccuracy(acc || null);
|
||
setGpsTracePoints(prev => {
|
||
const normalized = acceptAndNormalizePoint(lat, lng, acc, prev);
|
||
if (prev.length >= 2) {
|
||
const [slat, slng] = prev[0];
|
||
const dStart = haversine(slat, slng, lat, lng);
|
||
setIsSnapPreview(dStart <= SNAP_METERS);
|
||
} else { setIsSnapPreview(false); }
|
||
if (!normalized) return prev; // skip
|
||
const next = [...prev, normalized];
|
||
if (next.length > 1) {
|
||
const [pl, pg] = next[next.length - 2];
|
||
setGpsDistance(d => d + haversine(pl, pg, normalized[0], normalized[1]));
|
||
}
|
||
return next;
|
||
});
|
||
};
|
||
if (candidate) {
|
||
const [lat, lng, acc] = candidate;
|
||
applyFix(lat, lng, acc);
|
||
} else {
|
||
navigator.geolocation.getCurrentPosition((pos) => {
|
||
const { latitude, longitude, accuracy } = pos.coords;
|
||
addSampleAndSmooth(latitude, longitude, accuracy);
|
||
applyFix(latitude, longitude, accuracy);
|
||
}, (err)=>{
|
||
console.warn('GPS error', err?.message);
|
||
toast.error('GPS error: ' + (err?.message || 'unknown'));
|
||
}, { enableHighAccuracy: true, maximumAge: 500, timeout: 8000 });
|
||
}
|
||
};
|
||
|
||
const undoLastPoint = () => {
|
||
setGpsTracePoints(prev => {
|
||
if (prev.length <= 0) return prev;
|
||
const next = prev.slice(0, -1);
|
||
// Recompute distance
|
||
let dist = 0;
|
||
for (let i=1;i<next.length;i++) dist += haversine(next[i-1][0], next[i-1][1], next[i][0], next[i][1]);
|
||
setGpsDistance(dist);
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const clearGpsPoints = () => {
|
||
setGpsTracePoints([]);
|
||
setGpsDistance(0);
|
||
setGpsAccuracy(null);
|
||
// Stop passive watch if running (used for Points mode warmup)
|
||
if (gpsWatchId) { navigator.geolocation.clearWatch(gpsWatchId); setGpsWatchId(null); }
|
||
};
|
||
|
||
const completeTracing = () => {
|
||
if (gpsTracePoints.length < 3) { toast.error('Need at least 3 points to create an area'); return; }
|
||
// Close polygon by ensuring first == last handled in save
|
||
handlePolygonComplete(gpsTracePoints);
|
||
setIsGPSTraceMode(false);
|
||
setIsGPSPointsMode(false);
|
||
clearGpsPoints();
|
||
};
|
||
|
||
const saveLawnSection = async () => {
|
||
if (!sectionName.trim()) {
|
||
toast.error('Please enter a section name');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// Ensure closed ring and recompute area
|
||
let coords = pendingSection.coordinates || [];
|
||
if (coords.length >= 3) {
|
||
const [f0, f1] = coords[0] || [];
|
||
const [l0, l1] = coords[coords.length - 1] || [];
|
||
if (f0 !== l0 || f1 !== l1) coords = [...coords, coords[0]];
|
||
}
|
||
if (coords.length < 4) { toast.error('Polygon invalid: need at least 3 unique points'); return; }
|
||
const recomputedArea = calculateAreaInSqFt(coords);
|
||
if (!recomputedArea || recomputedArea <= 0) { toast.error('Polygon area is zero — adjust points'); return; }
|
||
|
||
const sectionData = {
|
||
name: sectionName,
|
||
area: recomputedArea,
|
||
polygonData: {
|
||
coordinates: [coords],
|
||
color: pendingSection.color
|
||
},
|
||
grassType: sectionGrassTypes.join(', '),
|
||
grassTypes: sectionGrassTypes,
|
||
soilType: null,
|
||
captureMethod: isGPSPointsMode ? 'gps_points' : (isGPSTraceMode ? 'gps_trace' : 'tap'),
|
||
captureMeta: {
|
||
accuracyLast: gpsAccuracy,
|
||
totalDistanceMeters: gpsDistance,
|
||
pointsCount: pendingSection.coordinates?.length || 0
|
||
}
|
||
};
|
||
|
||
const response = await propertiesAPI.createSection(id, sectionData);
|
||
const savedSection = response.data.data.section;
|
||
// Convert backend format to frontend format; parse polygonData if string
|
||
const poly = typeof savedSection.polygonData === 'string' ? JSON.parse(savedSection.polygonData) : savedSection.polygonData;
|
||
const ring = Array.isArray(poly?.coordinates?.[0]) ? poly.coordinates[0] : [];
|
||
const coordsNorm = ring.map(pt => [Number(pt[0]), Number(pt[1])]);
|
||
const colorRaw = poly?.color;
|
||
const colorNorm = (colorRaw && typeof colorRaw === 'object' && 'value' in colorRaw)
|
||
? colorRaw
|
||
: (typeof colorRaw === 'string' ? { name: 'Custom', value: colorRaw } : currentColor);
|
||
const newSection = {
|
||
id: savedSection.id,
|
||
name: savedSection.name,
|
||
coordinates: coordsNorm,
|
||
color: colorNorm,
|
||
area: savedSection.area,
|
||
grassType: savedSection.grassType || '',
|
||
grassTypes: savedSection.grassTypes || []
|
||
};
|
||
|
||
setLawnSections(prev => [...prev, newSection]);
|
||
toast.success(`${sectionName} section created and saved!`);
|
||
|
||
// Reset and cycle color
|
||
setSectionName('');
|
||
setSectionGrassTypes([]);
|
||
setPendingSection(null);
|
||
setShowNameModal(false);
|
||
const nextIndex = (SECTION_COLORS.findIndex(c => c.value === currentColor.value) + 1) % SECTION_COLORS.length;
|
||
setCurrentColor(SECTION_COLORS[nextIndex]);
|
||
} catch (error) {
|
||
console.error('Failed to save section:', error);
|
||
toast.error(error?.response?.data?.message || error?.message || 'Failed to save section. Please try again.');
|
||
}
|
||
};
|
||
|
||
const deleteLawnSection = async (sectionId) => {
|
||
if (window.confirm('Delete this lawn section?')) {
|
||
try {
|
||
await propertiesAPI.deleteSection(id, sectionId);
|
||
setLawnSections(prev => prev.filter(s => s.id !== sectionId));
|
||
toast.success('Section deleted');
|
||
} catch (error) {
|
||
console.error('Failed to delete section:', error);
|
||
toast.error('Failed to delete section. Please try again.');
|
||
}
|
||
}
|
||
};
|
||
|
||
const startEditSection = (section) => {
|
||
setEditingSection(section);
|
||
setSectionName(section.name);
|
||
setCurrentColor(section.color);
|
||
setShowEditModal(true);
|
||
const existing = (section.grassType || '').split(',').map(s=>s.trim()).filter(Boolean);
|
||
setEditGrassTypes(existing);
|
||
};
|
||
|
||
const saveEditedSection = async () => {
|
||
if (!sectionName.trim()) {
|
||
toast.error('Please enter a section name');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const sectionData = {
|
||
name: sectionName,
|
||
area: editingSection.area,
|
||
polygonData: {
|
||
coordinates: [editingSection.coordinates],
|
||
color: currentColor
|
||
},
|
||
grassType: editGrassTypes.join(', '),
|
||
grassTypes: editGrassTypes,
|
||
soilType: null
|
||
};
|
||
|
||
await propertiesAPI.updateSection(id, editingSection.id, sectionData);
|
||
|
||
const updatedSection = {
|
||
...editingSection,
|
||
name: sectionName,
|
||
color: currentColor,
|
||
grassType: editGrassTypes.join(', '),
|
||
grassTypes: [...editGrassTypes]
|
||
};
|
||
|
||
setLawnSections(prev => prev.map(s => s.id === editingSection.id ? updatedSection : s));
|
||
toast.success('Section updated and saved!');
|
||
|
||
// Reset
|
||
setSectionName('');
|
||
setEditingSection(null);
|
||
setShowEditModal(false);
|
||
setEditGrassTypes([]);
|
||
} catch (error) {
|
||
console.error('Failed to update section:', error);
|
||
toast.error('Failed to update section. Please try again.');
|
||
}
|
||
};
|
||
|
||
const updateSection = async (sectionId, updatedSection) => {
|
||
try {
|
||
const sectionData = {
|
||
name: updatedSection.name,
|
||
area: updatedSection.area,
|
||
polygonData: {
|
||
coordinates: [updatedSection.coordinates],
|
||
color: updatedSection.color
|
||
},
|
||
grassType: (updatedSection.grassType || ''),
|
||
grassTypes: (updatedSection.grassTypes || null),
|
||
soilType: null
|
||
};
|
||
|
||
await propertiesAPI.updateSection(id, sectionId, sectionData);
|
||
setLawnSections(prev => prev.map(s => s.id === sectionId ? updatedSection : s));
|
||
} catch (error) {
|
||
console.error('Failed to update section coordinates:', error);
|
||
toast.error('Failed to save polygon changes. Please try again.');
|
||
}
|
||
};
|
||
|
||
const getTotalArea = () => {
|
||
return lawnSections.reduce((total, section) => total + section.area, 0);
|
||
};
|
||
|
||
// History helpers
|
||
const getApplicationType = (app) => {
|
||
if (!app.productDetails || app.productDetails.length === 0) return null;
|
||
return app.productDetails[0].type;
|
||
};
|
||
|
||
const calculateCoverage = (application, log) => {
|
||
if (!log?.gpsTrack?.points && !log?.gps_track?.points) return 0;
|
||
const storedMeters = typeof (log.gpsTrack?.totalDistance || log.gps_track?.totalDistance) === 'number' ? (log.gpsTrack?.totalDistance || log.gps_track?.totalDistance) : 0;
|
||
const totalDistanceFeet = storedMeters * 3.28084;
|
||
const plannedArea = application.totalSectionArea || application.total_section_area || 0;
|
||
if (totalDistanceFeet === 0 || plannedArea === 0) return 0;
|
||
let equipmentWidth = 4;
|
||
const equipmentName = (application.equipmentName || '').toLowerCase();
|
||
if (equipmentName.includes('spreader')) equipmentWidth = 12;
|
||
else if (equipmentName.includes('sprayer')) equipmentWidth = 20;
|
||
else if (equipmentName.includes('mower')) equipmentWidth = 6;
|
||
const theoreticalCoverageArea = totalDistanceFeet * equipmentWidth;
|
||
return Math.min(Math.round((theoreticalCoverageArea / plannedArea) * 100), 100);
|
||
};
|
||
|
||
const calculateMowingCoverage = (log) => {
|
||
const meters = (log.total_distance_meters || log.gpsTrack?.totalDistance || log.gps_track?.totalDistance || 0) || 0;
|
||
const totalDistanceFeet = meters * 3.28084;
|
||
const plannedArea = Number(log.total_area || 0);
|
||
const widthInches = parseFloat(log.cutting_width_inches || 0);
|
||
const widthFeet = isNaN(widthInches) ? 0 : (widthInches / 12);
|
||
if (totalDistanceFeet === 0 || plannedArea === 0 || widthFeet === 0) return 0;
|
||
const theoreticalCoverageArea = totalDistanceFeet * widthFeet;
|
||
return Math.min(100, Math.round((theoreticalCoverageArea / plannedArea) * 100));
|
||
};
|
||
|
||
const unifiedHistory = (() => {
|
||
const apps = (completedApplications||[]).map((application) => {
|
||
const log = applicationLogs.find((l) => l.planId === application.id);
|
||
const dateStr = log?.applicationDate || application.plannedDate || application.updatedAt || application.createdAt;
|
||
const date = dateStr ? new Date(dateStr) : new Date(0);
|
||
return { kind: 'application', date, application, log };
|
||
});
|
||
const mows = (mowingLogs||[]).map((log) => {
|
||
const dateStr = log.session_date || log.created_at;
|
||
const date = dateStr ? new Date(dateStr) : new Date(0);
|
||
return { kind: 'mowing', date, log };
|
||
});
|
||
const items = [...apps, ...mows];
|
||
items.sort((a,b)=> b.date - a.date);
|
||
return items.slice(0, 10);
|
||
})();
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="p-6">
|
||
<div className="flex justify-center items-center h-64">
|
||
<LoadingSpinner size="lg" />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!property) {
|
||
return (
|
||
<div className="p-6">
|
||
<div className="card text-center py-12">
|
||
<h3 className="text-lg font-medium text-gray-900 mb-2">Property Not Found</h3>
|
||
<button onClick={() => navigate('/properties')} className="btn-primary">
|
||
Back to Properties
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// Validate coordinates and provide fallbacks
|
||
const hasValidCoordinates = property &&
|
||
property.latitude !== undefined &&
|
||
property.longitude !== undefined &&
|
||
property.latitude !== null &&
|
||
property.longitude !== null &&
|
||
!isNaN(property.latitude) &&
|
||
!isNaN(property.longitude);
|
||
|
||
const mapCenter = hasValidCoordinates
|
||
? [property.latitude, property.longitude]
|
||
: [40.7128, -74.0060]; // Default to NYC
|
||
|
||
return (
|
||
<div className="p-6">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between mb-6">
|
||
<div className="flex items-center gap-4">
|
||
<button
|
||
onClick={() => navigate('/properties')}
|
||
className="p-2 hover:bg-gray-100 rounded-lg"
|
||
>
|
||
<ArrowLeftIcon className="h-5 w-5" />
|
||
</button>
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-gray-900">{property.name}</h1>
|
||
<p className="text-gray-600 flex items-center gap-1">
|
||
<MapPinIcon className="h-4 w-4" />
|
||
{property.address || 'No address specified'}
|
||
</p>
|
||
{!hasValidCoordinates && (
|
||
<p className="text-red-600 text-sm">⚠️ Property coordinates not set - using default location</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="relative">
|
||
<button
|
||
onClick={() => setShowCaptureModeModal(true)}
|
||
className="btn-primary flex items-center gap-2"
|
||
title="Add a lawn section"
|
||
>
|
||
<PlusIcon className="h-5 w-5" />
|
||
Add Lawn Section
|
||
</button>
|
||
{/* Dropdown removed in favor of modal for reliability */}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||
{/* Map */}
|
||
<div className="lg:col-span-3">
|
||
<div className="card p-0 overflow-hidden">
|
||
<div style={{ height: '600px', width: '100%' }}>
|
||
<MapContainer
|
||
center={mapCenter}
|
||
zoom={hasValidCoordinates ? 18 : 13}
|
||
maxZoom={19}
|
||
style={{ height: '100%', width: '100%' }}
|
||
>
|
||
<TileLayer
|
||
attribution='© <a href="https://www.esri.com/">Esri</a>'
|
||
url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
|
||
maxZoom={19}
|
||
/>
|
||
|
||
{hasValidCoordinates && (
|
||
<Marker position={mapCenter}>
|
||
<Popup>{property.name}</Popup>
|
||
</Marker>
|
||
)}
|
||
|
||
{lawnSections.map((section) => (
|
||
<EditablePolygon
|
||
key={section.id}
|
||
section={section}
|
||
onUpdate={updateSection}
|
||
onEdit={startEditSection}
|
||
onDelete={deleteLawnSection}
|
||
/>
|
||
))}
|
||
|
||
{isDrawing && (
|
||
<PolygonDrawer
|
||
isDrawing={isDrawing}
|
||
onPolygonComplete={handlePolygonComplete}
|
||
currentColor={currentColor}
|
||
/>
|
||
)}
|
||
{/* GPS trace overlays */}
|
||
{(isGPSPointsMode || isGPSTraceMode) && gpsTracePoints.length > 0 && (
|
||
<>
|
||
<Polyline positions={gpsTracePoints} pathOptions={{ color: '#2563eb', weight: 3 }} />
|
||
{gpsTracePoints.map((p, i) => (
|
||
<Marker
|
||
key={`g${i}`}
|
||
position={p}
|
||
icon={new Icon({
|
||
iconUrl: 'data:image/svg+xml;base64,' + btoa(`
|
||
<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
|
||
${i===0 && isSnapPreview ? '<circle cx="7" cy="7" r="6" fill="#fde68a" stroke="#f59e0b" stroke-width="2"/>' : '<circle cx="7" cy="7" r="6" fill="#2563eb" stroke="white" stroke-width="2"/>'}
|
||
</svg>
|
||
`),
|
||
iconSize: [14,14], iconAnchor: [7,7]
|
||
})}
|
||
/>
|
||
))}
|
||
</>
|
||
)}
|
||
</MapContainer>
|
||
</div>
|
||
|
||
{isDrawing && (
|
||
<div className="p-4 bg-blue-50 border-t">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-3 h-3 bg-blue-600 rounded-full animate-pulse"></div>
|
||
<p className="text-sm text-blue-800">
|
||
<strong>Drawing Mode Active:</strong> Click to add points. Double-click to complete polygon.
|
||
</p>
|
||
</div>
|
||
<p className="text-xs text-blue-600 mt-1">
|
||
Need at least 3 points to create a section. Press ESC to cancel.
|
||
</p>
|
||
<p className="text-xs text-blue-500 mt-1">
|
||
💡 After creating: Click any polygon to edit its points by dragging
|
||
</p>
|
||
</div>
|
||
)}
|
||
{isGPSPointsMode && (
|
||
<div className="p-4 bg-green-50 border-t">
|
||
<div className="flex flex-wrap items-center gap-3 text-sm text-green-900">
|
||
<span className="font-semibold">GPS Points Mode</span>
|
||
<span>Points: {gpsTracePoints.length}</span>
|
||
<span>Distance: {(gpsDistance * 3.28084).toFixed(0)} ft</span>
|
||
{gpsAccuracy != null && <span>Accuracy: ±{Math.round(gpsAccuracy)} m</span>}
|
||
</div>
|
||
<div className="mt-3 flex gap-2 items-center">
|
||
<button className="btn-primary" onClick={markCurrentPoint}>Mark Point</button>
|
||
<button className="btn-secondary" onClick={undoLastPoint} disabled={gpsTracePoints.length===0}>Undo</button>
|
||
<button className="btn-secondary" onClick={clearGpsPoints} disabled={gpsTracePoints.length===0}>Clear</button>
|
||
<button className="btn-primary" onClick={completeTracing} disabled={gpsTracePoints.length < 3}>Complete Boundary</button>
|
||
{isSnapPreview && <span className="text-xs text-amber-700 bg-amber-100 px-2 py-1 rounded">Snap to start available</span>}
|
||
</div>
|
||
<p className="text-xs text-green-700 mt-2">Walk to each corner, tap Mark Point, then Complete. You can refine points afterward.</p>
|
||
</div>
|
||
)}
|
||
{isGPSTraceMode && (
|
||
<div className="p-4 bg-green-50 border-t">
|
||
<div className="flex flex-wrap items-center gap-3 text-sm text-green-900">
|
||
<span className="font-semibold">Trace Mode</span>
|
||
<span>Points: {gpsTracePoints.length}</span>
|
||
<span>Distance: {(gpsDistance * 3.28084).toFixed(0)} ft</span>
|
||
{gpsAccuracy != null && <span>Accuracy: ±{Math.round(gpsAccuracy)} m</span>}
|
||
</div>
|
||
<div className="mt-3 flex gap-2 items-center">
|
||
{!isTracing ? (
|
||
<button className="btn-primary" onClick={() => {
|
||
if (!navigator.geolocation) { toast.error('GPS not available'); return; }
|
||
const id = navigator.geolocation.watchPosition((pos) => {
|
||
const { latitude, longitude, accuracy } = pos.coords;
|
||
setGpsAccuracy(accuracy || null);
|
||
setGpsTracePoints(prev => {
|
||
const [sLat, sLng] = addSampleAndSmooth(latitude, longitude, accuracy);
|
||
const normalized = acceptAndNormalizePoint(sLat, sLng, accuracy, prev);
|
||
if (prev.length >= 2) {
|
||
const [slat, slng] = prev[0];
|
||
const dStart = haversine(slat, slng, sLat, sLng);
|
||
setIsSnapPreview(dStart <= SNAP_METERS);
|
||
} else { setIsSnapPreview(false); }
|
||
if (!normalized) return prev;
|
||
const next = [...prev, normalized];
|
||
if (next.length > 1) {
|
||
const [pl, pg] = next[next.length - 2];
|
||
setGpsDistance(d => d + haversine(pl, pg, normalized[0], normalized[1]));
|
||
}
|
||
return next;
|
||
});
|
||
}, (err)=>{
|
||
console.warn('GPS error', err?.message);
|
||
toast.error('GPS error: ' + (err?.message || 'unknown'));
|
||
}, { enableHighAccuracy: true, maximumAge: 1000, timeout: 10000 });
|
||
setGpsWatchId(id);
|
||
setIsTracing(true);
|
||
}}>Start</button>
|
||
) : (
|
||
<button className="btn-secondary" onClick={() => {
|
||
if (gpsWatchId) { navigator.geolocation.clearWatch(gpsWatchId); setGpsWatchId(null); }
|
||
setIsTracing(false);
|
||
}}>Pause</button>
|
||
)}
|
||
<button className="btn-secondary" onClick={() => { if (gpsWatchId) { navigator.geolocation.clearWatch(gpsWatchId); setGpsWatchId(null);} setIsTracing(false); clearGpsPoints(); }} disabled={gpsTracePoints.length===0}>Clear</button>
|
||
<button className="btn-primary" onClick={completeTracing} disabled={gpsTracePoints.length < 3}>Complete Boundary</button>
|
||
{isSnapPreview && <span className="text-xs text-amber-700 bg-amber-100 px-2 py-1 rounded">Snap to start available</span>}
|
||
</div>
|
||
<p className="text-xs text-green-700 mt-2">Walk the boundary to trace it. Pause as needed, then Complete to create the area.</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sidebar */}
|
||
<div className="space-y-6">
|
||
{/* Color Selector */}
|
||
{isDrawing && (
|
||
<div className="card">
|
||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||
<SwatchIcon className="h-5 w-5" />
|
||
Section Color
|
||
</h3>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
{SECTION_COLORS.map((color) => (
|
||
<button
|
||
key={color.value}
|
||
onClick={() => setCurrentColor(color)}
|
||
className={`w-10 h-10 rounded border-2 ${
|
||
currentColor.value === color.value ? 'border-gray-900' : 'border-gray-300'
|
||
}`}
|
||
style={{ backgroundColor: color.value }}
|
||
title={color.name}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Property Summary */}
|
||
<div className="card">
|
||
<h3 className="text-lg font-semibold mb-4">Property Summary</h3>
|
||
<div className="space-y-2 text-sm">
|
||
<div className="flex justify-between">
|
||
<span className="text-gray-600">Total Sections:</span>
|
||
<span className="font-medium">{lawnSections.length}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-gray-600">Total Area:</span>
|
||
<span className="font-medium">{getTotalArea().toLocaleString()} sq ft</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Lawn Sections */}
|
||
<div className="card">
|
||
<h3 className="text-lg font-semibold mb-4">Lawn Sections</h3>
|
||
{lawnSections.length === 0 ? (
|
||
<p className="text-gray-500 text-sm">No sections yet.</p>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{lawnSections.map((section) => (
|
||
<div key={section.id} className="flex items-center justify-between p-2 bg-gray-50 rounded">
|
||
<div className="flex items-center gap-2">
|
||
<div
|
||
className="w-4 h-4 rounded"
|
||
style={{ backgroundColor: section.color.value }}
|
||
/>
|
||
<div>
|
||
<p className="font-medium text-sm">{section.name}</p>
|
||
<p className="text-xs text-gray-600">{section.area.toLocaleString()} sq ft</p>
|
||
{(section.grassTypes && section.grassTypes.length > 0) || section.grassType ? (
|
||
<div className="flex flex-wrap gap-1 mt-1">
|
||
{((section.grassTypes && section.grassTypes.length > 0) ? section.grassTypes : (section.grassType||'').split(',').map(s=>s.trim()).filter(Boolean)).map((g, idx)=>(
|
||
<span key={idx} className="px-1.5 py-0.5 bg-green-100 text-green-800 rounded text-[10px]">{g}</span>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-1">
|
||
<button
|
||
onClick={() => startEditSection(section)}
|
||
className="text-blue-600 hover:text-blue-800"
|
||
>
|
||
<PencilIcon className="h-4 w-4" />
|
||
</button>
|
||
<button
|
||
onClick={() => deleteLawnSection(section.id)}
|
||
className="text-red-600 hover:text-red-800"
|
||
>
|
||
<TrashIcon className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Capture Mode Modal */}
|
||
{showCaptureModeModal && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" style={{ zIndex: 9999 }}>
|
||
<div className="bg-white rounded-lg p-6 w-96 max-w-[92vw] shadow-2xl">
|
||
<h3 className="text-lg font-semibold mb-4">Create Lawn Section</h3>
|
||
<div className="space-y-3">
|
||
<button
|
||
className="w-full px-4 py-3 border rounded hover:bg-gray-50 text-left"
|
||
onClick={() => {
|
||
setShowCaptureModeModal(false);
|
||
setIsDrawing(true);
|
||
setIsGPSPointsMode(false);
|
||
setIsGPSTraceMode(false);
|
||
}}
|
||
>
|
||
<div className="font-medium">Tap to Draw (manual)</div>
|
||
<div className="text-xs text-gray-600">Tap the map to add corners, double‑tap to finish.</div>
|
||
</button>
|
||
<button
|
||
className="w-full px-4 py-3 border rounded hover:bg-gray-50 text-left"
|
||
onClick={() => {
|
||
setShowCaptureModeModal(false);
|
||
setIsGPSTraceMode(false);
|
||
setIsTracing(false);
|
||
if (gpsWatchId) { navigator.geolocation.clearWatch(gpsWatchId); setGpsWatchId(null); }
|
||
clearGpsPoints();
|
||
setIsGPSPointsMode(true);
|
||
// Start passive GPS watch to warm up accuracy for Points mode
|
||
if (navigator.geolocation) {
|
||
const id = navigator.geolocation.watchPosition((pos)=>{
|
||
const { latitude, longitude, accuracy } = pos.coords;
|
||
setGpsAccuracy(accuracy || null);
|
||
// Populate smoothing buffer without adding a point yet
|
||
try { addSampleAndSmooth(latitude, longitude, accuracy); } catch {}
|
||
}, (err)=>{
|
||
console.warn('GPS warmup error', err?.message);
|
||
}, { enableHighAccuracy: true, maximumAge: 1000, timeout: 15000 });
|
||
setGpsWatchId(id);
|
||
}
|
||
}}
|
||
>
|
||
<div className="font-medium">GPS Points (walk and mark)</div>
|
||
<div className="text-xs text-gray-600">Walk to each corner and tap “Mark Point”, then Complete.</div>
|
||
</button>
|
||
<button
|
||
className="w-full px-4 py-3 border rounded hover:bg-gray-50 text-left"
|
||
onClick={() => {
|
||
setShowCaptureModeModal(false);
|
||
setIsGPSPointsMode(false);
|
||
clearGpsPoints();
|
||
setIsGPSTraceMode(true);
|
||
}}
|
||
>
|
||
<div className="font-medium">Trace Boundary (continuous)</div>
|
||
<div className="text-xs text-gray-600">Start tracing and walk the perimeter. Pause as needed, then Complete.</div>
|
||
</button>
|
||
</div>
|
||
<div className="mt-4 flex justify-end">
|
||
<button className="btn-secondary" onClick={() => setShowCaptureModeModal(false)}>Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Recent History */}
|
||
<div className="mt-8">
|
||
<h2 className="text-lg font-semibold mb-3">Recent History</h2>
|
||
{historyLoading ? (
|
||
<div className="card p-4"><div className="text-gray-600">Loading…</div></div>
|
||
) : unifiedHistory.length === 0 ? (
|
||
<div className="card p-4 text-gray-600">No history yet for this property.</div>
|
||
) : (
|
||
<div className="grid gap-4">
|
||
{unifiedHistory.map((item) => {
|
||
if (item.kind === 'application') {
|
||
const application = item.application; const log = item.log;
|
||
return (
|
||
<div key={`app-${application.id}`} className="bg-white p-6 rounded-lg shadow">
|
||
<div className="flex justify-between items-start">
|
||
<div className="flex-1">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div className="flex items-center gap-2">
|
||
<h3 className="text-lg font-semibold text-gray-900">{application.propertyName} - {application.sectionNames}</h3>
|
||
<span className="px-2 py-0.5 text-xs rounded-full bg-indigo-100 text-indigo-800">Application</span>
|
||
</div>
|
||
<span className={`px-3 py-1 text-sm font-medium rounded-full ${application.status==='archived'?'bg-gray-100 text-gray-800':'bg-green-100 text-green-800'}`}>{application.status==='archived'?'Archived':'Completed'}</span>
|
||
</div>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||
<div className="flex items-center text-sm text-gray-600"><CalendarIcon className="h-4 w-4 mr-2" />{new Date(item.date).toLocaleString()}</div>
|
||
<div className="flex items-center text-sm text-gray-600"><MapPinIcon className="h-4 w-4 mr-2" />{application.propertyName}</div>
|
||
<div className="flex items-center text-sm text-gray-600"><WrenchScrewdriverIcon className="h-4 w-4 mr-2" />{application.equipmentName}</div>
|
||
</div>
|
||
{log?.gpsTrack && (
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 mb-4">
|
||
<div className="bg-blue-50 p-2 rounded text-center">
|
||
<div className="text-xs text-blue-600 font-medium">Duration</div>
|
||
<div className="text-sm font-bold text-blue-900">{Math.round((log.gpsTrack?.duration||0)/60)} min</div>
|
||
</div>
|
||
<div className="bg-green-50 p-2 rounded text-center">
|
||
<div className="text-xs text-green-600 font-medium">GPS Points</div>
|
||
<div className="text-sm font-bold text-green-900">{log.gpsTrack?.points?.length || 0}</div>
|
||
</div>
|
||
<div className="bg-purple-50 p-2 rounded text-center">
|
||
<div className="text-xs text-purple-600 font-medium">Distance</div>
|
||
<div className="text-sm font-bold text-purple-900">{Math.round(log.gpsTrack?.totalDistance||0)} ft</div>
|
||
</div>
|
||
<div className="bg-orange-50 p-2 rounded text-center">
|
||
<div className="text-xs text-orange-600 font-medium">Coverage</div>
|
||
<div className="text-sm font-bold text-orange-900">{calculateCoverage(application, log)}%</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<button onClick={()=> setViewingApplication(application)} className="p-2 text-indigo-600 hover:text-indigo-800 hover:bg-indigo-50 rounded" title="View details"><EyeIcon className="h-5 w-5" /></button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
const log = item.log;
|
||
const durationMin = Math.round((log.duration_seconds || log.durationSeconds || log.gpsTrack?.duration || log.gps_track?.duration || 0)/60);
|
||
const distFeet = Math.round(((log.total_distance_meters || log.gpsTrack?.totalDistance || log.gps_track?.totalDistance || 0)*3.28084)||0);
|
||
return (
|
||
<div key={`mow-${log.id}`} className="bg-white p-6 rounded-lg shadow">
|
||
<div className="flex justify-between items-start">
|
||
<div className="flex-1">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div className="flex items-center gap-2">
|
||
<h3 className="text-lg font-semibold text-gray-900">{log.property_name} - {log.section_names}</h3>
|
||
<span className="px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-800">Mowing</span>
|
||
</div>
|
||
<span className="px-3 py-1 text-sm font-medium rounded-full bg-green-100 text-green-800">Completed</span>
|
||
</div>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||
<div className="flex items-center text-sm text-gray-600"><CalendarIcon className="h-4 w-4 mr-2" />{new Date(item.date).toLocaleString()}</div>
|
||
<div className="flex items-center text-sm text-gray-600"><MapPinIcon className="h-4 w-4 mr-2" />{log.property_name}</div>
|
||
<div className="flex items-center text-sm text-gray-600"><WrenchScrewdriverIcon className="h-4 w-4 mr-2" />{log.equipment_name || 'Mower'}</div>
|
||
</div>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 mb-4">
|
||
<div className="bg-blue-50 p-2 rounded text-center"><div className="text-xs text-blue-600 font-medium">Duration</div><div className="text-sm font-bold text-blue-900">{durationMin} min</div></div>
|
||
<div className="bg-green-50 p-2 rounded text-center"><div className="text-xs text-green-600 font-medium">GPS Points</div><div className="text-sm font-bold text-green-900">{log.gpsTrack?.points?.length || log.gps_track?.points?.length || 0}</div></div>
|
||
<div className="bg-purple-50 p-2 rounded text-center"><div className="text-xs text-purple-600 font-medium">Distance</div><div className="text-sm font-bold text-purple-900">{distFeet} ft</div></div>
|
||
<div className="bg-orange-50 p-2 rounded text-center"><div className="text-xs text-orange-600 font-medium">Coverage</div><div className="text-sm font-bold text-orange-900">{calculateMowingCoverage(log)}%</div></div>
|
||
</div>
|
||
</div>
|
||
<button onClick={()=> setViewingMowingSession(log)} className="p-2 text-indigo-600 hover:text-indigo-800 hover:bg-indigo-50 rounded" title="View mowing session"><EyeIcon className="h-5 w-5" /></button>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Name Modal */}
|
||
{showNameModal && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" style={{ zIndex: 9999 }}>
|
||
<div className="bg-white rounded-lg p-6 w-96 shadow-2xl">
|
||
<h3 className="text-lg font-semibold mb-4">Name Your Lawn Section</h3>
|
||
<div className="space-y-4">
|
||
<input
|
||
type="text"
|
||
className="input"
|
||
value={sectionName}
|
||
onChange={(e) => setSectionName(e.target.value)}
|
||
placeholder="e.g., Front Yard, Back Lawn"
|
||
autoFocus
|
||
/>
|
||
<div className="flex items-center gap-2 text-sm">
|
||
<div
|
||
className="w-4 h-4 rounded"
|
||
style={{ backgroundColor: pendingSection?.color.value }}
|
||
/>
|
||
<span>{pendingSection?.area.toLocaleString()} sq ft</span>
|
||
</div>
|
||
{/* Nudge controls */}
|
||
<div>
|
||
<label className="label">Adjust Position (1 ft)</label>
|
||
<div className="grid grid-cols-3 gap-2 w-40">
|
||
<div></div>
|
||
<button className="btn-secondary" onClick={() => {
|
||
setPendingSection(prev => {
|
||
if (!prev) return prev;
|
||
const lat = prev.coordinates[0][0];
|
||
const metersPerDegLat = 111320;
|
||
const dLat = (1 * 0.3048) / metersPerDegLat; // 1 ft north
|
||
const coords = prev.coordinates.map(([la, ln]) => [la + dLat, ln]);
|
||
return { ...prev, coordinates: coords };
|
||
});
|
||
}}>▲</button>
|
||
<div></div>
|
||
<button className="btn-secondary" onClick={() => {
|
||
setPendingSection(prev => {
|
||
if (!prev) return prev;
|
||
const lat = prev.coordinates[0][0];
|
||
const metersPerDegLng = 111320 * Math.cos(lat * Math.PI / 180);
|
||
const dLng = (1 * 0.3048) / metersPerDegLng; // 1 ft west
|
||
const coords = prev.coordinates.map(([la, ln]) => [la, ln - dLng]);
|
||
return { ...prev, coordinates: coords };
|
||
});
|
||
}}>◀</button>
|
||
<div></div>
|
||
<button className="btn-secondary" onClick={() => {
|
||
setPendingSection(prev => {
|
||
if (!prev) return prev;
|
||
const lat = prev.coordinates[0][0];
|
||
const metersPerDegLng = 111320 * Math.cos(lat * Math.PI / 180);
|
||
const dLng = (1 * 0.3048) / metersPerDegLng; // 1 ft east
|
||
const coords = prev.coordinates.map(([la, ln]) => [la, ln + dLng]);
|
||
return { ...prev, coordinates: coords };
|
||
});
|
||
}}>▶</button>
|
||
<div></div>
|
||
<button className="btn-secondary" onClick={() => {
|
||
setPendingSection(prev => {
|
||
if (!prev) return prev;
|
||
const dLat = (1 * 0.3048) / 111320; // 1 ft south
|
||
const coords = prev.coordinates.map(([la, ln]) => [la - dLat, ln]);
|
||
return { ...prev, coordinates: coords };
|
||
});
|
||
}}>▼</button>
|
||
<div></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="label">Grass Types</label>
|
||
<TagInput
|
||
value={sectionGrassTypes}
|
||
onChange={setSectionGrassTypes}
|
||
/>
|
||
<SuggestionChips onPick={(v)=> setSectionGrassTypes(prev=> prev.includes(v)? prev : [...prev, v])} />
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-3 mt-6">
|
||
<button onClick={saveLawnSection} className="btn-primary flex-1">
|
||
Save
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setShowNameModal(false);
|
||
setPendingSection(null);
|
||
setSectionName('');
|
||
setSectionGrassTypes([]);
|
||
}}
|
||
className="btn-secondary flex-1"
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Edit Modal */}
|
||
{showEditModal && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" style={{ zIndex: 9999 }}>
|
||
<div className="bg-white rounded-lg p-6 w-96 shadow-2xl">
|
||
<h3 className="text-lg font-semibold mb-4">Edit Lawn Section</h3>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className="label">Section Name</label>
|
||
<input
|
||
type="text"
|
||
className="input"
|
||
value={sectionName}
|
||
onChange={(e) => setSectionName(e.target.value)}
|
||
placeholder="e.g., Front Yard, Back Lawn"
|
||
autoFocus
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="label">Color</label>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
{SECTION_COLORS.map((color) => (
|
||
<button
|
||
key={color.value}
|
||
onClick={() => setCurrentColor(color)}
|
||
className={`w-10 h-10 rounded border-2 ${
|
||
currentColor.value === color.value ? 'border-gray-900' : 'border-gray-300'
|
||
}`}
|
||
style={{ backgroundColor: color.value }}
|
||
title={color.name}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="label">Grass Types</label>
|
||
<TagInput
|
||
value={editGrassTypes}
|
||
onChange={setEditGrassTypes}
|
||
/>
|
||
<SuggestionChips onPick={(v)=> setEditGrassTypes(prev=> prev.includes(v)? prev : [...prev, v])} />
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||
<div
|
||
className="w-4 h-4 rounded"
|
||
style={{ backgroundColor: currentColor.value }}
|
||
/>
|
||
<span>{editingSection?.area.toLocaleString()} sq ft</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-3 mt-6">
|
||
<button onClick={saveEditedSection} className="btn-primary flex-1">
|
||
Save Changes
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setShowEditModal(false);
|
||
setEditingSection(null);
|
||
setSectionName('');
|
||
setEditGrassTypes([]);
|
||
}}
|
||
className="btn-secondary flex-1"
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* View Modals for History */}
|
||
{viewingApplication && (
|
||
<ApplicationViewModal
|
||
application={viewingApplication}
|
||
propertyDetails={property}
|
||
onClose={() => setViewingApplication(null)}
|
||
/>
|
||
)}
|
||
{viewingMowingSession && (
|
||
<MowingSessionViewModal
|
||
session={viewingMowingSession}
|
||
onClose={() => setViewingMowingSession(null)}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default PropertyDetail;
|