fix: sync endHour state when effectiveStartHour shifts past it

When existing bookings block the initial startHour, effectiveStartHour
snaps to the first available slot. Added useLayoutEffect to update
endHour state immediately so start and end times are never equal.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/bookings/BookingModal.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useLayoutEffect } from 'react'
 import { format, addDays } from 'date-fns'
 import { Star, Banknote, CreditCard, AlertCircle, Map, Plus, Trash2, Tag, Minus, BedDouble, Tv2, Send, Loader2, CheckCircle2, Clock, CalendarDays, User, Phone } from 'lucide-react'
 import { MOCK_DISCOUNTS } from '../../pages/DiscountsPage'
@@ -112,6 +112,13 @@ export function BookingModal({ open, draft, rooms, bookings = [], onClose, onSav
   }
   const rentalEffStart = rentalAvailStarts.includes(rentalStartH) ? rentalStartH : (rentalAvailStarts[0] ?? rentalObj?.openHour ?? 8)
   const rentalAvailEnds = rentalHourOptions(rentalEffStart + 1, rentalGetMaxEnd(rentalEffStart))
+
+  // Sync rentalEndH when rentalEffStart shifts past it
+  useLayoutEffect(() => {
+    if (!rentalIsFullDay && rentalEndH <= rentalEffStart) {
+      setRentalEndH(rentalEffStart + 1)
+    }
+  }, [rentalEffStart])
   const rentalHasFullDay = rentalDayBookings.some(b => b.isFullDay)
   const rentalHasTimed   = rentalDayBookings.some(b => !b.isFullDay)
   const rentalNoSlots    = !rentalHasFullDay && rentalAvailStarts.length === 0

src/components/rental/RentalBookingModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, useLayoutEffect } from 'react'
 import { X, Clock, CalendarDays, User, Phone, AlertCircle, Banknote, CreditCard, Building2, Link2 } from 'lucide-react'
 import { cn } from '../../lib/utils'
 import { api } from '../../lib/api'
@@ -124,6 +124,13 @@ export function RentalBookingModal({
 
   const availableEndHours = hourOptions(effectiveStartHour + 1, getMaxEndHour(effectiveStartHour))
 
+  // Sync endHour state when effectiveStartHour shifts past it (e.g. first available start is beyond initial endHour)
+  useLayoutEffect(() => {
+    if (!isFullDay && endHour <= effectiveStartHour) {
+      setEndHour(effectiveStartHour + 1)
+    }
+  }, [effectiveStartHour])
+
   const hours = isFullDay
     ? obj.closeHour - obj.openHour
     : Math.max(0, endHour - effectiveStartHour)