client/src/pages/ExternalDogs.jsx

@@ -1,20 +1,24 @@
 import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { Users, Plus, Search, ExternalLink, Award, Filter } from 'lucide-react';
+import DogForm from '../components/DogForm';
 
 export default function ExternalDogs() {
-  const [dogs, setDogs]         = useState([]);
-  const [loading, setLoading]   = useState(true);
-  const [search, setSearch]     = useState('');
+  const [dogs, setDogs]           = useState([]);
+  const [loading, setLoading]     = useState(true);
+  const [search, setSearch]       = useState('');
   const [sexFilter, setSexFilter] = useState('all');
-  const navigate = useNavigate();
+  const [showAddModal, setShowAddModal] = useState(false);
 
   useEffect(() => {
+    fetchDogs();
+  }, []);
+
+  const fetchDogs = () => {
     fetch('/api/dogs/external')
       .then(r => r.json())
       .then(data => { setDogs(data); setLoading(false); })
       .catch(() => setLoading(false));
-  }, []);
+  };
 
   const filtered = dogs.filter(d => {
     const matchSearch = d.name.toLowerCase().includes(search.toLowerCase()) ||
@@ -41,7 +45,7 @@ export default function ExternalDogs() {
         </div>
         <button
           className="btn btn-primary"
-          onClick={() => navigate('/dogs/new?external=1')}
+          onClick={() => setShowAddModal(true)}
         >
           <Plus size={16} /> Add External Dog
         </button>
@@ -75,7 +79,7 @@ export default function ExternalDogs() {
           <ExternalLink size={48} className="empty-icon" />
           <h3>No external dogs yet</h3>
           <p>Add sires, dams, or ancestors that aren't part of your kennel roster.</p>
-          <button className="btn btn-primary" onClick={() => navigate('/dogs/new?external=1')}>
+          <button className="btn btn-primary" onClick={() => setShowAddModal(true)}>
             <Plus size={16} /> Add First External Dog
           </button>
         </div>
@@ -85,7 +89,7 @@ export default function ExternalDogs() {
             <section className="external-section">
               <h2 className="section-heading">&#9794; Sires ({sires.length})</h2>
               <div className="dog-grid">
-                {sires.map(dog => <DogCard key={dog.id} dog={dog} navigate={navigate} />)}
+                {sires.map(dog => <DogCard key={dog.id} dog={dog} />)}
               </div>
             </section>
           )}
@@ -93,25 +97,34 @@ export default function ExternalDogs() {
             <section className="external-section">
               <h2 className="section-heading">&#9792; Dams ({dams.length})</h2>
               <div className="dog-grid">
-                {dams.map(dog => <DogCard key={dog.id} dog={dog} navigate={navigate} />)}
+                {dams.map(dog => <DogCard key={dog.id} dog={dog} />)}
               </div>
             </section>
           )}
         </div>
       )}
+
+      {/* Add External Dog Modal */}
+      {showAddModal && (
+        <DogForm
+          isExternal={true}
+          onClose={() => setShowAddModal(false)}
+          onSave={() => { fetchDogs(); setShowAddModal(false); }}
+        />
+      )}
     </div>
   );
 }
 
-function DogCard({ dog, navigate }) {
+function DogCard({ dog }) {
   const photo = dog.photo_urls?.[0];
   return (
     <div
       className="dog-card dog-card--external"
-      onClick={() => navigate(`/dogs/${dog.id}`)}
+      onClick={() => window.location.href = `/dogs/${dog.id}`}
       role="button"
       tabIndex={0}
-      onKeyDown={e => e.key === 'Enter' && navigate(`/dogs/${dog.id}`)}
+      onKeyDown={e => e.key === 'Enter' && (window.location.href = `/dogs/${dog.id}`)}
     >
       <div className="dog-card-photo">
         {photo
@@ -129,7 +142,7 @@ function DogCard({ dog, navigate }) {
         <div className="dog-card-meta">{dog.breed}</div>
         <div className="dog-card-meta dog-card-meta--muted">
           {dog.sex === 'male' ? '\u2642 Sire' : '\u2640 Dam'}
-          {dog.birth_date && <> &middot; {dog.birth_date}</>}
+          {dog.birth_date && <>&middot; {dog.birth_date}</>}
         </div>
         {(dog.sire || dog.dam) && (
           <div className="dog-card-parents">