From db05898c0829794d70f939601d98f6030d16e38e Mon Sep 17 00:00:00 2001
From: HotelSync <admin@hotelsync.ru>
Date: Sat, 21 Mar 2026 23:02:24 +0300
Subject: [PATCH] feat: 15-minute rental slots + compact calendar cell display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rental bookings now use minutes since midnight (start_hour/end_hour
  store e.g. 495 for 8:15, 570 for 9:30) — DB migration 017
- Buffer applied in exact minutes (no hour ceiling): 15min buffer after
  9:00 booking → next slot available at 9:15
- Calendar cell: removed working-hours line (8:00–22:00), now shows
  colored dot + compact time per booking (8–10, 8:15–9:15)
- Time selects show HH:MM format for 15-min intervals

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 backend/migrations/017_rental_minutes.sql    |  6 ++
 src/components/bookings/BookingModal.tsx     | 65 +++++++------
 src/components/calendar/BookingCalendar.tsx  | 35 +++----
 src/components/rental/RentalBookingModal.tsx | 98 ++++++++++++--------
 src/pages/RentalPage.tsx                     |  5 +-
 5 files changed, 121 insertions(+), 88 deletions(-)
 create mode 100644 backend/migrations/017_rental_minutes.sql

diff --git a/backend/migrations/017_rental_minutes.sql b/backend/migrations/017_rental_minutes.sql
new file mode 100644
index 0000000..58af453
--- /dev/null
+++ b/backend/migrations/017_rental_minutes.sql
@@ -0,0 +1,6 @@
+-- Convert rental_bookings start_hour/end_hour from whole hours to minutes since midnight
+-- Safe: only converts rows where start_hour < 25 (i.e., stored as hours, not minutes yet)
+UPDATE rental_bookings
+SET start_hour = start_hour * 60,
+    end_hour   = end_hour   * 60
+WHERE start_hour < 25;
diff --git a/src/components/bookings/BookingModal.tsx b/src/components/bookings/BookingModal.tsx
index 1f306d6..d416930 100644
--- a/src/components/bookings/BookingModal.tsx
+++ b/src/components/bookings/BookingModal.tsx
@@ -44,10 +44,21 @@ interface BookingModalProps {
 }
 
 // ── Rental time helpers ────────────────────────────────────────────────────────
-function rentalHourOptions(from: number, to: number) {
-  return Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i)
+function rentalTimeOptions(openHour: number, closeHour: number): number[] {
+  const result: number[] = []
+  for (let m = openHour * 60; m < closeHour * 60; m += 15) result.push(m)
+  return result
+}
+function rentalEndOptions(fromMin: number, toMin: number): number[] {
+  const result: number[] = []
+  for (let m = fromMin + 15; m <= toMin; m += 15) result.push(m)
+  return result
+}
+function fmtTime(min: number) {
+  const h = Math.floor(min / 60)
+  const m = min % 60
+  return m === 0 ? `${h}:00` : `${h}:${String(m).padStart(2, '0')}`
 }
