property enhancements

frontend/src/pages/Properties/Properties.js

@@ -3,19 +3,13 @@ import { Link } from 'react-router-dom';
 import { PlusIcon, MapPinIcon, TrashIcon, PencilIcon } from '@heroicons/react/24/outline';
 import { propertiesAPI } from '../../services/api';
 import LoadingSpinner from '../../components/UI/LoadingSpinner';
+import PropertyForm from '../../components/Properties/PropertyForm';
 import toast from 'react-hot-toast';
 
 const Properties = () => {
   const [properties, setProperties] = useState([]);
   const [loading, setLoading] = useState(true);
   const [showCreateForm, setShowCreateForm] = useState(false);
-  const [formData, setFormData] = useState({
-    name: '',
-    address: '',
-    latitude: '',
-    longitude: '',
-    totalArea: ''
-  });
 
   useEffect(() => {
     fetchProperties();
@@ -45,24 +39,16 @@ const Properties = () => {
     }
   };
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleCreateProperty = async (propertyData) => {
     try {
-      const propertyData = {
-        ...formData,
-        latitude: formData.latitude ? parseFloat(formData.latitude) : null,
-        longitude: formData.longitude ? parseFloat(formData.longitude) : null,
-        totalArea: formData.totalArea ? parseFloat(formData.totalArea) : null
-      };
-
       await propertiesAPI.create(propertyData);
       toast.success('Property created successfully!');
       setShowCreateForm(false);
-      setFormData({ name: '', address: '', latitude: '', longitude: '', totalArea: '' });
       fetchProperties();
     } catch (error) {
       console.error('Failed to create property:', error);
       toast.error(error.response?.data?.message || 'Failed to create property');
+      throw error; // Re-throw to let the form handle it
     }
   };
 
@@ -108,82 +94,10 @@ const Properties = () => {
 
       {/* Create Property Form */}
       {showCreateForm && (
-        <div className="card mb-6">
-          <h3 className="text-lg font-semibold text-gray-900 mb-4">Add New Property</h3>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label className="label">Property Name *</label>
-                <input
-                  type="text"
-                  required
-                  className="input"
-                  value={formData.name}
-                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                  placeholder="e.g., Main Lawn, Front Yard"
-                />
-              </div>
-              <div>
-                <label className="label">Address</label>
-                <input
-                  type="text"
-                  className="input"
-                  value={formData.address}
-                  onChange={(e) => setFormData({ ...formData, address: e.target.value })}
-                  placeholder="123 Main St, City, State"
-                />
-              </div>
-              <div>
-                <label className="label">Latitude</label>
-                <input
-                  type="number"
-                  step="any"
-                  className="input"
-                  value={formData.latitude}
-                  onChange={(e) => setFormData({ ...formData, latitude: e.target.value })}
-                  placeholder="40.7128"
-                />
-              </div>
-              <div>
-                <label className="label">Longitude</label>
-                <input
-                  type="number"
-                  step="any"
-                  className="input"
-                  value={formData.longitude}
-                  onChange={(e) => setFormData({ ...formData, longitude: e.target.value })}
-                  placeholder="-74.0060"
-                />
-              </div>
-              <div>
-                <label className="label">Total Area (sq ft)</label>
-                <input
-                  type="number"
-                  step="any"
-                  className="input"
-                  value={formData.totalArea}
-                  onChange={(e) => setFormData({ ...formData, totalArea: e.target.value })}
-                  placeholder="5000"
-                />
-              </div>
-            </div>
-            <div className="flex gap-3">
-              <button type="submit" className="btn-primary">
-                Create Property
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  setShowCreateForm(false);
-                  setFormData({ name: '', address: '', latitude: '', longitude: '', totalArea: '' });
-                }}
-                className="btn-secondary"
-              >
-                Cancel
-              </button>
-            </div>
-          </form>
-        </div>
+        <PropertyForm
+          onSubmit={handleCreateProperty}
+          onCancel={() => setShowCreateForm(false)}
+        />
       )}
 
       {/* Properties List */}