update properties stuff

frontend/src/components/Properties/PropertyForm.js

@@ -1,8 +1,7 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from 'react-leaflet';
 import { Icon } from 'leaflet';
 import 'leaflet/dist/leaflet.css';
-import toast from 'react-hot-toast';
 
 // Fix for default markers in react-leaflet
 delete Icon.Default.prototype._getIconUrl;
@@ -14,7 +13,7 @@ Icon.Default.mergeOptions({
 
 // Component to handle map clicks and update marker position
 function LocationMarker({ position, setPosition }) {
-  const map = useMapEvents({
+  useMapEvents({
     click(e) {
       setPosition([e.latlng.lat, e.latlng.lng]);
     },

frontend/src/pages/Properties/PropertyDetail.js

@@ -92,7 +92,7 @@ const PropertyDetail = () => {
 
   useEffect(() => {
     fetchPropertyDetails();
-  }, [id]);
+  }, [id]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const fetchPropertyDetails = async () => {
     try {
@@ -180,6 +180,19 @@ const PropertyDetail = () => {
     );
   }
 
+  // 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 */}
@@ -195,8 +208,11 @@ const PropertyDetail = () => {
             <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}
+              {property.address || 'No address specified'}
             </p>
+            {!hasValidCoordinates && (
+              <p className="text-red-600 text-sm">⚠️ Property coordinates not set - using default location</p>
+            )}
           </div>
         </div>
         <button
@@ -214,8 +230,8 @@ const PropertyDetail = () => {
           <div className="card p-0 overflow-hidden">
             <div style={{ height: '600px', width: '100%' }}>
               <MapContainer
-                center={[property.latitude, property.longitude]}
+                center={mapCenter}
-                zoom={19}
+                zoom={hasValidCoordinates ? 19 : 13}
                 style={{ height: '100%', width: '100%' }}
               >
                 <TileLayer
@@ -223,9 +239,11 @@ const PropertyDetail = () => {
                   url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
                 />
                 
-                <Marker position={[property.latitude, property.longitude]}>
+                {hasValidCoordinates && (
+                  <Marker position={mapCenter}>
                     <Popup>{property.name}</Popup>
                   </Marker>
+                )}
 
                 {lawnSections.map((section) => (
                   <Polygon