From 2c458dfc097a571b98bc26094fe1be027926b488 Mon Sep 17 00:00:00 2001
From: HotelSync <admin@hotelsync.ru>
Date: Sat, 21 Mar 2026 19:11:29 +0300
Subject: [PATCH] feat: early checkout with refund calculation for any
 checked_in booking
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../bookings/BookingDetailPanel.tsx           | 106 +++++++++++++++++-
 1 file changed, 104 insertions(+), 2 deletions(-)

diff --git a/src/components/bookings/BookingDetailPanel.tsx b/src/components/bookings/BookingDetailPanel.tsx
index bec3e67..977f5fc 100644
--- a/src/components/bookings/BookingDetailPanel.tsx
+++ b/src/components/bookings/BookingDetailPanel.tsx
@@ -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')}