Add DogDetail page

client/src/pages/DogDetail.jsx

@@ -0,0 +1,145 @@
+import { useEffect, useState } from 'react'
+import { useParams, Link } from 'react-router-dom'
+import { Dog, GitBranch, Edit, Trash2 } from 'lucide-react'
+import axios from 'axios'
+
+function DogDetail() {
+  const { id } = useParams()
+  const [dog, setDog] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetchDog()
+  }, [id])
+
+  const fetchDog = async () => {
+    try {
+      const res = await axios.get(`/api/dogs/${id}`)
+      setDog(res.data)
+      setLoading(false)
+    } catch (error) {
+      console.error('Error fetching dog:', error)
+      setLoading(false)
+    }
+  }
+
+  if (loading) {
+    return <div className="container loading">Loading...</div>
+  }
+
+  if (!dog) {
+    return <div className="container">Dog not found</div>
+  }
+
+  return (
+    <div className="container">
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
+        <h1>{dog.name}</h1>
+        <div style={{ display: 'flex', gap: '0.5rem' }}>
+          <Link to={`/pedigree/${dog.id}`} className="btn btn-primary">
+            <GitBranch size={20} />
+            View Pedigree
+          </Link>
+          <button className="btn btn-secondary">
+            <Edit size={20} />
+            Edit
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-2">
+        <div className="card">
+          <h2 style={{ marginBottom: '1rem' }}>Basic Information</h2>
+          <div style={{ display: 'grid', gap: '0.75rem' }}>
+            <div>
+              <strong>Breed:</strong> {dog.breed}
+            </div>
+            <div>
+              <strong>Sex:</strong> {dog.sex === 'male' ? 'Male ♂' : 'Female ♀'}
+            </div>
+            {dog.birth_date && (
+              <div>
+                <strong>Birth Date:</strong> {new Date(dog.birth_date).toLocaleDateString()}
+              </div>
+            )}
+            {dog.color && (
+              <div>
+                <strong>Color:</strong> {dog.color}
+              </div>
+            )}
+            {dog.registration_number && (
+              <div>
+                <strong>Registration:</strong> {dog.registration_number}
+              </div>
+            )}
+            {dog.microchip && (
+              <div>
+                <strong>Microchip:</strong> {dog.microchip}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="card">
+          <h2 style={{ marginBottom: '1rem' }}>Photos</h2>
+          {dog.photo_urls && dog.photo_urls.length > 0 ? (
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: '0.5rem' }}>
+              {dog.photo_urls.map((url, index) => (
+                <img key={index} src={url} alt={`${dog.name} ${index + 1}`} style={{ width: '100%', aspectRatio: '1', objectFit: 'cover', borderRadius: '0.375rem' }} />
+              ))}
+            </div>
+          ) : (
+            <div style={{ textAlign: 'center', padding: '2rem', background: 'var(--bg-secondary)', borderRadius: '0.375rem' }}>
+              <Dog size={48} style={{ color: 'var(--text-secondary)', margin: '0 auto 0.5rem' }} />
+              <p style={{ color: 'var(--text-secondary)' }}>No photos uploaded</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {dog.notes && (
+        <div className="card" style={{ marginTop: '1.5rem' }}>
+          <h2 style={{ marginBottom: '1rem' }}>Notes</h2>
+          <p style={{ whiteSpace: 'pre-wrap' }}>{dog.notes}</p>
+        </div>
+      )}
+
+      <div className="card" style={{ marginTop: '1.5rem' }}>
+        <h2 style={{ marginBottom: '1rem' }}>Parents</h2>
+        <div className="grid grid-2">
+          <div>
+            <h3>Sire (Father)</h3>
+            {dog.sire ? (
+              <Link to={`/dogs/${dog.sire.id}`} style={{ color: 'var(--primary)' }}>{dog.sire.name}</Link>
+            ) : (
+              <p style={{ color: 'var(--text-secondary)' }}>Unknown</p>
+            )}
+          </div>
+          <div>
+            <h3>Dam (Mother)</h3>
+            {dog.dam ? (
+              <Link to={`/dogs/${dog.dam.id}`} style={{ color: 'var(--primary)' }}>{dog.dam.name}</Link>
+            ) : (
+              <p style={{ color: 'var(--text-secondary)' }}>Unknown</p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {dog.offspring && dog.offspring.length > 0 && (
+        <div className="card" style={{ marginTop: '1.5rem' }}>
+          <h2 style={{ marginBottom: '1rem' }}>Offspring ({dog.offspring.length})</h2>
+          <div style={{ display: 'grid', gap: '0.5rem' }}>
+            {dog.offspring.map(child => (
+              <Link key={child.id} to={`/dogs/${child.id}`} style={{ color: 'var(--primary)' }}>
+                {child.name} - {child.sex === 'male' ? '♂' : '♀'}
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DogDetail