From 2e7abc2b7abba8bfe91d8f012712714f761cbb3a Mon Sep 17 00:00:00 2001
From: HotelSync <admin@hotelsync.ru>
Date: Mon, 16 Mar 2026 14:48:06 +0300
Subject: [PATCH] Apply 7 calendar/booking UI improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. Remove redundant "Шахматка бронирований" header from CalendarPage
2. Fix Saturday abbreviation: "су" → "сб" (use EEEEEE format)
3. Compact toggle: add "Вид" text label to button
4. Booking bars: check-in starts at 1/3 cell, check-out ends at 1/3 cell
5. BookingModal: move "Статус гостя" tags to left column
6. BookingDetailPanel: add scan button + print package in Docs tab
7. RentalBookingModal: add payment method + amount section

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../bookings/BookingDetailPanel.tsx           | 17 +++++++
 src/components/bookings/BookingModal.tsx      |  6 +--
 src/components/calendar/BookingCalendar.tsx   | 31 +++++++++----
 src/components/rental/RentalBookingModal.tsx  | 45 ++++++++++++++++++-
 src/data/rentalData.ts                        |  1 +
 src/pages/CalendarPage.tsx                    |  8 ----
 6 files changed, 87 insertions(+), 21 deletions(-)

diff --git a/src/components/bookings/BookingDetailPanel.tsx b/src/components/bookings/BookingDetailPanel.tsx
index c5030f4..0bb03bf 100644
--- a/src/components/bookings/BookingDetailPanel.tsx
+++ b/src/components/bookings/BookingDetailPanel.tsx
@@ -463,6 +463,23 @@ export function BookingDetailPanel({ booking, room, onClose, onUpdate }: Booking
                   </div>
                 ))
               }
+              <button
+                onClick={() => showToast('Для сканирования подключите RFID/OCR сканер')}
+                className="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl border-2 border-dashed border-slate-300 dark:border-slate-600 text-slate-500 dark:text-slate-400 text-sm font-medium hover:border-brand-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors mt-2"
+              >
+                <ScanLine size={16} /> Сканировать документ
+              </button>
+              <div className="pt-3 mt-1 border-t border-slate-100 dark:border-slate-700">
+                <button
+                  onClick={() => showToast('🖨 Комплект документов отправлен на печать')}
+                  className="w-full btn-primary justify-center"
+                >
+                  <Printer size={15} /> Напечатать комплект
+                </button>
+                <p className="text-xs text-center text-slate-400 dark:text-slate-500 mt-1.5">
+                  Состав комплекта настраивается в разделе «Документы»
+                </p>
+              </div>
             </div>
           )}
         </div>
diff --git a/src/components/bookings/BookingModal.tsx b/src/components/bookings/BookingModal.tsx
index 8410acc..bd17fa1 100644
--- a/src/components/bookings/BookingModal.tsx
+++ b/src/components/bookings/BookingModal.tsx
@@ -417,10 +417,7 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
                 </select>
               </div>
             </div>
-          </div>
 
-          {/* ── RIGHT COLUMN ── */}
-          <div className="flex-1 space-y-3 min-w-0">
             {/* Guest tags */}
             <div>
               <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
@@ -451,7 +448,10 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
                 })}
               </div>
             </div>
+          </div>
 
