Add LitterList page

client/src/pages/LitterList.jsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react'
+import { Activity } from 'lucide-react'
+import axios from 'axios'
+
+function LitterList() {
+  const [litters, setLitters] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetchLitters()
+  }, [])
+
+  const fetchLitters = async () => {
+    try {
+      const res = await axios.get('/api/litters')
+      setLitters(res.data)
+      setLoading(false)
+    } catch (error) {
+      console.error('Error fetching litters:', error)
+      setLoading(false)
+    }
+  }
+
+  if (loading) {
+    return <div className="container loading">Loading litters...</div>
+  }
+
+  return (
+    <div className="container">
+      <h1 style={{ marginBottom: '2rem' }}>Litters</h1>
+
+      {litters.length === 0 ? (
+        <div className="card" style={{ textAlign: 'center', padding: '4rem' }}>
+          <Activity size={64} style={{ color: 'var(--text-secondary)', margin: '0 auto 1rem' }} />
+          <h2>No litters recorded yet</h2>
+          <p style={{ color: 'var(--text-secondary)' }}>Start tracking breeding records</p>
+        </div>
+      ) : (
+        <div style={{ display: 'grid', gap: '1rem' }}>
+          {litters.map(litter => (
+            <div key={litter.id} className="card">
+              <h3>{litter.sire_name} × {litter.dam_name}</h3>
+              <p style={{ color: 'var(--text-secondary)', marginTop: '0.5rem' }}>
+                Breeding Date: {new Date(litter.breeding_date).toLocaleDateString()}
+              </p>
+              {litter.whelping_date && (
+                <p style={{ color: 'var(--text-secondary)' }}>
+                  Whelping Date: {new Date(litter.whelping_date).toLocaleDateString()}
+                </p>
+              )}
+              <p style={{ marginTop: '0.5rem' }}>
+                <strong>Puppies:</strong> {litter.puppy_count || litter.puppies?.length || 0}
+              </p>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default LitterList