client/src/App.jsx

@@ -1,11 +1,12 @@
-import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
-import { Home, Users, Activity, Heart } from 'lucide-react'
+import { BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'
+import { Home, Users, Activity, Heart, FlaskConical } from 'lucide-react'
 import Dashboard from './pages/Dashboard'
 import DogList from './pages/DogList'
 import DogDetail from './pages/DogDetail'
 import PedigreeView from './pages/PedigreeView'
 import LitterList from './pages/LitterList'
 import BreedingCalendar from './pages/BreedingCalendar'
+import PairingSimulator from './pages/PairingSimulator'
 import './App.css'
 
 function App() {
@@ -39,6 +40,10 @@ function App() {
                 <Heart size={20} />
                 <span>Breeding</span>
               </Link>
+              <Link to="/pairing" className="nav-link">
+                <FlaskConical size={20} />
+                <span>Pairing</span>
+              </Link>
             </div>
           </div>
         </nav>
@@ -51,6 +56,7 @@ function App() {
             <Route path="/pedigree/:id" element={<PedigreeView />} />
             <Route path="/litters" element={<LitterList />} />
             <Route path="/breeding" element={<BreedingCalendar />} />
+            <Route path="/pairing" element={<PairingSimulator />} />
           </Routes>
         </main>
       </div>