Apply 7 calendar/booking UI improvements

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>
2026-03-16 14:48:06 +03:00
parent afe7445d7e
commit 2e7abc2b7a
6 changed files with 87 additions and 21 deletions
--- 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>
--- 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">
--- a/src/components/calendar/BookingCalendar.tsx
+++ b/src/components/calendar/BookingCalendar.tsx
@@ -99,14 +99,23 @@ export function BookingCalendar({ rooms, bookings, onBookingCreate, onBookingUpd
  const getBlockStyle = (booking: Booking) => {
    const start = parseISO(booking.checkIn)
    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',
--- 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 */}
--- 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
 }
--- 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}