ROADMAP.md

@@ -88,6 +88,7 @@
   - [x] Database migration for litter_id
   - [x] Enhanced API endpoints
   - [x] Dual parent selection mode (litter/manual)
+  - [x] UI fix for proper layout and error handling
 
 ---
 
@@ -192,100 +193,156 @@
 
 ---
 
-## 🎉 Latest Release: v0.3.0 - Litter Management & Pedigree Visualization
+## 🎉 Latest Release: v0.3.1 - UI Fixes & Error Handling
 
 ### What's New in This Release
 
-#### Litter Management System
-- ✅ Fixed "no such column: sire" error when adding puppies
-- ✅ Database migration adds `litter_id` column to dogs table
-- ✅ New LitterForm component for creating/editing litters
-- ✅ Enhanced litter API with puppy linking endpoints
-- ✅ Dual parent selection mode in DogForm:
-  - Link to existing litter (auto-populates parents)
-  - Manual parent selection (traditional method)
-- ✅ Auto-creation of parent relationships when linking to litter
+#### Bug Fixes
+- ✅ Fixed blank screen issue when opening Add Dog modal
+- ✅ Fixed overlapping radio buttons and dropdown in Parent Information section
+- ✅ Added graceful error handling for API failures
+- ✅ Improved layout with proper spacing and visual hierarchy
+- ✅ Fixed typo: `useManualParents` variable name
 
-#### Interactive Pedigree Visualization
-- ✅ Beautiful tree visualization using React-D3-Tree
-- ✅ Shows 5 generations of ancestry
-- ✅ Color-coded nodes: Blue for males, Pink for females
-- ✅ Interactive controls:
-  - Zoom in/out buttons
-  - Reset view
-  - Mouse wheel zoom
-  - Click and drag to pan
-- ✅ Node information display:
-  - Dog name
-  - Registration number
-  - Birth year
-  - Sex indicator (♂/♀)
-- ✅ Leverages existing COI calculator backend
-- ✅ Horizontal tree layout for better readability
+#### UI Improvements
+- ✅ Enhanced parent selection section with subtle indigo background
+- ✅ Properly sized radio buttons (16px) for better clickability
+- ✅ Horizontal radio button layout with proper flex spacing
+- ✅ Checkmark feedback when litter is selected
+- ✅ Conditional rendering based on litters availability
+- ✅ Fallback to manual parent selection when litters API fails
 
-### Migration Instructions
+#### Technical Changes
+- ✅ Added `littersAvailable` state flag
+- ✅ Wrapped API calls in try-catch blocks with fallbacks
+- ✅ Set empty arrays as defaults to prevent undefined errors
+- ✅ Added `name` attribute to radio buttons for proper grouping
 
-1. Pull the feature branch:
+### Migration Instructions (if not already done)
+
+1. Run database migration:
    ```bash
-   git checkout feature/litter-management-and-pedigree
+   docker exec breedr node server/db/migrate_litter_id.js
    ```
-
-2. Run database migration:
+   OR if running locally:
    ```bash
    node server/db/migrate_litter_id.js
    ```
 
-3. Install new dependencies:
+2. Pull latest changes:
    ```bash
-   cd client && npm install
+   git pull origin fix/dog-form-litter-ui
    ```
 
-4. Restart the server:
+3. Restart the application:
+   ```bash
+   docker-compose restart
+   ```
+   OR
    ```bash
    npm run dev
    ```
 
-### Documentation
-
-See [FEATURE_IMPLEMENTATION.md](./FEATURE_IMPLEMENTATION.md) for:
-- Detailed technical documentation
-- Architecture decisions
-- Usage examples
-- API changes
-- Testing checklist
-
 ---
 
 ## Current Sprint Focus
 
 ### Next Up (Priority)
-1. **Trial Pairing Tool**
-   - Create pairing form
-   - Display COI calculation
-   - Show common ancestors
-   - Add recommendation system
 
