feat(ui): add Champion toggle checkbox to DogForm

client/src/components/DogForm.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { X } from 'lucide-react'
+import { X, Award } from 'lucide-react'
 import axios from 'axios'
 
 function DogForm({ dog, onClose, onSave }) {
@@ -12,9 +12,10 @@ function DogForm({ dog, onClose, onSave }) {
     color: '',
     microchip: '',
     notes: '',
-    sire_id: null,  // Changed from '' to null
+    sire_id: null,
-    dam_id: null,   // Changed from '' to null
+    dam_id: null,
-    litter_id: null  // Changed from '' to null
+    litter_id: null,
+    is_champion: false,
   })
   const [dogs, setDogs] = useState([])
   const [litters, setLitters] = useState([])
@@ -36,9 +37,10 @@ function DogForm({ dog, onClose, onSave }) {
         color: dog.color || '',
         microchip: dog.microchip || '',
         notes: dog.notes || '',
-        sire_id: dog.sire?.id || null,  // Ensure null, not ''
+        sire_id: dog.sire?.id || null,
-        dam_id: dog.dam?.id || null,    // Ensure null, not ''
+        dam_id: dog.dam?.id || null,
-        litter_id: dog.litter_id || null // Ensure null, not ''
+        litter_id: dog.litter_id || null,
+        is_champion: !!dog.is_champion,
       })
       setUseManualParents(!dog.litter_id)
     }
@@ -48,8 +50,7 @@ function DogForm({ dog, onClose, onSave }) {
     try {
       const res = await axios.get('/api/dogs')
       setDogs(res.data || [])
-    } catch (error) {
+    } catch (e) {
-      console.error('Error fetching dogs:', error)
       setDogs([])
     }
   }
