client/src/pages/DogList.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { Dog, Plus, Search } from 'lucide-react'
 import axios from 'axios'
+import DogForm from '../components/DogForm'
 
 function DogList() {
   const [dogs, setDogs] = useState([])
@@ -47,6 +48,10 @@ function DogList() {
     setFilteredDogs(filtered)
   }
 
+  const handleSave = () => {
+    fetchDogs()
+  }
+
   if (loading) {
     return <div className="container loading">Loading dogs...</div>
   }
@@ -111,6 +116,13 @@ function DogList() {
           <p style={{ color: 'var(--text-secondary)' }}>No dogs found matching your search criteria.</p>
         </div>
       )}
+
+      {showAddModal && (
+        <DogForm
+          onClose={() => setShowAddModal(false)}
+          onSave={handleSave}
+        />
+      )}
     </div>
   )
 }