fix: DogForm accepts isExternal prop — sets is_external flag, hides litter/parent pickers, shows banner

client/src/components/DogForm.jsx

@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react'
-import { X, Award } from 'lucide-react'
+import { X, Award, ExternalLink } from 'lucide-react'
 import axios from 'axios'
 
-function DogForm({ dog, onClose, onSave }) {
+function DogForm({ dog, onClose, onSave, isExternal = false }) {
   const [formData, setFormData] = useState({
     name: '',
     registration_number: '',
@@ -16,6 +16,7 @@ function DogForm({ dog, onClose, onSave }) {
     dam_id: null,
     litter_id: null,
     is_champion: false,
+    is_external: isExternal ? 1 : 0,
   })
   const [dogs, setDogs] = useState([])
   const [litters, setLitters] = useState([])
@@ -24,9 +25,14 @@ function DogForm({ dog, onClose, onSave }) {
   const [useManualParents, setUseManualParents] = useState(true)
   const [littersAvailable, setLittersAvailable] = useState(false)
 
+  // Derive effective external state (editing an existing external dog or explicitly flagged)
+  const effectiveExternal = isExternal || (dog && dog.is_external)
+
   useEffect(() => {
+    if (!effectiveExternal) {
       fetchDogs()
       fetchLitters()
+    }
     if (dog) {
       setFormData({
         name: dog.name || '',
@@ -41,6 +47,7 @@ function DogForm({ dog, onClose, onSave }) {
         dam_id: dog.dam?.id || null,
         litter_id: dog.litter_id || null,
         is_champion: !!dog.is_champion,
+        is_external: dog.is_external ?? (isExternal ? 1 : 0),
       })
       setUseManualParents(!dog.litter_id)
     }
@@ -104,9 +111,10 @@ function DogForm({ dog, onClose, onSave }) {
       const submitData = {
         ...formData,
         is_champion: formData.is_champion ? 1 : 0,
-        sire_id: formData.sire_id || null,
+        is_external: effectiveExternal ? 1 : 0,
-        dam_id: formData.dam_id || null,
+        sire_id: effectiveExternal ? null : (formData.sire_id || null),
-        litter_id: useManualParents ? null : (formData.litter_id || null),
+        dam_id: effectiveExternal ? null : (formData.dam_id || null),
+        litter_id: (effectiveExternal || useManualParents) ? null : (formData.litter_id || null),
         registration_number: formData.registration_number || null,
         birth_date: formData.birth_date || null,
         color: formData.color || null,
@@ -133,10 +141,31 @@ function DogForm({ dog, onClose, onSave }) {
     <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>
+          <h2>
+            {effectiveExternal && <ExternalLink size={18} style={{ marginRight: '0.4rem', verticalAlign: 'middle', color: 'var(--text-muted)' }} />}
+            {dog ? 'Edit Dog' : effectiveExternal ? 'Add External Dog' : 'Add New Dog'}
+          </h2>
           <button className="btn-icon" onClick={onClose}><X size={24} /></button>
         </div>
 
+        {effectiveExternal && (
+          <div style={{
+            margin: '0 0 1rem',
+            padding: '0.6rem 1rem',
+            background: 'rgba(99,102,241,0.08)',
+            border: '1px solid rgba(99,102,241,0.25)',
+            borderRadius: 'var(--radius)',
+            fontSize: '0.875rem',
+            color: 'var(--text-secondary)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+          }}>
+            <ExternalLink size={14} />
+            External dog — not part of your kennel roster. Litter and parent fields are not applicable.
+          </div>
+        )}
+
         <form onSubmit={handleSubmit} className="modal-body">
           {error && <div className="error">{error}</div>}
 
@@ -221,7 +250,8 @@ function DogForm({ dog, onClose, onSave }) {
             </div>
           </div>
 
-          {/* Parent Section */}
+          {/* Parent Section — hidden for external dogs */}
+          {!effectiveExternal && (
             <div style={{
               marginTop: '1.5rem', padding: '1rem',
               background: 'rgba(194, 134, 42, 0.04)',
@@ -284,6 +314,7 @@ function DogForm({ dog, onClose, onSave }) {
                 </div>
               )}
             </div>
+          )}
 
           <div className="form-group" style={{ marginTop: '1rem' }}>
             <label className="label">Notes</label>
@@ -294,7 +325,7 @@ function DogForm({ dog, onClose, onSave }) {
           <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'}
+              {loading ? 'Saving...' : dog ? 'Update Dog' : effectiveExternal ? 'Add External Dog' : 'Add Dog'}
             </button>
           </div>
         </form>