feat: early checkout with refund calculation for any checked_in booking
Replaces simple 'Выселить' button with a checkout form: - Date picker (min=checkIn, max=original checkOut) - If leaving early: shows refund nights, refund amount, and payment method selector - Adds negative payment record to local payment history - On confirm: sets status=checked_out and updates checkOut date Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -264,6 +264,11 @@ export function BookingDetailPanel({ booking, room, rooms, allBookings, slug, on
|
||||
const [earlyRoomId, setEarlyRoomId] = useState(booking.roomId)
|
||||
const [earlySaving, setEarlySaving] = useState(false)
|
||||
|
||||
const [earlyOutOpen, setEarlyOutOpen] = useState(false)
|
||||
const [earlyOutDate, setEarlyOutDate] = useState(today)
|
||||
const [earlyOutMethod, setEarlyOutMethod] = useState<'cash' | 'card' | 'transfer'>('cash')
|
||||
const [earlyOutSaving, setEarlyOutSaving] = useState(false)
|
||||
|
||||
const freeRoomsForRelocate = (rooms ?? []).filter(r =>
|
||||
r.id !== booking.roomId &&
|
||||
!(allBookings ?? []).some(b =>
|
||||
@@ -297,6 +302,31 @@ export function BookingDetailPanel({ booking, room, rooms, allBookings, slug, on
|
||||
}
|
||||
}
|
||||
|
||||
const handleEarlyCheckOut = async () => {
|
||||
if (earlyOutDate > booking.checkOut) { showToast('Дата не может быть позже плановой'); return }
|
||||
setEarlyOutSaving(true)
|
||||
try {
|
||||
const origNights = differenceInDays(new Date(booking.checkOut), new Date(booking.checkIn))
|
||||
const actualNights = differenceInDays(new Date(earlyOutDate), new Date(booking.checkIn))
|
||||
const refundNights = origNights - actualNights
|
||||
if (refundNights > 0) {
|
||||
const refundAmt = Math.round(refundNights * booking.totalAmount / origNights)
|
||||
setPayments(prev => [...prev, {
|
||||
id: `refund-${Date.now()}`,
|
||||
date: new Date().toLocaleDateString('ru-RU'),
|
||||
amount: -refundAmt,
|
||||
method: earlyOutMethod,
|
||||
note: `Возврат за ${refundNights} неиспользованных ${refundNights === 1 ? 'ночь' : refundNights < 5 ? 'ночи' : 'ночей'}`,
|
||||
}])
|
||||
}
|
||||
await onUpdate(booking.id, { checkOut: earlyOutDate, status: 'checked_out' })
|
||||
setEarlyOutOpen(false)
|
||||
showToast('Гость выселен')
|
||||
} finally {
|
||||
setEarlyOutSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const findConflict = (ci: string, co: string, rid: string): Booking | null =>
|
||||
(allBookings ?? []).find(b =>
|
||||
b.id !== booking.id &&
|
||||
@@ -1247,11 +1277,83 @@ export function BookingDetailPanel({ booking, room, rooms, allBookings, slug, on
|
||||
<CheckCircle size={15} /> Заселить
|
||||
</button>
|
||||
)}
|
||||
{booking.status === 'checked_in' && (
|
||||
<button onClick={() => setStatus('checked_out')} className="w-full btn-primary justify-center bg-emerald-600 hover:bg-emerald-700">
|
||||
{booking.status === 'checked_in' && !earlyOutOpen && (
|
||||
<button
|
||||
onClick={() => { setEarlyOutOpen(true); setEarlyOutDate(today) }}
|
||||
className="w-full btn-primary justify-center bg-emerald-600 hover:bg-emerald-700"
|
||||
>
|
||||
<CheckCircle size={15} /> Выселить
|
||||
</button>
|
||||
)}
|
||||
{booking.status === 'checked_in' && earlyOutOpen && (() => {
|
||||
const origNights = differenceInDays(new Date(booking.checkOut), new Date(booking.checkIn))
|
||||
const actualNights = Math.max(1, differenceInDays(new Date(earlyOutDate), new Date(booking.checkIn)))
|
||||
const refundNights = origNights - actualNights
|
||||
const refundAmt = refundNights > 0 ? Math.round(refundNights * booking.totalAmount / origNights) : 0
|
||||
return (
|
||||
<div className="rounded-xl border border-emerald-200 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-900/20 p-3 space-y-3">
|
||||
<p className="text-xs font-semibold text-emerald-800 dark:text-emerald-300 flex items-center gap-1.5">
|
||||
<CheckCircle size={13} /> Выселение гостя
|
||||
</p>
|
||||
<div>
|
||||
<label className={lbl}>Дата выезда</label>
|
||||
<input
|
||||
type="date"
|
||||
className="input text-sm"
|
||||
value={earlyOutDate}
|
||||
min={booking.checkIn}
|
||||
max={booking.checkOut}
|
||||
onChange={e => setEarlyOutDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
{refundNights > 0 && (
|
||||
<div className="rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 p-2.5 space-y-2">
|
||||
<p className="text-xs font-medium text-amber-800 dark:text-amber-300">
|
||||
Возврат за {refundNights} {refundNights === 1 ? 'ночь' : refundNights < 5 ? 'ночи' : 'ночей'}: {formatCurrency(refundAmt)}
|
||||
</p>
|
||||
<div className="flex gap-1.5">
|
||||
{METHODS.map(m => (
|
||||
<button
|
||||
key={m.id}
|
||||
onClick={() => setEarlyOutMethod(m.id)}
|
||||
className={cn(
|
||||
'flex-1 py-1 rounded-lg text-xs font-medium border transition-colors',
|
||||
earlyOutMethod === m.id
|
||||
? 'bg-amber-500 border-amber-500 text-white'
|
||||
: 'border-amber-200 dark:border-amber-700 text-amber-700 dark:text-amber-400 hover:bg-amber-100 dark:hover:bg-amber-800/30',
|
||||
)}
|
||||
>
|
||||
{m.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[11px] text-amber-600 dark:text-amber-400">
|
||||
Выдайте гостю {formatCurrency(refundAmt)} {earlyOutMethod === 'cash' ? 'наличными' : earlyOutMethod === 'card' ? 'на карту' : 'переводом'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{refundNights <= 0 && (
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">Возврат не требуется</p>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setEarlyOutOpen(false)}
|
||||
className="btn-secondary flex-1 justify-center text-xs py-1.5"
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
onClick={handleEarlyCheckOut}
|
||||
disabled={earlyOutSaving}
|
||||
className="flex-1 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-700 disabled:opacity-50 text-white text-xs font-semibold transition-colors flex items-center justify-center gap-1"
|
||||
>
|
||||
{earlyOutSaving ? <Loader2 size={12} className="animate-spin" /> : <CheckCircle size={12} />}
|
||||
Подтвердить выезд
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
{(booking.status === 'confirmed' || booking.status === 'inquiry') && (
|
||||
<button
|
||||
onClick={() => setStatus('cancelled')}
|
||||
|
||||
Reference in New Issue
Block a user