client/src/components/LitterForm.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
 import { X } from 'lucide-react'
 import axios from 'axios'
 
-function LitterForm({ litter, onClose, onSave }) {
+function LitterForm({ litter, prefill, onClose, onSave }) {
   const [formData, setFormData] = useState({
     sire_id: '',
     dam_id: '',
@@ -26,8 +26,16 @@ function LitterForm({ litter, onClose, onSave }) {
         puppy_count: litter.puppy_count || 0,
         notes: litter.notes || ''
       })
+    } else if (prefill) {
+      // Pre-populate from BreedingCalendar "Record Litter" flow
+      setFormData(prev => ({
+        ...prev,
+        dam_id: prefill.dam_id ? String(prefill.dam_id) : '',
+        breeding_date: prefill.breeding_date || '',
+        whelping_date: prefill.whelping_date || '',
+      }))
     }
-  }, [litter])
+  }, [litter, prefill])
 
   const fetchDogs = async () => {
     try {
@@ -69,7 +77,7 @@ function LitterForm({ litter, onClose, onSave }) {
     <div className="modal-overlay" onClick={onClose}>
       <div className="modal-content" onClick={(e) => e.stopPropagation()}>
         <div className="modal-header">
-          <h2>{litter ? 'Edit Litter' : 'Create New Litter'}</h2>
+          <h2>{litter ? 'Edit Litter' : prefill ? `Record Litter — ${prefill.dam_name || 'Dam pre-selected'}` : 'Create New Litter'}</h2>
           <button className="btn-icon" onClick={onClose}>
             <X size={24} />
           </button>
@@ -78,6 +86,20 @@ function LitterForm({ litter, onClose, onSave }) {
         <form onSubmit={handleSubmit} className="modal-body">
           {error && <div className="error">{error}</div>}
 
+          {prefill && !litter && (
+            <div style={{
+              background: 'rgba(16,185,129,0.08)',
+              border: '1px solid rgba(16,185,129,0.3)',
+              borderRadius: 'var(--radius-sm)',
+              padding: '0.6rem 0.875rem',
+              marginBottom: '1rem',
+              fontSize: '0.85rem',
+              color: 'var(--success)'
+            }}>
+              🐾 Pre-filled from heat cycle — select a sire to complete the litter record.
+            </div>
+          )}
+
           <div className="form-grid">
             <div className="form-group">
               <label className="label">Sire (Father) *</label>
@@ -111,6 +133,11 @@ function LitterForm({ litter, onClose, onSave }) {
                   <option key={d.id} value={d.id}>{d.name} {d.registration_number ? `(${d.registration_number})` : ''}</option>
                 ))}
               </select>
+              {prefill?.dam_name && !litter && (
+                <p style={{ fontSize: '0.78rem', color: 'var(--success)', marginTop: '0.25rem' }}>
+                  ✓ Pre-selected: {prefill.dam_name}
+                </p>
+              )}
             </div>
 
             <div className="form-group">