Add LitterForm component for litter management

client/src/components/LitterForm.jsx

@@ -0,0 +1,178 @@
+import { useState, useEffect } from 'react'
+import { X } from 'lucide-react'
+import axios from 'axios'
+
+function LitterForm({ litter, onClose, onSave }) {
+  const [formData, setFormData] = useState({
+    sire_id: '',
+    dam_id: '',
+    breeding_date: '',
+    whelping_date: '',
+    puppy_count: 0,
+    notes: ''
+  })
+  const [dogs, setDogs] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    fetchDogs()
+    if (litter) {
+      setFormData({
+        sire_id: litter.sire_id || '',
+        dam_id: litter.dam_id || '',
+        breeding_date: litter.breeding_date || '',
+        whelping_date: litter.whelping_date || '',
+        puppy_count: litter.puppy_count || 0,
+        notes: litter.notes || ''
+      })
+    }
+  }, [litter])
+
+  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 (litter) {
+        await axios.put(`/api/litters/${litter.id}`, formData)
+      } else {
+        await axios.post('/api/litters', formData)
+      }
+      onSave()
+      onClose()
+    } catch (error) {
+      setError(error.response?.data?.error || 'Failed to save litter')
+      setLoading(false)
+    }
+  }
+
+  const males = dogs.filter(d => d.sex === 'male')
+  const females = dogs.filter(d => d.sex === 'female')
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2>{litter ? 'Edit Litter' : 'Create New Litter'}</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">Sire (Father) *</label>
+              <select
+                name="sire_id"
+                className="input"
+                value={formData.sire_id}
+                onChange={handleChange}
+                required
+                disabled={!!litter}
+              >
+                <option value="">Select Sire</option>
+                {males.map(d => (
+                  <option key={d.id} value={d.id}>{d.name} {d.registration_number ? `(${d.registration_number})` : ''}</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}
+                required
+                disabled={!!litter}
+              >
+                <option value="">Select Dam</option>
+                {females.map(d => (
+                  <option key={d.id} value={d.id}>{d.name} {d.registration_number ? `(${d.registration_number})` : ''}</option>
+                ))}
+              </select>
+            </div>
+
+            <div className="form-group">
+              <label className="label">Breeding Date *</label>
+              <input
+                type="date"
+                name="breeding_date"
+                className="input"
+                value={formData.breeding_date}
+                onChange={handleChange}
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label className="label">Whelping Date</label>
+              <input
+                type="date"
+                name="whelping_date"
+                className="input"
+                value={formData.whelping_date}
+                onChange={handleChange}
+              />
+            </div>
+
+            <div className="form-group">
+              <label className="label">Expected Puppy Count</label>
+              <input
+                type="number"
+                name="puppy_count"
+                className="input"
+                value={formData.puppy_count}
+                onChange={handleChange}
+                min="0"
+              />
+            </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}
+              placeholder="Enter any notes about this breeding/litter..."
+            />
+          </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...' : litter ? 'Update Litter' : 'Create Litter'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default LitterForm