client/src/components/DogForm.jsx

@@ -0,0 +1,230 @@
+import { useState, useEffect } from 'react'
+import { X } from 'lucide-react'
+import axios from 'axios'
+
+function DogForm({ dog, onClose, onSave }) {
+  const [formData, setFormData] = useState({
+    name: '',
+    registration_number: '',
+    breed: '',
+    sex: 'male',
+    birth_date: '',
+    color: '',
+    microchip: '',
+    notes: '',
+    sire_id: '',
+    dam_id: ''
+  })
+  const [dogs, setDogs] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    fetchDogs()
+    if (dog) {
+      setFormData({
+        name: dog.name || '',
+        registration_number: dog.registration_number || '',
+        breed: dog.breed || '',
+        sex: dog.sex || 'male',
+        birth_date: dog.birth_date || '',
+        color: dog.color || '',
+        microchip: dog.microchip || '',
+        notes: dog.notes || '',
+        sire_id: dog.sire?.id || '',
+        dam_id: dog.dam?.id || ''
+      })
+    }
+  }, [dog])
+
+  const fetchDogs = async () => {
+    try {
+      const res = await axios.get('/api/dogs')
+      setDogs(res.data)
+    } catch (error) {
+      console.error('Error fetching dogs:', error)
+    }
+  }
+
+  const handleChange = (e) => {
+    const { name, value } = e.target
+    setFormData(prev => ({ ...prev, [name]: value }))
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    try {
+      if (dog) {
+        // Update existing dog
+        await axios.put(`/api/dogs/${dog.id}`, formData)
+      } else {
+        // Create new dog
+        await axios.post('/api/dogs', formData)
+      }
+      onSave()
+      onClose()
+    } catch (error) {
+      setError(error.response?.data?.error || 'Failed to save dog')
+      setLoading(false)
+    }
+  }
+
+  const males = dogs.filter(d => d.sex === 'male' && d.id !== dog?.id)
+  const females = dogs.filter(d => d.sex === 'female' && d.id !== dog?.id)
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2>{dog ? 'Edit Dog' : 'Add New Dog'}</h2>
+          <button className="btn-icon" onClick={onClose}>
+            <X size={24} />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="modal-body">
+          {error && <div className="error">{error}</div>}
+
+          <div className="form-grid">
+            <div className="form-group">
+              <label className="label">Name *</label>
+              <input
+                type="text"
+                name="name"
+                className="input"
+                value={formData.name}
+                onChange={handleChange}
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label className="label">Registration Number</label>
+              <input
+                type="text"
+                name="registration_number"
+                className="input"
+                value={formData.registration_number}
+                onChange={handleChange}
+              />
+            </div>
+
+            <div className="form-group">
+              <label className="label">Breed *</label>
+              <input
+                type="text"
+                name="breed"
+                className="input"
+                value={formData.breed}
+                onChange={handleChange}
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label className="label">Sex *</label>
+              <select
+                name="sex"
+                className="input"
+                value={formData.sex}
+                onChange={handleChange}
+                required
+              >
+                <option value="male">Male</option>
+                <option value="female">Female</option>
+              </select>
+            </div>
+
+            <div className="form-group">
+              <label className="label">Birth Date</label>
+              <input
+                type="date"
+                name="birth_date"
+                className="input"
+                value={formData.birth_date}
+                onChange={handleChange}
+              />
+            </div>
+
+            <div className="form-group">
+              <label className="label">Color</label>
+              <input
+                type="text"
+                name="color"
+                className="input"
+                value={formData.color}
+                onChange={handleChange}
+              />
+            </div>
+
+            <div className="form-group">
+              <label className="label">Microchip Number</label>
+              <input
+                type="text"
+                name="microchip"
+                className="input"
+                value={formData.microchip}
+                onChange={handleChange}
+              />
+            </div>
+
+            <div className="form-group">
+              <label className="label">Sire (Father)</label>
+              <select
+                name="sire_id"
+                className="input"
+                value={formData.sire_id}
+                onChange={handleChange}
+              >
+                <option value="">Unknown</option>
+                {males.map(d => (
+                  <option key={d.id} value={d.id}>{d.name}</option>
+                ))}
+              </select>
+            </div>
+
+            <div className="form-group">
+              <label className="label">Dam (Mother)</label>
+              <select
+                name="dam_id"
+                className="input"
+                value={formData.dam_id}
+                onChange={handleChange}
+              >
+                <option value="">Unknown</option>
+                {females.map(d => (
+                  <option key={d.id} value={d.id}>{d.name}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          <div className="form-group" style={{ marginTop: '1rem' }}>
+            <label className="label">Notes</label>
+            <textarea
+              name="notes"
+              className="input"
+              rows="4"
+              value={formData.notes}
+              onChange={handleChange}
+            />
+          </div>
+
+          <div className="modal-footer">
+            <button type="button" className="btn btn-secondary" onClick={onClose} disabled={loading}>
+              Cancel
+            </button>
+            <button type="submit" className="btn btn-primary" disabled={loading}>
+              {loading ? 'Saving...' : dog ? 'Update Dog' : 'Add Dog'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default DogForm