@@ -57,16 +58,11 @@ function DogForm({ dog, onClose, onSave }) {
   const fetchLitters = async () => {
     try {
       const res = await axios.get('/api/litters')
-      const litterData = res.data || []
+      const data = res.data || []
-      setLitters(litterData)
+      setLitters(data)
-      setLittersAvailable(litterData.length > 0)
+      setLittersAvailable(data.length > 0)
-      // Only default to manual if no litters exist
+      if (data.length === 0) setUseManualParents(true)
-      if (litterData.length === 0) {
+    } catch (e) {
-        setUseManualParents(true)
-      }
-    } catch (error) {
-      console.error('Error fetching litters:', error)
-      // If endpoint fails, gracefully fallback to manual mode
       setLitters([])
       setLittersAvailable(false)
       setUseManualParents(true)
@@ -74,25 +70,27 @@ function DogForm({ dog, onClose, onSave }) {
   }
 
   const handleChange = (e) => {
-    const { name, value } = e.target
+    const { name, value, type, checked } = e.target
-    
+
-    // Convert empty strings to null for ID fields
+    if (type === 'checkbox') {
-    let processedValue = value
+      setFormData(prev => ({ ...prev, [name]: checked }))
-    if (name === 'sire_id' || name === 'dam_id' || name === 'litter_id') {
+      return
-      processedValue = value === '' ? null : parseInt(value)
     }
-    
+
-    setFormData(prev => ({ ...prev, [name]: processedValue }))
+    let processed = value
-    
+    if (name === 'sire_id' || name === 'dam_id' || name === 'litter_id') {
-    // If litter is selected, auto-populate parents
+      processed = value === '' ? null : parseInt(value)
+    }
+    setFormData(prev => ({ ...prev, [name]: processed }))
+
     if (name === 'litter_id' && value) {
-      const selectedLitter = litters.find(l => l.id === parseInt(value))
+      const sel = litters.find(l => l.id === parseInt(value))
-      if (selectedLitter) {
+      if (sel) {
         setFormData(prev => ({
           ...prev,
-          sire_id: selectedLitter.sire_id,
+          sire_id: sel.sire_id,
-          dam_id: selectedLitter.dam_id,
+          dam_id: sel.dam_id,
-          breed: prev.breed || selectedLitter.sire_name?.split(' ')[0] || ''
+          breed: prev.breed || sel.sire_name?.split(' ')[0] || ''
         }))
       }
     }
@@ -102,11 +100,10 @@ function DogForm({ dog, onClose, onSave }) {
     e.preventDefault()
     setError('')
     setLoading(true)
-
     try {
-      const submitData = { 
+      const submitData = {
         ...formData,
-        // Ensure null values are sent, not empty strings
+        is_champion: formData.is_champion ? 1 : 0,
         sire_id: formData.sire_id || null,
         dam_id: formData.dam_id || null,
         litter_id: useManualParents ? null : (formData.litter_id || null),
@@ -114,25 +111,22 @@ function DogForm({ dog, onClose, onSave }) {
         birth_date: formData.birth_date || null,
         color: formData.color || null,
         microchip: formData.microchip || null,
-        notes: formData.notes || null
+        notes: formData.notes || null,
       }
-      
       if (dog) {
-        // Update existing dog
         await axios.put(`/api/dogs/${dog.id}`, submitData)
       } else {
-        // Create new dog
         await axios.post('/api/dogs', submitData)
       }
       onSave()
       onClose()
-    } catch (error) {
+    } catch (err) {
-      setError(error.response?.data?.error || 'Failed to save dog')
+      setError(err.response?.data?.error || 'Failed to save dog')
       setLoading(false)
     }
   }
 
-  const males = dogs.filter(d => d.sex === 'male' && d.id !== dog?.id)
+  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 (
@@ -140,9 +134,7 @@ function DogForm({ dog, onClose, onSave }) {
       <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}>
+          <button className="btn-icon" onClick={onClose}><X size={24} /></button>
-            <X size={24} />
-          </button>
         </div>
 
         <form onSubmit={handleSubmit} className="modal-body">
@@ -151,48 +143,25 @@ function DogForm({ dog, onClose, onSave }) {
           <div className="form-grid">
             <div className="form-group">
               <label className="label">Name *</label>
-              <input
+              <input type="text" name="name" className="input"
-                type="text"
+                value={formData.name} onChange={handleChange} required />
-                name="name"
-                className="input"
-                value={formData.name}
-                onChange={handleChange}
-                required
-              />
             </div>
 
             <div className="form-group">
               <label className="label">Registration Number</label>
-              <input
+              <input type="text" name="registration_number" className="input"
-                type="text"
+                value={formData.registration_number} onChange={handleChange} />
-                name="registration_number"
-                className="input"
-                value={formData.registration_number}
-                onChange={handleChange}
-              />
             </div>
 
             <div className="form-group">
               <label className="label">Breed *</label>
-              <input
+              <input type="text" name="breed" className="input"
-                type="text"
+                value={formData.breed} onChange={handleChange} required />
-                name="breed"
-                className="input"
-                value={formData.breed}
-                onChange={handleChange}
-                required
-              />
             </div>
 
             <div className="form-group">
               <label className="label">Sex *</label>
-              <select
+              <select name="sex" className="input" value={formData.sex} onChange={handleChange} required>
-                name="sex"
-                className="input"
-                value={formData.sex}
-                onChange={handleChange}
-                required
-              >
                 <option value="male">Male</option>
                 <option value="female">Female</option>
               </select>
@@ -200,62 +169,77 @@ function DogForm({ dog, onClose, onSave }) {
 
             <div className="form-group">
               <label className="label">Birth Date</label>
-              <input
+              <input type="date" name="birth_date" className="input"
-                type="date"
+                value={formData.birth_date} onChange={handleChange} />
-                name="birth_date"
-                className="input"
-                value={formData.birth_date}
-                onChange={handleChange}
-              />
             </div>
 
             <div className="form-group">
               <label className="label">Color</label>
-              <input
+              <input type="text" name="color" className="input"
-                type="text"
+                value={formData.color} onChange={handleChange} />
-                name="color"
-                className="input"
-                value={formData.color}
-                onChange={handleChange}
-              />
             </div>
 
             <div className="form-group">
               <label className="label">Microchip Number</label>
-              <input
+              <input type="text" name="microchip" className="input"
-                type="text"
+                value={formData.microchip} onChange={handleChange} />
-                name="microchip"
-                className="input"
-                value={formData.microchip}
-                onChange={handleChange}
-              />
             </div>
           </div>
 
-          {/* Litter or Manual Parent Selection */}
+          {/* Champion Toggle */}
-          <div style={{ marginTop: '1.5rem', padding: '1rem', background: 'rgba(99, 102, 241, 0.05)', borderRadius: '8px', border: '1px solid rgba(99, 102, 241, 0.2)' }}>
+          <div style={{
+            marginTop: '1.25rem',
+            padding: '0.875rem 1rem',
+            background: formData.is_champion ? 'rgba(194, 134, 42, 0.08)' : 'var(--bg-primary)',
+            border: formData.is_champion ? '1px solid var(--champion-gold)' : '1px solid var(--border)',
+            borderRadius: 'var(--radius)',
+            transition: 'all 0.2s',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.75rem',
+            cursor: 'pointer',
+          }}
+            onClick={() => setFormData(prev => ({ ...prev, is_champion: !prev.is_champion }))}
+          >
+            <input
+              type="checkbox"
+              name="is_champion"
+              id="is_champion"
+              checked={!!formData.is_champion}
+              onChange={handleChange}
+              style={{ width: '18px', height: '18px', cursor: 'pointer', accentColor: 'var(--champion-gold)' }}
+              onClick={e => e.stopPropagation()}
+            />
+            <Award size={18} style={{ color: formData.is_champion ? 'var(--champion-gold)' : 'var(--text-muted)' }} />
+            <div>
+              <div style={{ fontWeight: 600, color: formData.is_champion ? 'var(--champion-gold)' : 'var(--text-primary)', fontSize: '0.9375rem' }}>
+                Champion
+              </div>
+              <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>
+                Mark this dog as a titled champion &mdash; offspring will display a Champion Bloodline badge
+              </div>
+            </div>
+          </div>
+
+          {/* Parent Section */}
+          <div style={{
+            marginTop: '1.5rem', padding: '1rem',
+            background: 'rgba(194, 134, 42, 0.04)',
+            borderRadius: '8px',
+            border: '1px solid rgba(194, 134, 42, 0.15)'
+          }}>
             <label className="label" style={{ marginBottom: '0.75rem', display: 'block', fontWeight: '600' }}>Parent Information</label>
-            
+
             {littersAvailable && (
               <div style={{ display: 'flex', gap: '1.5rem', marginBottom: '1rem', flexWrap: 'wrap' }}>
                 <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
-                  <input
+                  <input type="radio" name="parentMode" checked={!useManualParents}
-                    type="radio"
+                    onChange={() => setUseManualParents(false)} style={{ width: '16px', height: '16px' }} />
-                    name="parentMode"
-                    checked={!useManualParents}
-                    onChange={() => setUseManualParents(false)}
-                    style={{ width: '16px', height: '16px' }}
-                  />
                   <span>Link to Litter</span>
                 </label>
                 <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
-                  <input
+                  <input type="radio" name="parentMode" checked={useManualParents}
-                    type="radio"
+                    onChange={() => setUseManualParents(true)} style={{ width: '16px', height: '16px' }} />
-                    name="parentMode"
-                    checked={useManualParents}
-                    onChange={() => setUseManualParents(true)}
-                    style={{ width: '16px', height: '16px' }}
-                  />
                   <span>Manual Parent Selection</span>
                 </label>
               </div>
@@ -264,12 +248,8 @@ function DogForm({ dog, onClose, onSave }) {
             {!useManualParents && littersAvailable ? (
               <div className="form-group" style={{ marginTop: '0.5rem' }}>
                 <label className="label">Select Litter</label>
-                <select
+                <select name="litter_id" className="input"
-                  name="litter_id"
+                  value={formData.litter_id || ''} onChange={handleChange}>
-                  className="input"
-                  value={formData.litter_id || ''}
-                  onChange={handleChange}
-                >
                   <option value="">No Litter</option>
                   {litters.map(l => (
                     <option key={l.id} value={l.id}>
@@ -278,7 +258,7 @@ function DogForm({ dog, onClose, onSave }) {
                   ))}
                 </select>
                 {formData.litter_id && (
-                  <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#6366f1', fontStyle: 'italic' }}>
+                  <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: 'var(--primary)', fontStyle: 'italic' }}>
                     ✓ Parents will be automatically set from the selected litter
                   </div>
                 )}
@@ -287,31 +267,18 @@ function DogForm({ dog, onClose, onSave }) {
               <div className="form-grid" style={{ marginTop: '0.5rem' }}>
                 <div className="form-group">
                   <label className="label">Sire (Father)</label>
-                  <select
+                  <select name="sire_id" className="input"
-                    name="sire_id"
+                    value={formData.sire_id || ''} onChange={handleChange}>
-                    className="input"
-                    value={formData.sire_id || ''}
-                    onChange={handleChange}
-                  >
                     <option value="">Unknown</option>
-                    {males.map(d => (
+                    {males.map(d => <option key={d.id} value={d.id}>{d.name}{d.is_champion ? ' ✪' : ''}</option>)}
-                      <option key={d.id} value={d.id}>{d.name}</option>
-                    ))}
                   </select>
                 </div>
-
                 <div className="form-group">
                   <label className="label">Dam (Mother)</label>
-                  <select
+                  <select name="dam_id" className="input"
-                    name="dam_id"
+                    value={formData.dam_id || ''} onChange={handleChange}>
-                    className="input"
-                    value={formData.dam_id || ''}
-                    onChange={handleChange}
-                  >
                     <option value="">Unknown</option>
-                    {females.map(d => (
+                    {females.map(d => <option key={d.id} value={d.id}>{d.name}{d.is_champion ? ' ✪' : ''}</option>)}
-                      <option key={d.id} value={d.id}>{d.name}</option>
-                    ))}
                   </select>
                 </div>
               </div>
@@ -320,19 +287,12 @@ function DogForm({ dog, onClose, onSave }) {
 
           <div className="form-group" style={{ marginTop: '1rem' }}>
             <label className="label">Notes</label>
-            <textarea
+            <textarea name="notes" className="input" rows="4"
-              name="notes"
+              value={formData.notes} onChange={handleChange} />
-              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}>
+            <button type="button" className="btn btn-secondary" onClick={onClose} disabled={loading}>Cancel</button>
-              Cancel
-            </button>
             <button type="submit" className="btn btn-primary" disabled={loading}>
               {loading ? 'Saving...' : dog ? 'Update Dog' : 'Add Dog'}
             </button>