67 lines
2.2 KiB
JavaScript
67 lines
2.2 KiB
JavaScript
import { useEffect, useState } from 'react'
|
|
import { Heart } from 'lucide-react'
|
|
import axios from 'axios'
|
|
|
|
function BreedingCalendar() {
|
|
const [heatCycles, setHeatCycles] = useState([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
fetchHeatCycles()
|
|
}, [])
|
|
|
|
const fetchHeatCycles = async () => {
|
|
try {
|
|
const res = await axios.get('/api/breeding/heat-cycles/active')
|
|
setHeatCycles(res.data)
|
|
setLoading(false)
|
|
} catch (error) {
|
|
console.error('Error fetching heat cycles:', error)
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
if (loading) {
|
|
return <div className="container loading">Loading breeding calendar...</div>
|
|
}
|
|
|
|
return (
|
|
<div className="container">
|
|
<h1 style={{ marginBottom: '2rem' }}>Breeding Calendar</h1>
|
|
|
|
<div className="card" style={{ marginBottom: '2rem' }}>
|
|
<h2>Active Heat Cycles</h2>
|
|
{heatCycles.length === 0 ? (
|
|
<div style={{ textAlign: 'center', padding: '2rem' }}>
|
|
<Heart size={48} style={{ color: 'var(--text-secondary)', margin: '0 auto 1rem' }} />
|
|
<p style={{ color: 'var(--text-secondary)' }}>No active heat cycles</p>
|
|
</div>
|
|
) : (
|
|
<div style={{ display: 'grid', gap: '1rem', marginTop: '1rem' }}>
|
|
{heatCycles.map(cycle => (
|
|
<div key={cycle.id} className="card" style={{ background: 'var(--bg-secondary)' }}>
|
|
<h3>{cycle.dog_name}</h3>
|
|
<p style={{ color: 'var(--text-secondary)' }}>
|
|
Started: {new Date(cycle.start_date).toLocaleDateString()}
|
|
</p>
|
|
{cycle.registration_number && (
|
|
<p style={{ fontSize: '0.875rem', color: 'var(--text-secondary)' }}>
|
|
Reg: {cycle.registration_number}
|
|
</p>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="card">
|
|
<h2>Whelping Calculator</h2>
|
|
<p style={{ color: 'var(--text-secondary)', marginTop: '0.5rem' }}>Calculate expected whelping dates based on breeding dates</p>
|
|
<p style={{ marginTop: '1rem', fontSize: '0.875rem' }}>Feature coming soon...</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BreedingCalendar |