-2. **Heat Cycle Management**
-   - Add/edit heat cycles
-   - Track progesterone levels
-   - Calendar view
-   - Breeding date suggestions
+#### Option 1: Trial Pairing Simulator (Recommended) 🏆
+**Complexity:** Medium | **Impact:** High | **User Value:** Excellent
 
-3. **Enhanced Litter Features**
-   - Puppy batch addition
-   - Photo gallery per litter
-   - Whelping countdown
-   - Expected vs actual puppy count tracking
+**Why this is recommended:**
+- Leverages existing COI calculator backend
+- Provides immediate breeding decision support
+- High value feature for breeders
+- Relatively quick to implement
+
+**Tasks:**
+- Create PairingSimulator component
+- Add sire/dam selection dropdowns
+- Display COI calculation results
+- Show common ancestors table
+- Add genetic risk assessment
+- Color-coded recommendations (green/yellow/red)
+
+**Estimated Time:** 4-6 hours
+
+---
+
+#### Option 2: Heat Cycle Management
+**Complexity:** Medium-High | **Impact:** Medium | **User Value:** Good
+
+**Why consider this:**
+- Natural extension of litter management
+- Helps with breeding planning
+- Provides calendar functionality
+
+**Tasks:**
+- Create HeatCycleForm component
+- Add calendar view with heat cycle tracking
+- Track progesterone levels
+- Implement breeding date suggestions
+- Whelping date calculator
+
+**Estimated Time:** 6-8 hours
+
+---
+
+#### Option 3: Enhanced Litter Features
+**Complexity:** Low-Medium | **Impact:** Medium | **User Value:** Good
+
+**Why consider this:**
+- Polish existing litter functionality
+- Improves user workflow
+- Quick wins
+
+**Tasks:**
+- Puppy batch addition (add multiple puppies at once)
+- Photo gallery per litter
+- Whelping countdown timer
+- Expected vs actual puppy count tracking
+- Litter statistics dashboard
+
+**Estimated Time:** 3-5 hours
+
+---
+
+#### Option 4: Health Records System
+**Complexity:** Medium | **Impact:** High | **User Value:** Excellent
+
+**Why consider this:**
+- Important for breeding decisions
+- Vaccination tracking is valuable
+- Document management adds utility
+
+**Tasks:**
+- Create HealthRecordForm component
+- Add vaccination tracking with expiry alerts
+- Medical history timeline view
+- PDF/image document uploads
+- Health clearance status badges
+
+**Estimated Time:** 6-8 hours
+
+---
 
 ### Testing Needed
 - [x] Add/edit dog forms with litter selection
 - [x] Database migration execution
 - [x] Pedigree tree rendering
 - [x] Zoom/pan controls
+- [x] UI layout fixes
+- [x] Error handling for API failures
 - [ ] Trial pairing simulator
 - [ ] Heat cycle tracking
+- [ ] Enhanced litter features
+- [ ] Health records
 
 ### Known Issues
+- ✅ Fixed: Blank screen when opening Add Dog modal
+- ✅ Fixed: Overlapping UI elements in parent selection
+- ✅ Fixed: Missing error handling for litters API
 - None currently
 
 ---
@@ -300,7 +357,13 @@ See [FEATURE_IMPLEMENTATION.md](./FEATURE_IMPLEMENTATION.md) for:
 
 ## Version History
 
-- **v0.3.0** (Current) - Litter Management & Interactive Pedigree
+- **v0.3.1** (Current - March 9, 2026) - UI Fixes & Error Handling
+  - Fixed blank screen issue on Add Dog modal
+  - Improved parent selection layout
+  - Added comprehensive error handling
+  - Enhanced visual design with proper spacing
+  
+- **v0.3.0** - Litter Management & Interactive Pedigree
   - Added litter_id to dogs table
   - Implemented LitterForm component
   - Created PedigreeView with React-D3-Tree