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>
This commit is contained in:
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user