-function fmtH(h: number) { return `${h}:00` }
 
 function isConflict(bookings: Booking[], roomId: string, checkIn: string, checkOut: string, excludeId?: string) {
   if (!checkIn || !checkOut || checkIn >= checkOut) return false
@@ -86,8 +97,8 @@ export function BookingModal({ open, draft, rooms, bookings = [], onClose, onSav
   const [rentalObjId, setRentalObjId]         = useState(rentalObjects?.[0]?.id ?? '')
   const [rentalDate, setRentalDate]           = useState(draft.checkIn)
   const [rentalIsFullDay, setRentalIsFullDay] = useState(false)
-  const [rentalStartH, setRentalStartH]       = useState(0)
-  const [rentalEndH, setRentalEndH]           = useState(2)
+  const [rentalStartM, setRentalStartM]       = useState(0)   // minutes since midnight
+  const [rentalEndM, setRentalEndM]           = useState(60)
   const [rentalGuest, setRentalGuest]         = useState('')
   const [rentalPhone, setRentalPhone]         = useState('')
   const [rentalNotes, setRentalNotes]         = useState('')
@@ -99,24 +110,24 @@ export function BookingModal({ open, draft, rooms, bookings = [], onClose, onSav
     (b.date as string).slice(0, 10) === rentalDate &&
     b.status !== 'cancelled',
   )
-  const rentalBreakH = Math.ceil((rentalObj?.bufferMinutes ?? 0) / 60)
+  const rentalBufMin = rentalObj?.bufferMinutes ?? 0
   const rentalAvailStarts = rentalObj
-    ? rentalHourOptions(rentalObj.openHour, rentalObj.closeHour - 1).filter(h =>
-        !rentalDayBookings.some(b => !b.isFullDay && h >= b.startHour && h < b.endHour + rentalBreakH),
+    ? rentalTimeOptions(rentalObj.openHour, rentalObj.closeHour).filter(m =>
+        !rentalDayBookings.some(b => !b.isFullDay && m >= b.startHour && m < b.endHour + rentalBufMin),
       )
     : []
   const rentalGetMaxEnd = (start: number) => {
-    const next = rentalDayBookings.filter(b => !b.isFullDay && b.startHour >= start + 1)
+    const next = rentalDayBookings.filter(b => !b.isFullDay && b.startHour >= start + 15)
       .sort((a, b) => a.startHour - b.startHour)[0]
-    return next ? next.startHour - rentalBreakH : (rentalObj?.closeHour ?? 22)
+    return next ? next.startHour - rentalBufMin : (rentalObj?.closeHour ?? 22) * 60
   }
-  const rentalEffStart = rentalAvailStarts.includes(rentalStartH) ? rentalStartH : (rentalAvailStarts[0] ?? rentalObj?.openHour ?? 8)
-  const rentalAvailEnds = rentalHourOptions(rentalEffStart + 1, rentalGetMaxEnd(rentalEffStart))
+  const rentalEffStart = rentalAvailStarts.includes(rentalStartM) ? rentalStartM : (rentalAvailStarts[0] ?? (rentalObj?.openHour ?? 8) * 60)
+  const rentalAvailEnds = rentalEndOptions(rentalEffStart, rentalGetMaxEnd(rentalEffStart))
 
-  // Sync rentalEndH when rentalEffStart shifts past it
+  // Sync rentalEndM when rentalEffStart shifts past it
   useLayoutEffect(() => {
-    if (!rentalIsFullDay && rentalEndH <= rentalEffStart) {
-      setRentalEndH(rentalEffStart + 1)
+    if (!rentalIsFullDay && rentalEndM <= rentalEffStart) {
+      setRentalEndM(rentalEffStart + 60)
     }
   }, [rentalEffStart])
   const rentalHasFullDay = rentalDayBookings.some(b => b.isFullDay)
@@ -125,7 +136,7 @@ export function BookingModal({ open, draft, rooms, bookings = [], onClose, onSav
 
   const rentalHours = rentalIsFullDay
     ? (rentalObj ? rentalObj.closeHour - rentalObj.openHour : 0)
-    : Math.max(0, rentalEndH - rentalEffStart)
+    : Math.max(0, (rentalEndM - rentalEffStart) / 60)
   const rentalTotal = rentalObj
     ? (rentalIsFullDay ? rentalObj.pricePerDay : rentalHours * rentalObj.pricePerHour)
     : 0
@@ -146,8 +157,8 @@ export function BookingModal({ open, draft, rooms, bookings = [], onClose, onSav
         objectId: rentalObj.id,
         date: rentalDate,
         isFullDay: rentalIsFullDay,
-        startHour: rentalIsFullDay ? rentalObj.openHour : rentalEffStart,
-        endHour:   rentalIsFullDay ? rentalObj.closeHour : rentalEndH,
+        startHour: rentalIsFullDay ? rentalObj.openHour * 60 : rentalEffStart,
+        endHour:   rentalIsFullDay ? rentalObj.closeHour * 60 : rentalEndM,
         guestName:  rentalGuest.trim(),
         guestPhone: rentalPhone.trim(),
         notes:      rentalNotes.trim() || undefined,
@@ -407,7 +418,7 @@ export function BookingModal({ open, draft, rooms, bookings = [], onClose, onSav
                   {rentalObjects.map(o => (
                     <button
                       key={o.id}
-                      onClick={() => { setRentalObjId(o.id); setRentalStartH(o.openHour); setRentalEndH(Math.min(o.openHour + 2, o.closeHour)) }}
+                      onClick={() => { setRentalObjId(o.id); setRentalStartM(o.openHour * 60); setRentalEndM(o.openHour * 60 + 60) }}
                       className={cn(
                         'flex items-center gap-2 p-2.5 rounded-xl border text-sm font-medium transition-colors text-left',
                         rentalObjId === o.id
@@ -475,8 +486,8 @@ export function BookingModal({ open, draft, rooms, bookings = [], onClose, onSav
                   ) : (
                     <div>
                       <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">
-                        Время ({rentalObj.openHour}:00 – {rentalObj.closeHour}:00)
-                        {rentalBreakH > 0 && <span className="ml-1 font-normal normal-case">(перерыв {rentalObj.bufferMinutes} мин)</span>}
+                        Время
+                        {rentalBufMin > 0 && <span className="ml-1 font-normal normal-case">(перерыв {rentalBufMin} мин)</span>}
                       </label>
                       <div className="flex items-center gap-3">
                         <div className="flex-1">
@@ -484,20 +495,20 @@ export function BookingModal({ open, draft, rooms, bookings = [], onClose, onSav
                           <select className="input text-sm" value={rentalEffStart}
                             onChange={e => {
                               const v = parseInt(e.target.value)
-                              setRentalStartH(v)
+                              setRentalStartM(v)
                               const maxE = rentalGetMaxEnd(v)
-                              if (rentalEndH <= v || rentalEndH > maxE) setRentalEndH(Math.min(v + 1, maxE))
+                              if (rentalEndM <= v || rentalEndM > maxE) setRentalEndM(Math.min(v + 60, maxE))
                             }}>
-                            {rentalAvailStarts.map(h => <option key={h} value={h}>{fmtH(h)}</option>)}
+                            {rentalAvailStarts.map(m => <option key={m} value={m}>{fmtTime(m)}</option>)}
                           </select>
                         </div>
                         <Clock size={14} className="text-slate-400 mt-4 shrink-0" />
                         <div className="flex-1">
                           <label className="block text-xs text-slate-500 mb-1">Конец</label>
                           <select className="input text-sm"
-                            value={rentalAvailEnds.includes(rentalEndH) ? rentalEndH : (rentalAvailEnds[0] ?? rentalEndH)}
-                            onChange={e => setRentalEndH(parseInt(e.target.value))}>
-                            {rentalAvailEnds.map(h => <option key={h} value={h}>{fmtH(h)}</option>)}
+                            value={rentalAvailEnds.includes(rentalEndM) ? rentalEndM : (rentalAvailEnds[0] ?? rentalEndM)}
+                            onChange={e => setRentalEndM(parseInt(e.target.value))}>
+                            {rentalAvailEnds.map(m => <option key={m} value={m}>{fmtTime(m)}</option>)}
                           </select>
                         </div>
                       </div>
diff --git a/src/components/calendar/BookingCalendar.tsx b/src/components/calendar/BookingCalendar.tsx
index 6225f1f..fa7c9db 100644
--- a/src/components/calendar/BookingCalendar.tsx
+++ b/src/components/calendar/BookingCalendar.tsx
@@ -696,26 +696,21 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook
                           ) : dayBookings.length > 0 ? (
                             /* Hourly bookings — squares + times */
                             <div className="absolute inset-x-1 top-1.5 flex flex-col gap-0.5">
-                              {/* One colored square per booking */}
-                              <div className="flex gap-0.5 flex-wrap">
-                                {dayBookings.map(b => (
-                                  <div
-                                    key={b.id}
-                                    className={cn('w-3 h-3 rounded-[3px]', obj.color)}
-                                    title={`${b.guestName} · ${b.startHour}:00–${b.endHour}:00`}
-                                  />
-                                ))}
-                              </div>
-                              {/* Working hours range */}
-                              <span className="text-[9px] text-slate-400 dark:text-slate-500 leading-none">
-                                {obj.openHour}:00–{obj.closeHour}:00
-                              </span>
-                              {/* Booked time slots */}
-                              {dayBookings.map(b => (
-                                <span key={b.id} className="text-[9px] text-slate-600 dark:text-slate-300 font-medium leading-none">
-                                  {b.startHour}–{b.endHour}
-                                </span>
-                              ))}
+                                  {/* One colored dot per booking + its time */}
+                              {dayBookings.map(b => {
+                                const fmtT = (min: number) => {
+                                  const h = Math.floor(min / 60), m = min % 60
+                                  return m === 0 ? `${h}` : `${h}:${String(m).padStart(2,'0')}`
+                                }
+                                return (
+                                  <div key={b.id} className="flex items-center gap-0.5">
+                                    <div className={cn('w-2.5 h-2.5 rounded-[3px] shrink-0', obj.color)} />
+                                    <span className="text-[9px] text-slate-700 dark:text-slate-200 font-medium leading-none truncate">
+                                      {fmtT(b.startHour)}–{fmtT(b.endHour)}
+                                    </span>
+                                  </div>
+                                )
+                              })}
                             </div>
                           ) : (
                             /* Empty — show "+" hint on hover */
diff --git a/src/components/rental/RentalBookingModal.tsx b/src/components/rental/RentalBookingModal.tsx
index 86e06b9..e557759 100644
--- a/src/components/rental/RentalBookingModal.tsx
+++ b/src/components/rental/RentalBookingModal.tsx
@@ -17,8 +17,25 @@ interface RentalBookingModalProps {
   onSave: (b: RentalBooking) => void
 }
 
-function hourOptions(from: number, to: number): number[] {
-  return Array.from({ length: to - from + 1 }, (_, i) => from + i)
+// 15-minute slot options (values in minutes since midnight)
+function timeOptions(openHour: number, closeHour: number): number[] {
+  const result: number[] = []
+  for (let m = openHour * 60; m < closeHour * 60; m += 15) result.push(m)
+  return result
+}
+
+// End-time options: from start+15 to maxEnd (inclusive), step 15
+function endOptions(fromMin: number, toMin: number): number[] {
+  const result: number[] = []
+  for (let m = fromMin + 15; m <= toMin; m += 15) result.push(m)
+  return result
+}
+
+// Format minutes since midnight as "H:MM" or "H:00"
+function fmtTime(min: number): string {
+  const h = Math.floor(min / 60)
+  const m = min % 60
+  return m === 0 ? `${h}:00` : `${h}:${String(m).padStart(2, '0')}`
 }
 
 function maskPhone(raw: string): string {
@@ -39,8 +56,9 @@ export function RentalBookingModal({
 }: RentalBookingModalProps) {
   const isEdit = !!editBooking
   const [isFullDay, setIsFullDay] = useState(editBooking?.isFullDay ?? false)
-  const [startHour, setStartHour] = useState(editBooking?.startHour ?? obj.openHour)
-  const [endHour, setEndHour] = useState(editBooking?.endHour ?? Math.min(obj.openHour + 2, obj.closeHour))
+  // startMin / endMin store minutes since midnight (e.g. 8:15 = 495)
+  const [startMin, setStartMin] = useState(editBooking?.startHour ?? obj.openHour * 60)
+  const [endMin, setEndMin] = useState(editBooking?.endHour ?? obj.openHour * 60 + 60)
   const [guestName, setGuestName] = useState(editBooking?.guestName ?? '')
   const [guestPhone, setGuestPhone] = useState(editBooking?.guestPhone ?? '')
   const [notes, setNotes] = useState(editBooking?.notes ?? '')
@@ -101,48 +119,48 @@ export function RentalBookingModal({
   // If any timed slot is booked, "весь день" is unavailable
   const hasTimedConflict   = timedBookings.length > 0
 
-  // Break between sessions (ceil to whole hours)
-  const breakHours = Math.ceil((obj.bufferMinutes ?? 0) / 60)
+  // Buffer in minutes (used directly — no hour ceiling)
+  const bufMin = obj.bufferMinutes ?? 0
 
-  // Available start hours: exclude hours inside any booked slot + its buffer
-  const availableStartHours = hourOptions(obj.openHour, obj.closeHour - 1).filter(h =>
-    !timedBookings.some(b => h >= b.startHour && h < b.endHour + breakHours),
+  // Available 15-min start slots: exclude minutes inside any booked slot + its buffer
+  const availableStarts = timeOptions(obj.openHour, obj.closeHour).filter(m =>
+    !timedBookings.some(b => m >= b.startHour && m < b.endHour + bufMin),
   )
 
-  // Max end hour for a given start: limited by next booking minus buffer
-  const getMaxEndHour = (start: number) => {
+  // Max end minute for a given start: limited by next booking start minus buffer
+  const getMaxEnd = (start: number) => {
     const next = timedBookings
-      .filter(b => b.startHour >= start + 1)
+      .filter(b => b.startHour >= start + 15)
       .sort((a, b) => a.startHour - b.startHour)[0]
-    return next ? next.startHour - breakHours : obj.closeHour
+    return next ? next.startHour - bufMin : obj.closeHour * 60
   }
 
-  // If current startHour is blocked, snap to first available
-  const effectiveStartHour = availableStartHours.includes(startHour)
-    ? startHour
-    : (availableStartHours[0] ?? obj.openHour)
+  // If current startMin is blocked, snap to first available
+  const effectiveStart = availableStarts.includes(startMin)
+    ? startMin
+    : (availableStarts[0] ?? obj.openHour * 60)
 
-  const availableEndHours = hourOptions(effectiveStartHour + 1, getMaxEndHour(effectiveStartHour))
+  const availableEnds = endOptions(effectiveStart, getMaxEnd(effectiveStart))
 
-  // Sync endHour state when effectiveStartHour shifts past it (e.g. first available start is beyond initial endHour)
+  // Sync endMin when effectiveStart shifts past it
   useLayoutEffect(() => {
-    if (!isFullDay && endHour <= effectiveStartHour) {
-      setEndHour(effectiveStartHour + 1)
+    if (!isFullDay && endMin <= effectiveStart) {
+      setEndMin(effectiveStart + 60) // default 1 hour
     }
-  }, [effectiveStartHour])
+  }, [effectiveStart])
 
   const hours = isFullDay
     ? obj.closeHour - obj.openHour
-    : Math.max(0, endHour - effectiveStartHour)
+    : Math.max(0, (endMin - effectiveStart) / 60)
 
   const totalAmount = isFullDay ? obj.pricePerDay : hours * obj.pricePerHour
   const maxHoursOk = !obj.maxHoursPerSlot || hours <= obj.maxHoursPerSlot
 
   const isTimeConflict = !isFullDay && timedBookings.some(b =>
-    b.startHour < endHour && b.endHour > effectiveStartHour,
+    b.startHour < endMin && b.endHour > effectiveStart,
   )
 
-  const noSlots = !hasFullDayConflict && availableStartHours.length === 0
+  const noSlots = !hasFullDayConflict && availableStarts.length === 0
 
   // For new (unknown) guests, phone is required
   const phoneRequired = !guestIsKnown
@@ -171,8 +189,8 @@ export function RentalBookingModal({
         objectId: obj.id,
         date,
         isFullDay,
-        startHour: isFullDay ? obj.openHour : startHour,
-        endHour:   isFullDay ? obj.closeHour : endHour,
+        startHour: isFullDay ? obj.openHour * 60 : effectiveStart,
+        endHour:   isFullDay ? obj.closeHour * 60 : endMin,
         guestName: guestName.trim(),
         guestPhone: guestPhone.trim(),
         linkedRoomId: (linked?.roomId ?? linkedBookingId) || undefined,
@@ -215,7 +233,7 @@ export function RentalBookingModal({
                 <div key={b.id} className="flex items-center gap-2 text-sm">
                   <div className={cn('w-2 h-2 rounded-full shrink-0', obj.color)} />
                   <span className="text-slate-700 dark:text-slate-300 font-medium">
-                    {b.isFullDay ? 'Весь день' : `${b.startHour}:00 – ${b.endHour}:00`}
+                    {b.isFullDay ? 'Весь день' : `${fmtTime(b.startHour)} – ${fmtTime(b.endHour)}`}
                   </span>
                   <span className="text-slate-500 dark:text-slate-400 truncate">{b.guestName}</span>
                 </div>
@@ -261,8 +279,8 @@ export function RentalBookingModal({
           {!isFullDay && !hasFullDayConflict && (
             <div>
               <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">
-                Время аренды ({obj.openHour}:00 – {obj.closeHour}:00)
-                {breakHours > 0 && <span className="ml-1 font-normal normal-case">(перерыв {obj.bufferMinutes} мин)</span>}
+                Время аренды
+                {bufMin > 0 && <span className="ml-1 font-normal normal-case">(перерыв {bufMin} мин)</span>}
               </label>
               {noSlots ? (
                 <div className="flex items-center gap-2 p-3 rounded-xl bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 text-sm">
@@ -276,16 +294,16 @@ export function RentalBookingModal({
                       <label className="block text-xs text-slate-500 mb-1">Начало</label>
                       <select
                         className="input text-sm"
-                        value={effectiveStartHour}
+                        value={effectiveStart}
                         onChange={e => {
                           const v = parseInt(e.target.value)
-                          setStartHour(v)
-                          const maxEnd = getMaxEndHour(v)
-                          if (endHour <= v || endHour > maxEnd) setEndHour(Math.min(v + 1, maxEnd))
+                          setStartMin(v)
+                          const maxEnd = getMaxEnd(v)
+                          if (endMin <= v || endMin > maxEnd) setEndMin(Math.min(v + 60, maxEnd))
                         }}
                       >
-                        {availableStartHours.map(h => (
-                          <option key={h} value={h}>{formatHour(h)}</option>
+                        {availableStarts.map(m => (
+                          <option key={m} value={m}>{fmtTime(m)}</option>
                         ))}
                       </select>
                     </div>
@@ -294,11 +312,11 @@ export function RentalBookingModal({
                       <label className="block text-xs text-slate-500 mb-1">Конец</label>
                       <select
                         className="input text-sm"
-                        value={availableEndHours.includes(endHour) ? endHour : (availableEndHours[0] ?? endHour)}
-                        onChange={e => setEndHour(parseInt(e.target.value))}
+                        value={availableEnds.includes(endMin) ? endMin : (availableEnds[0] ?? endMin)}
+                        onChange={e => setEndMin(parseInt(e.target.value))}
                       >
-                        {availableEndHours.map(h => (
-                          <option key={h} value={h}>{formatHour(h)}</option>
+                        {availableEnds.map(m => (
+                          <option key={m} value={m}>{fmtTime(m)}</option>
                         ))}
                       </select>
                     </div>
diff --git a/src/pages/RentalPage.tsx b/src/pages/RentalPage.tsx
index 9d53e44..c7269c1 100644
--- a/src/pages/RentalPage.tsx
+++ b/src/pages/RentalPage.tsx
@@ -491,7 +491,10 @@ export function RentalPage() {
                         <td className="px-4 py-2.5 text-slate-700 dark:text-slate-300">
                           {b.isFullDay ? (
                             <Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">Весь день</Badge>
-                          ) : `${b.startHour}:00 – ${b.endHour}:00`}
+                          ) : (() => {
+                            const fmt = (m: number) => { const h = Math.floor(m/60), mn = m%60; return mn === 0 ? `${h}:00` : `${h}:${String(mn).padStart(2,'0')}` }
+                            return `${fmt(b.startHour)} – ${fmt(b.endHour)}`
+                          })()}
                         </td>
                         <td className="px-4 py-2.5 font-medium text-slate-900 dark:text-slate-100">{b.guestName}</td>
                         <td className="px-4 py-2.5 text-slate-500 dark:text-slate-400">{b.guestPhone || '—'}</td>