+          {/* ── RIGHT COLUMN ── */}
+          <div className="flex-1 space-y-3 min-w-0">
             {/* Payment */}
             {total > 0 && (
               <div className="rounded-xl border border-slate-200 dark:border-slate-600 overflow-hidden">
diff --git a/src/components/calendar/BookingCalendar.tsx b/src/components/calendar/BookingCalendar.tsx
index ab0763d..8d542b8 100644
--- a/src/components/calendar/BookingCalendar.tsx
+++ b/src/components/calendar/BookingCalendar.tsx
@@ -98,15 +98,24 @@ export function BookingCalendar({ rooms, bookings, onBookingCreate, onBookingUpd
 
   const getBlockStyle = (booking: Booking) => {
     const start = parseISO(booking.checkIn)
-    const end = parseISO(booking.checkOut)
+    const end   = parseISO(booking.checkOut)
+    const rawColStart = differenceInDays(start, startDate)
+    const rawColEnd   = differenceInDays(end, startDate)
+    if (rawColStart >= visibleDays || rawColEnd <= 0) return null
 
-    const colStart = Math.max(0, differenceInDays(start, startDate))
-    const colEnd = Math.min(visibleDays, differenceInDays(end, startDate))
-    if (colStart >= visibleDays || colEnd <= 0) return null
+    const INSET = Math.round(CELL_WIDTH / 3)
+    const isClippedLeft  = rawColStart < 0
+    const isClippedRight = rawColEnd > visibleDays
+
+    const colStart = Math.max(0, rawColStart)
+    const colEnd   = Math.min(visibleDays, rawColEnd)
+
+    const leftPx  = colStart * CELL_WIDTH + (isClippedLeft  ? 0 : INSET)
+    const rightPx = colEnd   * CELL_WIDTH + (isClippedRight ? 0 : INSET)
 
     return {
-      left: colStart * CELL_WIDTH,
-      width: (colEnd - colStart) * CELL_WIDTH - 4,
+      left:  leftPx + 2,
+      width: Math.max(8, rightPx - leftPx - 4),
     }
   }
 
@@ -245,9 +254,13 @@ export function BookingCalendar({ rooms, bookings, onBookingCreate, onBookingUpd
         <button
           onClick={() => setCompact(v => !v)}
           title={compact ? 'Обычный вид' : 'Компактный вид'}
-          className={cn('btn-ghost p-2', compact && 'bg-brand-50 dark:bg-brand-900/20 text-brand-600 dark:text-brand-400')}
+          className={cn(
+            'btn-ghost flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium',
+            compact && 'bg-brand-50 dark:bg-brand-900/20 text-brand-600 dark:text-brand-400',
+          )}
         >
-          <AlignJustify size={16} />
+          <AlignJustify size={14} />
+          Вид
         </button>
 
         <button
@@ -295,7 +308,7 @@ export function BookingCalendar({ rooms, bookings, onBookingCreate, onBookingUpd
                     'text-xs font-medium',
                     isTod ? 'text-brand-600 dark:text-brand-400' : isWe ? 'text-slate-400' : 'text-slate-500 dark:text-slate-400',
                   )}>
-                    {format(date, 'EEE', { locale: ru }).slice(0, 2)}
+                    {format(date, 'EEEEEE', { locale: ru })}
                   </span>
                   <span className={cn(
                     'text-sm font-bold',
diff --git a/src/components/rental/RentalBookingModal.tsx b/src/components/rental/RentalBookingModal.tsx
index 1a9c129..ee3635f 100644
--- a/src/components/rental/RentalBookingModal.tsx
+++ b/src/components/rental/RentalBookingModal.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { X, Clock, CalendarDays, User, Phone, AlertCircle } from 'lucide-react'
+import { X, Clock, CalendarDays, User, Phone, AlertCircle, Banknote, CreditCard, Building2 } from 'lucide-react'
 import { cn } from '../../lib/utils'
 import type { RentalObject, RentalBooking } from '../../data/rentalData'
 
@@ -26,6 +26,8 @@ export function RentalBookingModal({ obj, date, existingBookings, onClose, onSav
   const [guestName, setGuestName] = useState('')
   const [guestPhone, setGuestPhone] = useState('')
   const [notes, setNotes] = useState('')
+  const [paidAmount, setPaidAmount] = useState<string>('')
+  const [payMethod, setPayMethod] = useState<'cash' | 'card' | 'transfer'>('cash')
 
   const hours = isFullDay
     ? obj.closeHour - obj.openHour
@@ -58,6 +60,7 @@ export function RentalBookingModal({ obj, date, existingBookings, onClose, onSav
       guestPhone: guestPhone.trim(),
       notes: notes.trim() || undefined,
       totalAmount,
+      paidAmount: parseFloat(paidAmount) || 0,
       status: 'confirmed',
     })
   }
@@ -231,6 +234,46 @@ export function RentalBookingModal({ obj, date, existingBookings, onClose, onSav
               {totalAmount.toLocaleString('ru-RU')} ₽
             </span>
           </div>
+
+          {/* Payment */}
+          <div className="space-y-2">
+            <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide">
+              Оплата при бронировании
+            </label>
+            <div className="grid grid-cols-3 gap-1.5">
+              {([
+                { id: 'cash' as const,     label: 'Наличные', icon: Banknote },
+                { id: 'card' as const,     label: 'Карта',    icon: CreditCard },
+                { id: 'transfer' as const, label: 'Перевод',  icon: Building2 },
+              ]).map(m => (
+                <button
+                  key={m.id} type="button" onClick={() => setPayMethod(m.id)}
+                  className={cn(
+                    'flex flex-col items-center gap-1 py-2 rounded-lg border text-xs font-medium transition-colors',
+                    payMethod === m.id
+                      ? 'bg-brand-600 border-brand-600 text-white'
+                      : 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-300',
+                  )}
+                >
+                  <m.icon size={14} /> {m.label}
+                </button>
+              ))}
+            </div>
+            <input
+              type="number"
+              className="input text-sm"
+              placeholder={`Сумма оплаты (макс. ${totalAmount.toLocaleString('ru-RU')} ₽)`}
+              value={paidAmount}
+              onChange={e => setPaidAmount(e.target.value)}
+              min="0"
+              max={totalAmount}
+            />
+            {paidAmount && parseFloat(paidAmount) > 0 && parseFloat(paidAmount) < totalAmount && (
+              <p className="text-xs text-amber-600 dark:text-amber-400">
+                Остаток: {(totalAmount - parseFloat(paidAmount)).toLocaleString('ru-RU')} ₽
+              </p>
+            )}
+          </div>
         </div>
 
         {/* Footer */}
diff --git a/src/data/rentalData.ts b/src/data/rentalData.ts
index 862d87b..6796b7e 100644
--- a/src/data/rentalData.ts
+++ b/src/data/rentalData.ts
@@ -24,6 +24,7 @@ export interface RentalBooking {
   guestPhone: string
   linkedRoomId?: string
   totalAmount: number
+  paidAmount?: number
   status: 'confirmed' | 'cancelled'
   notes?: string
 }
diff --git a/src/pages/CalendarPage.tsx b/src/pages/CalendarPage.tsx
index 3c23450..66e406f 100644
--- a/src/pages/CalendarPage.tsx
+++ b/src/pages/CalendarPage.tsx
@@ -39,14 +39,6 @@ export function CalendarPage() {
 
   return (
     <div className="flex flex-col h-full">
-      <div className="px-4 py-3 border-b border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 shrink-0">
-        <h1 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
-          Шахматка бронирований
-        </h1>
-        <p className="text-sm text-slate-500 dark:text-slate-400">
-          Нажмите и потяните по ячейкам для создания бронирования
-        </p>
-      </div>
       <div className="flex-1 overflow-hidden">
         <BookingCalendar
           rooms={MOCK_ROOMS}