Update DogForm with litter selection support

client/src/components/DogForm.jsx

@@ -13,14 +13,18 @@ function DogForm({ dog, onClose, onSave }) {
     microchip: '',
     notes: '',
     sire_id: '',
-    dam_id: ''
+    dam_id: '',
+    litter_id: ''
   })
   const [dogs, setDogs] = useState([])
+  const [litters, setLitters] = useState([])
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
+  const [useManualParents, setUseManualParents] = useState(false)
 
   useEffect(() => {
     fetchDogs()
+    fetchLitters()
     if (dog) {
       setFormData({
         name: dog.name || '',
@@ -32,8 +36,10 @@ function DogForm({ dog, onClose, onSave }) {
         microchip: dog.microchip || '',
         notes: dog.notes || '',
         sire_id: dog.sire?.id || '',
-        dam_id: dog.dam?.id || ''
+        dam_id: dog.dam?.id || '',
+        litter_id: dog.litter_id || ''
       })
+      setUseManualParents(!dog.litter_id)
     }
   }, [dog])
 
@@ -46,9 +52,31 @@ function DogForm({ dog, onClose, onSave }) {
     }
   }
 
+  const fetchLitters = async () => {
+    try {
+      const res = await axios.get('/api/litters')
+      setLitters(res.data)
+    } catch (error) {
+      console.error('Error fetching litters:', error)
+    }
+  }
+
   const handleChange = (e) => {
     const { name, value } = e.target
     setFormData(prev => ({ ...prev, [name]: value }))
+    
+    // If litter is selected, auto-populate parents
+    if (name === 'litter_id' && value) {
+      const selectedLitter = litters.find(l => l.id === parseInt(value))
+      if (selectedLitter) {
+        setFormData(prev => ({
+          ...prev,
+          sire_id: selectedLitter.sire_id,
+          dam_id: selectedLitter.dam_id,
+          breed: prev.breed || selectedLitter.sire_name?.split(' ')[0] || ''
+        }))
+      }
+    }
   }
 
   const handleSubmit = async (e) => {
@@ -57,12 +85,19 @@ function DogForm({ dog, onClose, onSave }) {
     setLoading(true)
 
     try {
+      const submitData = { ...formData }
+      
+      // Clear litter_id if using manual parent selection
+      if (useManualParents) {
+        submitData.litter_id = null
+      }
+      
       if (dog) {
         // Update existing dog
-        await axios.put(`/api/dogs/${dog.id}`, formData)
+        await axios.put(`/api/dogs/${dog.id}`, submitData)
       } else {
         // Create new dog
-        await axios.post('/api/dogs', formData)
+        await axios.post('/api/dogs', submitData)
       }
       onSave()
       onClose()
@@ -170,36 +205,84 @@ function DogForm({ dog, onClose, onSave }) {
                 onChange={handleChange}
               />
             </div>
+          </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>
+          {/* Litter or Manual Parent Selection */}
+          <div style={{ marginTop: '1.5rem', padding: '1rem', background: '#f8fafc', borderRadius: '8px' }}>
+            <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
+              <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
+                <input
+                  type="radio"
+                  checked={!useManualParents}
+                  onChange={() => setUseManualParents(false)}
+                />
+                <span>Link to Litter</span>
+              </label>
+              <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
+                <input
+                  type="radio"
+                  checked={useManualParents}
+                  onChange={() => setUseManualParents(true)}
+                />
+                <span>Manual Parent Selection</span>
+              </label>
             </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>
+            {!useManualParents ? (
+              <div className="form-group">
+                <label className="label">Litter</label>
+                <select
+                  name="litter_id"
+                  className="input"
+                  value={formData.litter_id}
+                  onChange={handleChange}
+                >
+                  <option value="">No Litter</option>
+                  {litters.map(l => (
+                    <option key={l.id} value={l.id}>
+                      {l.sire_name} x {l.dam_name} - {new Date(l.breeding_date).toLocaleDateString()}
+                    </option>
+                  ))}
+                </select>
+                {formData.litter_id && (
+                  <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#64748b' }}>
+                    Parents will be automatically set from the selected litter
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className="form-grid">
+                <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>
 
           <div className="form-group" style={{ marginTop: '1rem' }}>